YUI() An Introduction to YUI 3 Jenny Han Donnelly YUI Library
YUI Library Overview <ul><li>Core </li></ul><ul><li>Utilities </li></ul><ul><li>Widgets </li></ul><ul><li>CSS </li></ul>
Introducing YUI 3 <ul><li>Lighter </li></ul><ul><li>Easier </li></ul><ul><li>Faster </li></ul>
The Sandbox Model
The Sandbox Model <script src=&quot;yui-min.js&quot;> <script> YUI().use(&quot;anim&quot;, function(Y) { ... }); </script>
Optimized Loading <ul><li><script src=&quot;yui-min.js&quot;> </li></ul><ul><li><script> </li></ul><ul><li>YUI().use(&quot...
Protection from Other Modules <ul><li><script src=&quot;http://yui.yahooapis.com/ 3.4 /build/yui/yui-min.js&quot;> </li></...
The YUI Buffet
Sub-Module Architecture <ul><ul><li>io  : All IO functionality (7.4K) </li></ul></ul><ul><ul><ul><li>io-base  : Core XHR f...
IO's K-Weight Profile
Extension and Plugin Architecture Overlay Tooltip myOverlay Positioning Adv. Positioning Shimming/Stacking Header/Body/Foo...
The Node Wrapper
Working with DOM Elements in YUI 3 <ul><li>var node = Y.get(&quot;.actions li.task.selected&quot;); </li></ul><ul><li>node...
Supports <ul><li>node.appendChild(aNode) </li></ul><ul><li>node.cloneNode(boolean) </li></ul><ul><li>node.scrollIntoView()...
Normalizes <ul><li>node.getAttribute(&quot;href&quot;) </li></ul><ul><li>node.contains(aNode) </li></ul><ul><li>node.getSt...
Enhances <ul><li>node.addClass(&quot;selectable&quot;) </li></ul><ul><li>node.toggleClass(&quot;enabled&quot;) </li></ul><...
Extendable <ul><li>node.plug(IOPlugin); </li></ul><ul><li>node.io.getContent(&quot;http://foo/bar&quot;); </li></ul><ul><l...
Constrainable Node is the single point of access to the DOM. Makes YUI 3 ideal as a trusted source for &quot;constrained&q...
NodeList * The Costco to Node’s Kwik-E Mart var items = Y. all (&quot;.actions li&quot;); items.addClass(&quot;disabled&qu...
YUI 3 Node API <ul><li>Supports </li></ul><ul><li>Normalizes </li></ul><ul><li>Enhances </li></ul><ul><li>Extendable </li>...
The Event System
Event Listeners & Event Facades // Dom Event myElement.on(&quot;click&quot;, function( e ) { if (! e.target .hasClass(&quo...
Detaching Listeners // YUI 3 var   handle   = overlay.on(&quot;show&quot;, myShowHandler); handle .detach(); // Or overlay...
Custom Event Flow: On/Default/After On On Default Behavior After After After this.fire(&quot;select&quot;); e.stopImmediat...
DOM Event Delegation Y.on(&quot;delegate&quot;, function(e) { e.target.addClass(&quot;selected&quot;) }, &quot;ul&quot;, &...
Custom Event Delegation Menu MenuItem On On Def. Behavior After After After this.fire(&quot;menuitem:select&quot;) On Def....
YUI 3 Event Model <ul><li>Event Listening </li></ul><ul><li>Event Facades </li></ul><ul><li>Detaching </li></ul><ul><li>Bu...
YUI Library Overview <ul><li>Documentation </li></ul><ul><li>Community </li></ul>
Thanks! <ul><li>Read  http://developer.yahoo.com/yui/3 </li></ul><ul><li>Discuss  http://yuilibrary.com/forum/viewforum.ph...
Upcoming SlideShare
Loading in...5
×

YDN KR Tech Talk : YUI 3.0

2,390

Published on

YUI() - An Introduction to YUI 3
by Jenny Han Donnelly , YUI Library Team , Yahoo Sunnyvale

Introducing YUI 3
Lighter,Easier, Faster
The Sandbox Model
Optimized Loading
Protection from Other Modules
Sub-Module Architecture
Extension and Plugin Architecture
YUI 3 Node API
The Event System

Read http://developer.yahoo.com/yui/3
Discuss http://yuilibrary.com/forum/viewforum.php?f=15
http://github.com/yui/yui3/tree/master

1 Comment
6 Likes
Statistics
Notes
  • 貌似比较初级
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,390
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • Started 2005. Open sourced in 2006. 2.7.0 is current release. Mature and stable framework deployed across Yahoo! and all over the world. Incredible documentation. Active developer community.
  • YUI 3 is the next generation of the YUI codebase. It&apos;s the culmination of all the lessons we&apos;ve learned from building YUI 2, and reflects the years of developer feedback we have received, as well as the latest and greatest front-end best practices. Lighter Emphasis on Code Reuse: Common Base, Plugins, Extensions Finer Grained Modules/Sub-Modules Easier Developer conveniences: flatter namespace, chainability, language enhancements, batch operations Consistent API Faster Loading Runtime performance
  • Our sandbox model provides your own protected YUI environment with a built-in closure.
  • The seed file defines the YUI global object. The YUI() statement returns an instance of YUI, which we call Y. The use() statement: Defines the modules to be loaded Loads them into the environment
  • An asynchronous call is made to load the files without blocking. The dependencies are managed for you. By default, all the files are minified and combo-handled into a single HTTP request.
  • Instances are now tied to a specific version of YUI. For example, if a web pages has a &amp;quot;finance&amp;quot; application on a portal page it will be tied to YUI version 3.4. If a &amp;quot;movies&amp;quot; application is loaded later on the same page, its code is tied to YUI version 3.0. Each sandbox&apos;s YUI version is protected from other code on the page. Currently your YUI() instance is tied to the library version at execution-time. In the future, we expect to support dynamic versioning.
  • The YUI Buffet In YUI 3, you can pick and choose with a lot more granularity what you want to load on your page wth our new sub-module architecture.
  • Sub-modules allow you to target specific functionality, without loading code you don&apos;t need. For instance, the IO utility consists of 5 sub-modules. You can load sub-modules independently in conjunction with one another as a rollup
  • Not only is IO smaller in YUI 3 than in YUI 2, pulling in only the sub-modules you need can save you significant bandwidth as well. You&apos;ll see this kind of footprint optimization across every component in the library.
  • In YUI, the Overlay class was harded coded with this set of functionality. Tooltip, which is a subclass of Overlay only needed a subset of the functionality but inherited the whole set anyway. In YUI 3, we have refactored classes and functionality to be more loosely coupled. Overlay now consists of 4 class extensions. Anim and IO are now instance plugins. Tooltip no longer needs to extend Overlay, it can use just the extensions that it needs.
  • Node is a wrapper API for DOM elements. It provides a centralized, convenient, securable interface for working with DOM elements.
  • In YUI 3 you are working with Node instances rather than directly with the DOM element. You can call methods on it directly rather than having to call a static method. You can add event handlers direclty also. These methods are chainable.
  • Node supports the standard methods and properties of the HTMLElement API. Most methods are mapped directly. Properties are accessed through getter and setter methods.
  • Certain DOM APIs are implemented inconsistently across the a-grade browsers. Node normalizes these inconsistencies into a single API.
  • Node adds convenience APIs that are not in the DOM spec. Node exposes change events.
  • Plugins add application-specific features to Nodes.
  • A single point of access to the DOM API makes YUI 3 ideal as a trusted source in &amp;quot;constrained&amp;quot; environments such as Caja and Ad-Safe.
  • The NodeList API is used to batch Node operations. The static method Node.all() returns a NodeList. The each() method accepts a custom batch function. A NodeList is not a live collection like a DOM collection. It is an array of Nodes that is a snapshot in time.
  • The Custom Event system has been enhanced in YUI 3 to be lighter and more useful. This system drives the modular code architecture of the rest of the library.
  • Event facades are normalized event objects passed to event handlers. They also pass important data values to custom event handlers.
  • There are several different ways to detach event handlers in YUI 3: The on() method returns a value that can be stored and used to detach later. The on() method accepts a namespace prefix to an event that can be used to detach handlers. A wildcard may be used to detach all handlers assigned to a namespace.
  • stopImmediatePropagation() stops any subsequent on and after listeners, but does not affect the default behavior. (also prevents bubbling.) preventDefault() prevents the default behavior. stopPropagation() only affects bubbling.
  • Event delegation is a technique where events are handled by a single parent element instead of many child elements. Here, a Menu class manages multiple menuitem children. When the class initializes, it listens for the &amp;quot;menuitem:select&amp;quot; event to execute the selection function. In addItem(), each menuitem is registering the parent Menu as an event bubble target with addTarget(). Now whenever a menuitem fires a select event, it is handled by the parent Menu class. We can code a specific override as well, so that if the third menuitem is selected, that doesn&apos;t get bubbled to the parent&apos;s handler. Ideal for parent/child or manager/managed relationships
  • Bubble notification flow for Menu/MenuItem example.
  • YDN KR Tech Talk : YUI 3.0

    1. 1. YUI() An Introduction to YUI 3 Jenny Han Donnelly YUI Library
    2. 2. YUI Library Overview <ul><li>Core </li></ul><ul><li>Utilities </li></ul><ul><li>Widgets </li></ul><ul><li>CSS </li></ul>
    3. 3. Introducing YUI 3 <ul><li>Lighter </li></ul><ul><li>Easier </li></ul><ul><li>Faster </li></ul>
    4. 4. The Sandbox Model
    5. 5. The Sandbox Model <script src=&quot;yui-min.js&quot;> <script> YUI().use(&quot;anim&quot;, function(Y) { ... }); </script>
    6. 6. Optimized Loading <ul><li><script src=&quot;yui-min.js&quot;> </li></ul><ul><li><script> </li></ul><ul><li>YUI().use(&quot;anim&quot;, function(Y) { </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><script src=&quot;http://yui.yahooapis.com/combo?oop-min.js&event-min.js..&quot;> <script src=&quot;oop-min.js&quot;> <script src=&quot;event-min.js&quot;> <script src=&quot;attribute-min.js&quot;> <script src=&quot;base-min.js&quot;> <script src=&quot;dom-min.js&quot;> <script src=&quot;node-min.js&quot;> <script src=&quot;anim-min.js&quot;> var a = new Y.Anim({...}); a.run();
    7. 7. Protection from Other Modules <ul><li><script src=&quot;http://yui.yahooapis.com/ 3.4 /build/yui/yui-min.js&quot;> </li></ul><ul><li><script> </li></ul><ul><li>YUI().use(&quot;financeapp&quot;, function(Y) { </li></ul><ul><li>... </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li><script src=&quot;http://yui.yahooapis.com/ 3.0 /build/yui/yui-min.js&quot;> </li></ul><ul><li><script> </li></ul><ul><li>YUI().use(&quot;moviesapp&quot;, function(Y) { </li></ul><ul><li> ... </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
    8. 8. The YUI Buffet
    9. 9. Sub-Module Architecture <ul><ul><li>io : All IO functionality (7.4K) </li></ul></ul><ul><ul><ul><li>io-base : Core XHR functionality (3.3K) </li></ul></ul></ul><ul><ul><ul><li>io-form : Form mining support (1K) </li></ul></ul></ul><ul><ul><ul><li>io-queue : Transaction Queuing support (0.7K) </li></ul></ul></ul><ul><ul><ul><li>io-upload : File upload support (1.7K) </li></ul></ul></ul><ul><ul><ul><li>io-xdr : Cross domain support (0.7K) </li></ul></ul></ul>YUI().use( &quot;io-base&quot; , function(Y) {…}) YUI().use( &quot;io-form&quot; , &quot;io-xdr&quot; , function(Y) {…}) YUI().use( &quot;io&quot; , function(Y) {…})
    10. 10. IO's K-Weight Profile
    11. 11. Extension and Plugin Architecture Overlay Tooltip myOverlay Positioning Adv. Positioning Shimming/Stacking Header/Body/Footer Animation IO Binding Widget
    12. 12. The Node Wrapper
    13. 13. Working with DOM Elements in YUI 3 <ul><li>var node = Y.get(&quot;.actions li.task.selected&quot;); </li></ul><ul><li>node.addClass(&quot;current&quot;); </li></ul><ul><li>node.on(&quot;click&quot;, handler); </li></ul>Y.get(…).addClass(&quot;current&quot;).on(&quot;click&quot;, handler);
    14. 14. Supports <ul><li>node.appendChild(aNode) </li></ul><ul><li>node.cloneNode(boolean) </li></ul><ul><li>node.scrollIntoView() </li></ul><ul><li>node.focus() </li></ul><ul><li>node.get(&quot;parentNode&quot;) </li></ul><ul><li>node.set(&quot;innerHTML&quot;,&quot;Foo&quot;) </li></ul>
    15. 15. Normalizes <ul><li>node.getAttribute(&quot;href&quot;) </li></ul><ul><li>node.contains(aNode) </li></ul><ul><li>node.getStyle(&quot;paddingTop&quot;) </li></ul><ul><li>node.previous() </li></ul>
    16. 16. Enhances <ul><li>node.addClass(&quot;selectable&quot;) </li></ul><ul><li>node.toggleClass(&quot;enabled&quot;) </li></ul><ul><li>node.getXY() </li></ul><ul><li>node.get(&quot;region&quot;) </li></ul><ul><li>node.on(&quot;srcChange&quot;, fn) </li></ul><ul><li>node.after(&quot;innerHTMLChange&quot;, fn) </li></ul>
    17. 17. Extendable <ul><li>node.plug(IOPlugin); </li></ul><ul><li>node.io.getContent(&quot;http://foo/bar&quot;); </li></ul><ul><li>node.plug(DragDropPlugin); </li></ul><ul><li>node.dd.set(&quot;handle&quot;, &quot;.title&quot;); </li></ul>
    18. 18. Constrainable Node is the single point of access to the DOM. Makes YUI 3 ideal as a trusted source for &quot;constrained&quot; environments like Caja and Ad-safe.
    19. 19. NodeList * The Costco to Node’s Kwik-E Mart var items = Y. all (&quot;.actions li&quot;); items.addClass(&quot;disabled&quot;); items.set(&quot;title&quot;, &quot;Item Disabled&quot;); items.each(function(node) { node.addClass(&quot;disabled); node.set(&quot;title&quot;, &quot;Item Disabled&quot;); });
    20. 20. YUI 3 Node API <ul><li>Supports </li></ul><ul><li>Normalizes </li></ul><ul><li>Enhances </li></ul><ul><li>Extendable </li></ul><ul><li>Constrainable </li></ul>
    21. 21. The Event System
    22. 22. Event Listeners & Event Facades // Dom Event myElement.on(&quot;click&quot;, function( e ) { if (! e.target .hasClass(&quot;disabled&quot;)) { e.preventDefault() ; } }); // Custom Event myWidget.on(&quot;select&quot;, function( e ) { if ( e.newVal < 200) { e.preventDefault() ; } });
    23. 23. Detaching Listeners // YUI 3 var handle = overlay.on(&quot;show&quot;, myShowHandler); handle .detach(); // Or overlay.on(&quot; myapp|show &quot;, myShowHandler); overlay.on(&quot; myapp|hide &quot;, myHideHandler); overlay.detach(&quot; myapp|show &quot;); overlay.detach(&quot; myapp|* &quot;);
    24. 24. Custom Event Flow: On/Default/After On On Default Behavior After After After this.fire(&quot;select&quot;); e.stopImmediatePropagation(); e.preventDefault(); e.stopImmediatePropagation();
    25. 25. DOM Event Delegation Y.on(&quot;delegate&quot;, function(e) { e.target.addClass(&quot;selected&quot;) }, &quot;ul&quot;, &quot;click&quot;, &quot;li&quot;);
    26. 26. Custom Event Delegation Menu MenuItem On On Def. Behavior After After After this.fire(&quot;menuitem:select&quot;) On Def. Behavior After After e.stopPropagation()
    27. 27. YUI 3 Event Model <ul><li>Event Listening </li></ul><ul><li>Event Facades </li></ul><ul><li>Detaching </li></ul><ul><li>Built-in &quot;on&quot; and &quot;after&quot; moments </li></ul><ul><li>Prevent default behavior </li></ul><ul><li>Event bubbling </li></ul>
    28. 28. YUI Library Overview <ul><li>Documentation </li></ul><ul><li>Community </li></ul>
    29. 29. Thanks! <ul><li>Read http://developer.yahoo.com/yui/3 </li></ul><ul><li>Discuss http://yuilibrary.com/forum/viewforum.php?f=15 </li></ul><ul><li>Or just jump in headfirst… </li></ul><ul><li>http://github.com/yui/yui3/tree/master </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×