1 / 37

YUI ()

YUI (). 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

yuval
Download Presentation

YUI ()

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 new YAHOO.util.Anim() YAHOO var Y = YUI() 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="http://yui.yahooapis.com/combo?oop-min.js&event-min.js.."> <script src="oop-min.js"> <script src="event-min.js"> <script src="attribute-min.js"> <script src="base-min.js"> <script src="dom-min.js"> <script src="node-min.js"> <script src="anim-min.js"> <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 Positioning Adv. Positioning myOverlay Shimming/Stacking Overlay Header/Body/Footer Animation IO Binding Tooltip

  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 this.fire("select"); ON ON e.stopImmediatePropagation() e.preventDefault() Default Behavior After e.preventDefault() e.stopImmediatePropagation() After After

  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. Notification Flow : Bubbling this.fire("menuitem:select"); Menu MenuItem ON ON ON e.stopPropagation() Def. Behavior Def. Behavior After After After After After

  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 Node is the single point for DOM access, throughout YUI 3 Makes YUI 3 ideal as a trusted source in "constrained" environments such as Caja and Ad-Safe

  31. NodeList: Bulk Node Operations* Used to Batch Node operations 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"); }); * The Costco to Node’s Kwik-E Mart

  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/3 Discuss, http://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/ • Toothpaste: http://www.flickr.com/photos/toasty/412580888/

More Related