1. YUI()

2. YUI 2’s Perfect. What More Could I Want? Lighter Finer Grained Modules/Sub-Modules Emphasis on Code Reuse: Common Base, Plugins, Extensions Easier Consistent API Base, Selector, Widget, IO/Get/DataSource Convenience each, bind, nodelist, queue, chainability, general sugar Faster Opportunity to re-factor core performance pain points

3. From YAHOO to YUI() Sandboxed App Development Your own protected YUI environment Ability to reach out to other instances if required Future: Explicit Versioning support YAHOO var Y = YUI() new YAHOO.util.Anim() new Y.Anim()

4. Not Only Protected; Self-Populating Too YUI().use("anim") Built-in, Optimal Dependency Loading Makes finer grained modules practical No more file order concerns Self-Healing

5. Enough With The Bullet Points, Show Us Something With Curly Braces…

6. Protected… So, a user chooses to include your "Stock Tracker App" on a portal page... <script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js"> <script> YUI().use("overlay", function(Y) { Y.on("click", function(){ new Y.Overlay({...}).render(); }, "#button"); }); </script> Then they add the "My Favorite Jonas Brother App"... <script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js"> <script> YUI().use("overlay", function(Y) { new Y.Overlay({...}).render(); }); </script>

7. Self-Populating… <script src="yui-min.js"> <script> YUI().use("anim", function(Y) { }); </script> var a = new Y.Anim({...}); a.run();

8. Avoiding The Kitchen Sink YUI 2 The foosball table, PS3, relaxation fountain, throw pillows, scented candles and the kitchen sink YUI 3 The foosball table and the PS3 The relaxation fountain, throw pillows and the scented candles

9. Sub-Modules… io : All IO functionality (7.4K) io-base : Core XHR functionality (3.3K) io-form : Form mining support (1K) io-queue : Transaction Queuing support (0.7K) io-upload : File upload support (1.7K) io-xdr : Cross domain support (0.7K) YUI().use("io-base", function(Y) {…}) YUI().use("io-xdr", function(Y) {…}) YUI().use("io", function(Y) {…})

10. IO – K-Weight Breakup

11. Plugins and Extensions… The Flexibility To Mix and Match Features Overlay Tooltip myOverlay Positioning Adv. Positioning Shimming/Stacking Header/Body/Footer Animation IO Binding

12. Extensions: "Class" Based Flexibility… Create An Overlay Class : Y.Overlay = Y.Base.build(Y.Widget, [ Widget-Position, // Positioning Widget-Position-Ext, // Adv. Positioning Widget-Stack, // Shim/Stack Support Widget-StdMod // Header/Body/Footer ]); Instead of Extending Overlay, Reuse Just The Feature Extensions Tooltip Needs : Y.Tooltip = Y.Base.build(Y.Widget, [ Widget-Position, // Positioning Widget-Stack // Shim/Stack Support ]);

13. Plugins: Instance Based Flexibility… Base Overlay instance with IO Support var ioOverlay = new Y.Overlay(...); ioOverlay.plug(Y.OverlayIOPlugin, { url: "http://foo/getData" }); ioOverlay.io.refreshContent(); Base Overlay instance with Animation Support var animOverlay = new Y.Overlay(...); animOverlay.plug(Y.WidgetAnimPlugin); animOverlay.show(); animOverlay.hide();

14. Custom Events: Now With Flavor Crystals! Event Facades Built-in on and after moments Default Behavior (preventDefault) Event Bubbling (stopPropagation) Detach Handles The Enhanced Custom Event System Is An Integral Part of YUI 3’s Goal To Be Lighter, Allowing For Highly Decoupled Code

15. Event Facades // Dom Event linkNode.on("click", function(e) { if (!e.target.hasClass("selector")) { e.preventDefault(); } }); // Custom Event slider.on("valueChange", function(e) { if (e.newVal < 200) { e.preventDefault(); } });

16. On and After Moments : YUI 2 // Publisher show : function() { if (this.fire("beforeShow")) { YAHOO.util.Dom.removeClass(node, "hidden");... this.fire("show"); } } // Subscriber overlay.subscribe("beforeShow", function(t, args) { if (!taskSelected) { return false; } } overlay.subscribe("show", function(t, args) {...});

17. On and After Moments : YUI 3 // Publisher show : function() { this.fire("show"); }, _defShowFn : function(e) { node.removeClass("hidden");... } // Subscriber overlay.on("show", function(e) { if (!taskSelected) { e.preventDefault(); } } overlay.after("show", function(e) {...});

18. Notification Flow: On/After/Default ON Default Behavior After this.fire("select"); e.stopImmediatePropagation()e.preventDefault() e.preventDefault()e.stopImmediatePropagation()

19. Bubbling: Delegation Beyond the DOM Menu.prototype = { addItem : function(menuItem) { var menu = this;... menuItem.addTarget(menu); }, initializer : function() { this.on("menuitem:select", this._itemSelect); } } menu.getItem(2).on("select", function(e) { // Handle select for item 2, don’t bubble to Menu e.stopPropagation();... }

20. Menu MenuItem Notification Flow : Bubbling ON Def. Behavior After this.fire("menuitem:select"); ON Def. Behavior After e.stopPropagation()

21. Detaching Listeners // YUI 2 overlay.on("show", myShowHandler, myApp, true); overlay.unsubscribe("show", myShowHandler, myApp); // YUI 3 var handle = overlay.on("show", myShowHandler, myApp, true); handle.detach(); // Or overlay.on("myapp|show", myShowHandler, myApp, true); overlay.on("myapp|hide", myHideHandler, myApp, true); overlay.detach("myapp|show"); overlay.detach("myapp|*");

22. Node: An HTML Element Kwik-E Mart Supports Normalizes Enhances Extendable Constrainable A single convenient location for working with HTML Elements

23. Working with HTML Elements: YUI 2 var elms = YAHOO.util.Dom.getElementsByClassName( "task", "li", "actions"); for (var i = 0; i < elms.length; i++) { var elm = elms[i]; if (YAHOO.util.Dom.hasClass(elm, "selectable")){ YAHOO.util.Dom.addClass(elm, "current"); YAHOO.util.Event.on(elm, "click", handler); } }

24. Working with HTML Elements: YUI 3 var elm = Y.Node.get(".actions li.task.selected"); elm.addClass("current"); elm.on("click", handler); Y.Node.get(…).addClass("current").on("click",handler);

25. Supports the HTMLElement API node.appendChild(aNode) node.cloneNode(aNode) node.scrollIntoView() node.get("parentNode") node.set("innerHTML","Foo")

26. Normalizes the HTMLElement API node.getAttribute("href") node.contains(aNode) node.getText() node.getStyle("paddingTop") node.previous()

27. Enhances The HTMLElement API node.addClass("selectable") node.toggleClass("enabled") node.getXY() node.get("region")

28. … With State Change Events (wip) node.on("srcChange", function(e) { if (!isRelative(e.newVal)) { e.preventDefault(); } }); node.after("innerHTMLChange",reflow);

29. Extendable Plugins can provide app specific features… node.plug(IOPlugin); node.io.getContent("http://foo/bar"); node.plug(DragDropPlugin); node.dd.set("handle", ".title");

30. Constrainable Makes YUI 3 ideal as a trusted source in "constrained" environments such as Caja and Ad-Safe Node is the single point for DOM access, throughout YUI 3

31. NodeList: Bulk Node Operations* Used to Batch Node operations * The Costco to Node’s Kwik-E Mart var items = Y.Node.all(".actions li"); items.addClass("disabled"); items.set("title", "Item Disabled"); items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled"); });

32. Core Language Conveniences Array Extras isString, isNumber … Bind Each Later OOP Augment, Extend, Aggregate, Merge, Clone AOP Before/After For Methods

33. A Common Component Foundation Y.Attribute Managed Attribute Support Configurable Attributes readOnly, writeOnce validators, getters and setters Attribute Value Change Events on/after Complex Attribute Support set("strings.label_enabled", "Enabled");

34. A Common Component Foundation Y.Base "this.constructor.superestclass" The Class From Which YUI 3 Classes Will Be Derived Combines Custom Event And Attribute Support Manages the "init" and "destroy" Lifecycle Moments Provides Plugin/Extension Management

35. A Common Component Foundation Y.Widget A Common Widget API The Base Implementation For All Widgets Introduces Common Attributes, Methods boundingBox, contentBox width, height visible, disabled, hasFocus strings show(), hide(), focus(), blur(), enable(), disable() Manages The "render" Lifecycle Moment Establishes A Common Pattern For Widget Development

36. Phew! Satyen Desai sdesai@yahoo-inc.com @dezziness Read, http://developer.yahoo.com/yui/3http://developer.yahoo.com/yui/3 Discuss, http://yuilibrary.com/forum/viewforum.php?f=15http://yuilibrary.com/forum/viewforum.php?f=15 Or, just jump in headfirst… http://github.com/yui/yui3/tree/master

37. Image Attribution Sink: http://www.flickr.com/photos/shazbot/1639273/ Slushy: http://www.flickr.com/photos/yaffamedia/705369091/ http://www.flickr.com/photos/yaffamedia/705369091/ Toothpaste: http://www.flickr.com/photos/toasty/412580888/ http://www.flickr.com/photos/toasty/412580888/