Yahoo!Kimo  YUI 3: Design and Architecture  Thomas S. Sha YUI  developer.yahoo.com/yui/
YUI Evolved Faster, Lighter, Smarter
YUI Evolved Architecture, Lifecycle, Packaging
From YAHOO to YUI() <ul><li>From </li></ul><ul><li>var request  =   YAHOO.util.Connect.asyncRequest( ); </li></ul><ul><li>...
From YAHOO to YUI() YUI().use(“io-base”, function (Y) { var request  = Y.io( ); });
Self-Completing <ul><li>YUI().use(&quot;anim“, function(Y){ }); </li></ul><ul><li>Optimal loading strategy. </li></ul><ul>...
Protected <ul><li>Add “Module A” to a page </li></ul><ul><li><script src=&quot;http://yui.yahooapis.com/3.4/build/yui/yui-...
Protected, again <ul><li>Now add “Module B&quot; </li></ul><ul><li><script src=“../3.0/build/overlay/overlay-min.js&quot;>...
Self-Populating <ul><li>Loading the Animation module </li></ul><ul><li><script src=&quot;yui-min.js&quot;> </li></ul><ul><...
Reconciling Dependencies <ul><li><script src=&quot;oop-min.js&quot;> </li></ul><ul><li><script src=&quot;event-min.js&quot...
Yahoo! CDN and Combo-Handling <ul><li><script src=&quot;http://yui.yahooapis.com/combo?oop-min.js&event-min.js...&quot;> <...
From Module to Sub-Module <ul><ul><li>io  :  All io functionality ( 7.4K ) </li></ul></ul><ul><ul><ul><li>io-base  :  Core...
YUI IO – Size Analysis
Plug-Ins and Extensions <ul><ul><li>The Flexibility To Mix and Match Features </li></ul></ul>Overlay Tooltip myOverlay Pos...
Extensions: Class-based Flexibility Create an Overlay Class Y.Overlay = Y.Base.build(&quot;overlay&quot;, Y.Widget, [ Widg...
Extensions: Reuse Reuse only the extensions desired for Tooltip Y.Tooltip = Y.Base.build(&quot;tooltip&quot;, Y.Widget, [ ...
Plug-in: Instance-based Flexibility Instance of Overlay, adding io support var ioOverlay = new Y.Overlay(...); ioOverlay.p...
Plug-in: Instance-based Override Instance of Overlay, adding Animation Support var animOverlay = new Y.Overlay(...); animO...
<ul><li>Event Facades </li></ul><ul><li>On and after moments for aspect. </li></ul><ul><li>Default Behavior (preventDefaul...
Event Façades // DOM Event linkNode.on(&quot;click&quot;, function(e) { if (!e.target.hasClass(&quot;selector&quot;)) { e....
Event Aspect in YUI 2 // Publisher show : function() { if (this.fire(&quot;beforeShow&quot;)) { YAHOO.util.Dom.removeClass...
Event Aspect in YUI 3 // Publisher show : function() { this.fire(&quot;show&quot;); } _defaultShowFunction : function(e) {...
Event Flow: On -> Default -> After ON ON Default Behavior After After After this.fire(&quot;select&quot;); e.stopImmediate...
Bubbling: Delegation Beyond the DOM Menu.prototype = { addItem : function(menuItem) { var menu = this; menuItem.addTarget(...
Event Flow : Bubbling Menu MenuItem ON ON Default After After After this.fire(&quot;menuitem:select&quot;); ON Default Aft...
// YUI 2 overlay.on(&quot;show&quot;, myShowHandler, myApp, true); overlay.unsubscribe(&quot;show&quot;, myShowHandler, my...
<ul><li>Supports </li></ul><ul><li>Normalizes </li></ul><ul><li>Enhances </li></ul><ul><li>Extendable (with Plug-Ins) </li...
<ul><li>var element = YAHOO.util.Dom.getElementsByClassName( </li></ul><ul><li>&quot;task&quot;, &quot;li&quot;, &quot;act...
<ul><li>var element = Y.Node.get(&quot;.actions li.task.selected&quot;); </li></ul><ul><li>element.addClass(&quot;current&...
<ul><li>node.appendChild(aNode) </li></ul><ul><li>node.cloneNode(boolean) </li></ul><ul><li>node.scrollIntoView() </li></u...
Normalizes the HTMLElement API <ul><li>node.getAttribute(&quot;href&quot;) </li></ul><ul><li>node.contains(aNode) </li></u...
Enhances The HTMLElement API <ul><li>node.addClass(&quot;selectable&quot;) </li></ul><ul><li>node.toggleClass(&quot;enable...
Reacting to Property Changes in Node <ul><li>node.on(&quot;srcChange&quot;, function(e) { </li></ul><ul><li>if (!isRelativ...
Remember the Extensibility of Plug-Ins <ul><li>Plug-Ins can provide instance-specific features. </li></ul><ul><li>node.plu...
Node is the single point for DOM access, throughout YUI 3. Makes YUI 3 ideal as a trusted source in protected environments...
var items = Y.Node.all(&quot;.actions li&quot;); items.addClass(&quot;disabled&quot;); items.set(&quot;title&quot;, &quot;...
Core Language Conveniences <ul><li>Array extras </li></ul><ul><li>Type checking utility methods. </li></ul><ul><li>Bind fo...
A Common Component Foundation <ul><li>Y.Attribute </li></ul><ul><li>Configurable Attributes </li></ul><ul><ul><li>readOnly...
A Common Component Foundation <ul><li>Y.Base </li></ul><ul><li>The foundation class for building YUI classes. </li></ul><u...
A Common Component Foundation <ul><li>Y.Widget </li></ul><ul><li>The base implementation for all widgets. </li></ul><ul><l...
For More Information <ul><li>Read </li></ul><ul><li>YUI 3 -  http://developer.yahoo.com/yui/3 </li></ul><ul><li>YUI 2 -  h...
Upcoming SlideShare
Loading in …5
×

2009 Hackday Taiwan Yui

1,123
-1

Published on

Yahoo user interface 新一代架構

1 Comment
1 Like
Statistics
Notes
  • Free Download : http://gg.gg/114bb

    Hey Guyz and girls, Today I am gonna show you perfact tool, Remember This video is old, But the download link with hack is brand new. Its very simple to using this tool and here are some instructions in video. Please REDOWNLOAD. Don't Forget to Comment Subscribe & Rate My Video :)

    Virus Scan :- This file has been scanned with avast! Antivirus. -- Status: FILE IS CLEANN.

    Copyright © 2014. All Rights Reserved
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,123
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

2009 Hackday Taiwan Yui

  1. 1. Yahoo!Kimo YUI 3: Design and Architecture Thomas S. Sha YUI developer.yahoo.com/yui/
  2. 2. YUI Evolved Faster, Lighter, Smarter
  3. 3. YUI Evolved Architecture, Lifecycle, Packaging
  4. 4. From YAHOO to YUI() <ul><li>From </li></ul><ul><li>var request = YAHOO.util.Connect.asyncRequest( ); </li></ul><ul><li>To </li></ul><ul><li>var request = Y.io( ); </li></ul><ul><li>Protected YUI environment. </li></ul><ul><li>Ability to communicate with other instances. </li></ul><ul><li>Will have explicit versioning support. </li></ul>
  5. 5. From YAHOO to YUI() YUI().use(“io-base”, function (Y) { var request = Y.io( ); });
  6. 6. Self-Completing <ul><li>YUI().use(&quot;anim“, function(Y){ }); </li></ul><ul><li>Optimal loading strategy. </li></ul><ul><li>Provides dependency ordering and resolution. </li></ul><ul><li>Makes discrete, functional modules practical. </li></ul>
  7. 7. Protected <ul><li>Add “Module A” to a page </li></ul><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;overlay&quot;, function(Y) { </li></ul><ul><li>Y.on(&quot;click&quot;, function(){ </li></ul><ul><li>new Y.Overlay({...}).render(); </li></ul><ul><li>}, &quot;#button&quot;); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  8. 8. Protected, again <ul><li>Now add “Module B&quot; </li></ul><ul><li><script src=“../3.0/build/overlay/overlay-min.js&quot;> </li></ul><ul><li><script> </li></ul><ul><li>YUI().use(&quot;overlay&quot;, function(Y) { </li></ul><ul><li>new Y.Overlay({...}).render(); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  9. 9. Self-Populating <ul><li>Loading the Animation module </li></ul><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></script> </li></ul>
  10. 10. Reconciling Dependencies <ul><li><script src=&quot;oop-min.js&quot;> </li></ul><ul><li><script src=&quot;event-min.js&quot;> </li></ul><ul><li><script src=&quot;attribute-min.js&quot;> </li></ul><ul><li><script src=&quot;base-min.js&quot;> </li></ul><ul><li><script src=&quot;dom-min.js&quot;> </li></ul><ul><li><script src=&quot;node-min.js&quot;> </li></ul><ul><li><script src=&quot;anim-min.js&quot;> </li></ul>
  11. 11. Yahoo! CDN and Combo-Handling <ul><li><script src=&quot;http://yui.yahooapis.com/combo?oop-min.js&event-min.js...&quot;> </li></ul>
  12. 12. From Module to Sub-Module <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 serialization ( 1.0K ) </li></ul></ul></ul><ul><ul><ul><li>io-queue : Transaction queue ( 0.7K ) </li></ul></ul></ul><ul><ul><ul><li>io-upload : File upload transport( 1.7K ) </li></ul></ul></ul><ul><ul><ul><li>io-xdr : Cross domain transport( 0.7K ) </li></ul></ul></ul>YUI().use(&quot;io-base&quot;, function(Y){ }) YUI().use(&quot;io-xdr&quot;, function(Y){ }) YUI().use(&quot;io&quot;, function(Y){ })
  13. 13. YUI IO – Size Analysis
  14. 14. Plug-Ins and Extensions <ul><ul><li>The Flexibility To Mix and Match Features </li></ul></ul>Overlay Tooltip myOverlay Positioning Adv. Positioning Shimming/Stacking Header/Body/Footer Animation IO Binding
  15. 15. Extensions: Class-based Flexibility Create an Overlay Class Y.Overlay = Y.Base.build(&quot;overlay&quot;, Y.Widget, [ Widget-Position, // Positioning Widget-Position-Ext, // Adv. Positioning Widget-Stack, // Shim/Stack Support Widget-StdMod // Header/Body/Footer ]);
  16. 16. Extensions: Reuse Reuse only the extensions desired for Tooltip Y.Tooltip = Y.Base.build(&quot;tooltip&quot;, Y.Widget, [ Widget-Position, // Positioning Widget-Stack // Shim/Stack Support ]);
  17. 17. Plug-in: Instance-based Flexibility Instance of Overlay, adding io support var ioOverlay = new Y.Overlay(...); ioOverlay.plug(Y.OverlayIOPlugin, { url: &quot;http://host.foo.com/getOverlayContent&quot; }); ioOverlay.io.refreshContent();
  18. 18. Plug-in: Instance-based Override Instance of Overlay, adding Animation Support var animOverlay = new Y.Overlay(...); animOverlay.plug(Y.WidgetAnimPlugin); animOverlay.show(); animOverlay.hide();
  19. 19. <ul><li>Event Facades </li></ul><ul><li>On and after moments for aspect. </li></ul><ul><li>Default Behavior (preventDefault) </li></ul><ul><li>Event Bubbling (stopPropagation) </li></ul><ul><li>Detach Handles </li></ul>The enhanced Custom Event system is an integral part of YUI 3. Its goal is to be as lightweight as possible, allowing for highly decoupled code. Custom Events
  20. 20. Event Façades // DOM Event linkNode.on(&quot;click&quot;, function(e) { if (!e.target.hasClass(&quot;selector&quot;)) { e.preventDefault(); } }); // Custom Event slider.on(&quot;valueChange&quot;, function(e) { if (e.newVal < 200) { e.preventDefault(); } });
  21. 21. Event Aspect in YUI 2 // Publisher show : function() { if (this.fire(&quot;beforeShow&quot;)) { YAHOO.util.Dom.removeClass(node, &quot;hidden&quot;); this.fire(&quot;show&quot;); } } // Subscriber overlay.subscribe(&quot;beforeShow&quot;, function(t, args) { if (!taskSelected) { return false; } } overlay.subscribe(&quot;show&quot;, function(t, args) {...});
  22. 22. Event Aspect in YUI 3 // Publisher show : function() { this.fire(&quot;show&quot;); } _defaultShowFunction : function(e) { node.removeClass(&quot;hidden&quot;); } // Subscriber overlay.on(&quot;show&quot;, function(e) { if (!taskSelected) { e.preventDefault(); } } overlay.after(&quot;show&quot;, function(e) { });
  23. 23. Event Flow: On -> Default -> After ON ON Default Behavior After After After this.fire(&quot;select&quot;); e.stopImmediatePropagation() e.preventDefault() e.preventDefault() e.stopImmediatePropagation()
  24. 24. Bubbling: Delegation Beyond the DOM Menu.prototype = { addItem : function(menuItem) { var menu = this; menuItem.addTarget(menu); }, initializer : function() { this.on(&quot;menuitem:select&quot;, this._itemSelect); } } menu.getItem(2).on(&quot;select&quot;, function(e) { // Handle select for item 2, don’t bubble to Menu e.stopPropagation(); ... } Event Bubbling: Delegation Beyond the DOM
  25. 25. Event Flow : Bubbling Menu MenuItem ON ON Default After After After this.fire(&quot;menuitem:select&quot;); ON Default After After e.stopPropagation()
  26. 26. // YUI 2 overlay.on(&quot;show&quot;, myShowHandler, myApp, true); overlay.unsubscribe(&quot;show&quot;, myShowHandler, myApp); // YUI 3 var handle = overlay.on(&quot;show&quot;, myShowHandler, myApp, true); handle.detach(); // Or overlay.on(&quot;myApp:show&quot;, myShowHandler, myApp, true); overlay.on(&quot;myApp:hide&quot;, myHideHandler, myApp, true); overlay.detach(&quot;myApp:show&quot;); overlay.detach(&quot;myApp:*&quot;); Detaching Event Listeners
  27. 27. <ul><li>Supports </li></ul><ul><li>Normalizes </li></ul><ul><li>Enhances </li></ul><ul><li>Extendable (with Plug-Ins) </li></ul><ul><li>Constrainable </li></ul>A single convenient API for working with HTML Elements. Node: The Ideal Element
  28. 28. <ul><li>var element = YAHOO.util.Dom.getElementsByClassName( </li></ul><ul><li>&quot;task&quot;, &quot;li&quot;, &quot;actions&quot;); </li></ul><ul><li>for (var i = 0; i < elms.length; i++) { </li></ul><ul><li>var elment = elms[i]; </li></ul><ul><li>if (YAHOO.util.Dom.hasClass(element, &quot;selectable&quot;)){ </li></ul><ul><li>YAHOO.util.Dom.addClass(element, &quot;current&quot;); </li></ul><ul><li>YAHOO.util.Event.on(element, &quot;click&quot;, handler); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Working with HTML Elements in YUI 2
  29. 29. <ul><li>var element = Y.Node.get(&quot;.actions li.task.selected&quot;); </li></ul><ul><li>element.addClass(&quot;current&quot;); </li></ul><ul><li>element.on(&quot;click&quot;, handler); </li></ul>Y.Node.get(…).addClass(&quot;current&quot;).on(&quot;click&quot;,handler); Working with HTML Elements in YUI 3
  30. 30. <ul><li>node.appendChild(aNode) </li></ul><ul><li>node.cloneNode(boolean) </li></ul><ul><li>node.scrollIntoView() </li></ul><ul><li>node.get(&quot;parentNode&quot;) </li></ul><ul><li>node.set(&quot;innerHTML&quot;,&quot;Foo&quot;) </li></ul>Supports the HTMLElement API
  31. 31. Normalizes the HTMLElement API <ul><li>node.getAttribute(&quot;href&quot;) </li></ul><ul><li>node.contains(aNode) </li></ul><ul><li>node.getText() </li></ul><ul><li>node.getStyle(&quot;paddingTop&quot;) </li></ul><ul><li>node.previous() </li></ul>
  32. 32. Enhances The HTMLElement API <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>
  33. 33. Reacting to Property Changes in Node <ul><li>node.on(&quot;srcChange&quot;, function(e) { </li></ul><ul><li>if (!isRelative(e.newVal)) { </li></ul><ul><li>e.preventDefault(); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>node.after(&quot;innerHTMLChange&quot;, reflow); </li></ul>
  34. 34. Remember the Extensibility of Plug-Ins <ul><li>Plug-Ins can provide instance-specific features. </li></ul><ul><li>node.plug(IOPlugin); </li></ul><ul><li>node.io.getContent(&quot;http://foobar.com/baz/&quot;); </li></ul><ul><li>node.plug(DragDropPlugin); </li></ul><ul><li>node.dd.set(&quot;handle&quot;, &quot;.title&quot;); </li></ul>
  35. 35. Node is the single point for DOM access, throughout YUI 3. Makes YUI 3 ideal as a trusted source in protected environments such as Caja and Ad-Safe. Constrained by Façades
  36. 36. var items = Y.Node.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;); }); NodeList: Operations a on Node Collection
  37. 37. Core Language Conveniences <ul><li>Array extras </li></ul><ul><li>Type checking utility methods. </li></ul><ul><li>Bind for execution context. </li></ul><ul><li>Iterators. </li></ul><ul><li>Later </li></ul><ul><li>OOP methods </li></ul><ul><ul><li>Augment, Extend, Aggregate, Merge, Clone </li></ul></ul><ul><li>AOP infrastructure for Plug-Ins </li></ul><ul><ul><li>“ Before” and “After” for methods </li></ul></ul>
  38. 38. A Common Component Foundation <ul><li>Y.Attribute </li></ul><ul><li>Configurable Attributes </li></ul><ul><ul><li>readOnly, writeOnce </li></ul></ul><ul><ul><li>validators, getters and setters </li></ul></ul><ul><li>Attribute Value Change Events </li></ul><ul><ul><li>On and After moments. </li></ul></ul><ul><li>Complex Attribute Support </li></ul><ul><ul><li>set(&quot;strings.label_enabled&quot;, &quot;Enabled&quot;); </li></ul></ul>
  39. 39. A Common Component Foundation <ul><li>Y.Base </li></ul><ul><li>The foundation class for building YUI classes. </li></ul><ul><li>Combines Custom Event and Attribute support. </li></ul><ul><li>Manages the &quot;initialization&quot; and &quot;destroy&quot; lifecycle. </li></ul><ul><li>Provides plug-in and extension management. </li></ul>
  40. 40. A Common Component Foundation <ul><li>Y.Widget </li></ul><ul><li>The base implementation for all widgets. </li></ul><ul><li>Introduces common attributes, methods. </li></ul><ul><li>Manages the &quot;render&quot; lifecycle moment. </li></ul><ul><li>Establishes a common pattern for widget development. </li></ul>
  41. 41. For More Information <ul><li>Read </li></ul><ul><li>YUI 3 - http://developer.yahoo.com/yui/3 </li></ul><ul><li>YUI 2 - http://developer.yahoo.com/yui/2 </li></ul><ul><li>All things YUI - http://YUIBlog.com </li></ul><ul><li>Discuss </li></ul><ul><li>YUI 3 and YUI 2 - http://YUILibrary.com/forum/ </li></ul><ul><li>Source Code </li></ul><ul><li>YUI 3 - http://github.com/yui/yui3/ </li></ul><ul><li>YUI 2 - http://github.com/yui/yui2/ </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.

×