Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YUI (Advanced)

2,298 views

Published on

Discussion on a few concepts in deeper detail on YUI with the Yahoo! Maktoob team in Jordan

  • Be the first to comment

YUI (Advanced)

  1. 1. YUI (ADVANCED) Jai SanthoshYDN Engineer, Hacker, Frontend Guy Yahoo!
  2. 2. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  3. 3. http://yuilibrary.com/
  4. 4. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  5. 5. Good Architecture!!
  6. 6. What’s in Smart Software?• Reliability• Maintainability• Compatibility• Extensibility
  7. 7. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  8. 8. Javascript Modules// yuiblog.com/blog/2007/06/12/module-patternmyLibrary.fizzbuzz = (function () { var myPrivateVar = "Fizz"; return { fizzbuzz: myPrivateVar + "buzz"; };})();
  9. 9. YUIModules// fizzbuzz.jsYUI.add("fizzbuzz", function(Y) { // Private variable var myPrivateVar = "fizz"; // Export as public varaible Y.fizzbuzz = myPrivateVar + "buzz";})
  10. 10. YUIModules// DOMYUI().use("node", function (Y) {......});// Calendar widgetYUI().use("calendar", function (Y) {......});// YQL clientYUI().use("yql", function (Y) {......});
  11. 11. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  12. 12. YUI Infrastructure • Attribute • Base • EventTarget • Pluginhttp://yuilibrary.com/yui/infrastructure/
  13. 13. YUI Infrastructure • Attribute • Base • EventTarget • Pluginhttp://yuilibrary.com/yui/infrastructure/
  14. 14. Y.Attribute// http://yuilibrary.com/yui/docs/attribute/#configurationYUI().use("attribute", function(Y) { function MyClass(userValues) { // Use addAttrs, to setup default attributes for // your class, and mixing in user provided initial values var attributeConfig = { attrA : { // ... Configuration for attribute "attrA" ... }, attrB : { // ... Configuration for attribute "attrB" ... } }; this.addAttrs(attributeConfig, userValues); }; Y.augment(MyClass, Y.Attribute);});
  15. 15. YUI Infrastructure • Attribute • Base • EventTarget • Pluginhttp://yuilibrary.com/yui/infrastructure/
  16. 16. Y.Base// http://yuilibrary.com/yui/docs/base/YUI().use("base", function(Y) { function MyClass(config) { // Invoke Base constructor, passing through arguments MyClass.superclass.constructor.apply(this, arguments); } // Used to identify instances of this class MyClass.NAME = "myClass"; // "Associative Array", used to define the set of attributes // added by this class. MyClass.ATTRS = { A : { // Attribute "A" configuration }, B : { // Attribute "B" configuration } }; ...
  17. 17. Y.Base ... Y.extend(MyClass, Y.Base, { // Prototype methods for your new class // Tasks MyClass needs to perform during // the init() lifecycle phase initializer : function(cfg) { this._wrapper = Y.Node.create(<div class="yui-wrapper"></div>); }, // Tasks MyClass needs to perform during // the destroy() lifecycle phase destructor : function() { Y.Event.purgeElement(this._wrapper);this._wrapper.get("parentNode").removeChild(this._wrapper); this._wrapper = null; } });});
  18. 18. YUI Infrastructure • Attribute • Base • EventTarget • Pluginhttp://yuilibrary.com/yui/infrastructure/
  19. 19. Y.EventTarget// http://yuilibrary.com/yui/docs/event-custom/YUI().use(event-custom, function (Y) { // EventTarget is available and ready for use. // Add implementation code here.});// Subscription callbacks receive fire() argumentsY.on(birthday, function (name, birthdate) { var age = new Date().getFullYear() - birthdate.getFullYear(); alert(Happy + age + , + name + !);});// Fire EventsY.fire(birthday, { name: "Uncle" Walt Whitman, birthdate: new Date(1819, 4, 31)});
  20. 20. YUI Infrastructure • Attribute • Base • EventTarget • Pluginhttp://yuilibrary.com/yui/infrastructure/
  21. 21. Y.Plugin// http://yuilibrary.com/yui/docs/event-custom/YUI().use(plugin, function (Y) { // This AnchorPlugin is designed to be added to Node instances function AnchorPlugin(config) { // Hold onto the host instance (a Node in this case), this._node = config.host; } // When plugged into a node instance, the plugin will be // available on the "anchors" property. AnchorPlugin.NS = "anchors"; AnchorPlugin.prototype = { disable: function() { var node = this._node; var anchors = node.queryAll("a"); anchors.addClass("disabled"); anchors.setAttribute("disabled", true); } }; ...
  22. 22. Y.Plugin ... var container = Y.one("div.actions"); container.plug(AnchorPlugin); container.anchors.disable(); container.unplug("anchors");});
  23. 23. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  24. 24. YUI Loader• Async loading• Dynamic dependency resolution• On-demand module loading• CSS support• ... and more
  25. 25. YUI Loader{ combine: true, comboUrl: http://yui.yahooapis.com/combo?, baseUrl: 3.4.1/build, modules: { }, groups: { ymaps: { combine: true, base: /ajaxapi-4/modules/, comboBase: http://l.yimg.com/zz/combo?, root: a/lib/map/v4/4.0.0.579/modules/, modules: { }, patterns: { gallery-: {} } } }, ...
  26. 26. YUI Loader – Module Options• type • use• path • after• fullpath • lang• requires • condition• optional
  27. 27. YUI Loader – Module Options• type • use• path • after• fullpath • lang• requires • condition• optional
  28. 28. YUI Loadermodules: { ... ymaps-core: { path: ymaps-core/ymaps-core-min.js, requires: [event] }, ymaps-config: { path: ymaps-config/ymaps-config-min.js, requires: [ymaps-core, intl], lang: [en-US, en-GB, es-ES, es-MX, es-US, fr-FR, fr-CA, it-IT, de-DE] }, jQuery: { fullpath:http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js }, ...}
  29. 29. YUI Loader – Module Options• type • use• path • after• fullpath • lang• requires • condition• optional
  30. 30. YUI Loadermodules: { ... ymaps-stack: { use: [node, event, event-custom] }, gallery-graphics-vml: { path: gallery-graphics-vml/gallery-graphics-vml-min.js, condition: { test: function (Y) { var canvas = document.createElement(canvas); return(!document.implementation.hasFeature(http://www.w3.org/TR/SVG11/feature#BasicStructure, 1.1) && (!canvas || !canvas.getContext ||!canvas.getContext(2d))); }, trigger: gallery-graphics, ua: ie, when: instead, }
  31. 31. YUI Loader – Applying Config• Instance Config• YUI_config• YUI.GlobalConfig• YUI.applyConfig
  32. 32. YUI Loader – Applying Config• Instance Config ... YUI({ debug: true, combine: true, comboBase: http://mydomain.com/combo?, root: yui3/ }).use(node, function (Y) { // ... });
  33. 33. YUI Loader – Applying Config• YUI_config ... YUI_config = { debug: true, combine: true, comboBase: http://mydomain.com/combo?, root: yui3/ };
  34. 34. YUI Loader – Applying Config• YUI.GlobalConfig ... YUI.GlobalConfig = { debug: true, combine: true, comboBase: http://mydomain.com/combo?, root: yui3/ };
  35. 35. YUI Loader – Applying Config• YUI.applyConfig ... YUI.applyConfig({ debug: true, combine: true }); YUI.applyConfig({ comboBase: http://mydomain.com/combo?, root: yui3/ });
  36. 36. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  37. 37. Good Extensibility =Good Code Structure
  38. 38. Class Structure Strategies• Pseudo-classical• Prototypal• Augmentation (Class A + Class B)• Plugins• Class extensions (mixins)• MVC
  39. 39. Class structure strategies • Pseudo-classical Native • Prototypal • Augmentation • Plugins Artificial • Class extensions • MVC
  40. 40. Class structure strategies • Pseudo-classical Native • Prototypal
  41. 41. Pseudo-classical (Old school)
  42. 42. Pseudo-classical Y.extend = function (SubClass, SuperClass, proto, static); function SubClass() { // constructor } SubClass.prototype = new SuperClass(); SubClass.prototype.someProperty = "booga!"; SubClass.prototype.someMethod = function () { ... }; ... SubClass.someStaticMethod = function () { ... }; ...
  43. 43. Pseudo-classical Y.extend = function (SubClass, SuperClass, proto, static) function SubClass() { // constructor } Y.extend(SubClass, SuperClass); SubClass.prototype.someProperty = "booga!"; SubClass.prototype.someMethod = function () { ... }; ... SubClass.someStaticMethod = function () { ... }; ...
  44. 44. Pseudo-classical Y.extend = function (SubClass, SuperClass, proto, static) function SubClass() { // constructor } Y.extend(SubClass, SuperClass, { someProperty: "booga!", someMethod : function () { ... }, ... }); SubClass.someStaticMethod = function () { ... }; ...
  45. 45. Pseudo-classical Y.extend = function (SubClass, SuperClass, proto, static) function SubClass() { // constructor } Y.extend(SubClass, SuperClass, { someProperty: "booga!", someMethod : function () { ... }, ... }, { someStaticMethod: function () { ... }, ... });
  46. 46. Pseudo-classical Y.extend = function (SubClass, SuperClass, proto, static) Y.SubClass = Y.extend( function() { // constructor }, /* extends */ SuperClass, { // Instance members someProperty: "booga!", someMethod : function () { ... } }, { // Static members someStaticMethod: function () { ... } });
  47. 47. Y.extend() PROs • Creates a “clean” subclass relationship • no YUI class requirement • Preserves instanceof • SubClass.superclass (not super, but close) • Control superclass constructor execution
  48. 48. Y.extend() CONs • No multiple inheritance • Manual constructor chaining required • Constructor chaining is awkward • Constructor chaining may be costly
  49. 49. Y.extend() CONs • No multiple inheritance • Manual constructor chaining required • Constructor chaining is awkward • Constructor chaining may be costly function SubClass() { // Chain superclass constructor SubClass.superclass.constructor.apply(this, arguments); // My constructor stuff ... }
  50. 50. To sum up• Good for basic class inheritance• If you can extend Y.Base, there are more options
  51. 51. Prototypal
  52. 52. Prototypal Y.extend = function(SubClass, SuperClass,...) { var superProto = SuperClass.prototype, subProto = Y.Object(superProto); SubClass.prototype = subProto; ...
  53. 53. Prototypal Y.extend = function(SubClass, SuperClass,...) { var superProto = SuperClass.prototype, subProto = Y.Object(superProto); SubClass.prototype = subProto; ...
  54. 54. Prototypal Y.Object = (function () { function F() {} return function (obj) { F.prototype = obj; return new F(); }; })();
  55. 55. Prototypal // Old and busted SubClass.prototype = new SuperClass(); new SuperClas SubClass sf(n) f(n)Constructor Constructor{} {}Prototype Prototype Prototype
  56. 56. Prototypal Y.Object = (function () { function F() {} return function (obj) { F.prototype = obj;‟ new return new F(); }; })(); SuperClas (anon) SubClass sf(n) f(n) f(n) EMPTYConstructor Constructor Constructor{} {} {}Prototype Prototype Prototype Prototype
  57. 57. Prototypal Y.Object = (function () { function F() {} return function (obj) { F.prototype = obj; return new F(); }; })(); (anon) (anon) f(n) EMPTY Constructor {} {} {}Any Object Prototype New Object
  58. 58. Factory constructor function Set() { var that = (this instanceof Set) ? this : Y.Object(Set.prototype); // use that instead of this [].push.apply(that._items, arguments); return that; }
  59. 59. Factory constructor function Set() { var that = (this instanceof Set) ? this : Y.Object(Set.prototype); // use that instead of this [].push.apply(that._items, arguments); return that; } var set = new Set(„a‟,‟b‟);
  60. 60. Factory constructor function Set() { var that = (this instanceof Set) ? this : Y.Object(Set.prototype); // use that instead of this [].push.apply(that._items, arguments); return that; } var set = new Set(„a‟,‟b‟); set instanceof Set; // true
  61. 61. Factory constructor function Set() { var that = (this instanceof Set) ? this : Y.Object(Set.prototype); // use that instead of this [].push.apply(that._items, arguments); return that; } var set = Set(„a‟,‟b‟); // <-- OOPS! I forgot new!
  62. 62. Factory constructor function Set() { var that = (this instanceof Set) ? this : Y.Object(Set.prototype); // use that instead of this [].push.apply(that._items, arguments); return that; } var set = Set(„a‟,‟b‟); set instanceof Set; // true
  63. 63. Y.Object() PROs • Avoids copying a lot of properties • Can be used to make factory constructors • Can be used to store original values for revert • Any object can be the prototype • Avoids class explosion
  64. 64. Y.Object() CONs • No multiple inheritance • Factory constructor can promote sloppiness • Can‟t use hasOwnProperty in for/in loops
  65. 65. To sum up• Useful for some internal logic patterns• Not a good fit for most web app problems• Common use suggests need for a constructor
  66. 66. To sum up• Useful for some internal logic patterns• Not a good fit for most web app problems• Common use suggests need for a constructor var account1 = Y.Object(accountProto); account1.id = 1234; account1.holder = John Q. Consumer; var account2 = Y.Object(accountProto); account2.id = 1235; account2.holder = Jane B. Investor;
  67. 67. To sum up• Useful for some internal logic patterns• Not a good fit for most web app problems• Common use suggests need for a constructor var account1 = Y.Object(accountProto); account1.id = 1234; account1.holder = John Q. Consumer; var account2 = Y.Object(accountProto); account2.id = 1235; account2.holder = Jane B. Investor;
  68. 68. To sum up• Useful for some internal logic patterns• Not a good fit for most web app problems• Common use suggests need for a constructor function Account(id, holder) { this.id = id; this.holder = holder; } var account1 = new Account(1234, John Q. Consumer); var account2 = new Account(1235, Jane B. Invester);
  69. 69. Class structure strategies ✓ Pseudo-classical Native ✓ Prototypal • Augmentation • Plugins • Class extensions Artificial • MVC
  70. 70. Augmentation B A C
  71. 71. Augmentation Y.augment = function (to, from, force, whitelist, config) Y.ModelList = Y.extend( function () { /* constructor */ ModeList.superclass.constructor.apply(this, arguments); }, Y.Base, { /* prototype */ }, { /* static */ }); Y.augment(Y.ModelList, Y.ArrayList);
  72. 72. Augmentation Y.augment = function (to, from, force, whitelist, config) Y.ModelList = Y.extend( function () { /* constructor */ ModeList.superclass.constructor.apply(this, arguments); }, Y.Base, { /* prototype */ }, { /* static */ }); Y.augment(Y.ModelList, Y.ArrayList);
  73. 73. Augmentation Y.augment = function (to, from, force, whitelist, config) Y.ModelList = Y.extend( function () { /* constructor */ ModeList.superclass.constructor.apply(this, arguments); }, Y.Base, { /* prototype */ }, { /* static */ }); Y.augment(Y.ModelList, Y.ArrayList);
  74. 74. Augmentation Y.augment(Y.ModelList, Y.ArrayList); augment var list = new Y.ModelList({ ... }); new list.each(function (item) { ... });ModelListConstructor ArrayList listPrototype Prototype Constructor create create init Prototype init each each each item item Prototype item
  75. 75. Augmentation Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); each list.each(function (item) { ... });ModelListConstructor ArrayList listPrototype Constructor each 1. Copy create init Prototype 2. Construct each each 3. Execute item item Prototype
  76. 76. Augmentation Y.augment = function (to, from, force, whitelist, config) Y.augment(Y.HistoryBase, Y.EventTarget, null, null, { emitFacade : true, prefix : history, preventable: false, queueable : true });
  77. 77. Y.augment() PROs• Defers constructor overhead• Can augment with multiple classes• Supports class or instance augmentation• No YUI class requirement
  78. 78. Y.augment() CONs• First augmented method call is costly• instanceof is false for augmenting classes• Consumes more memory• Limited control of constructor invocation
  79. 79. To sum up• Use it to simulate lazy multiple inheritance• Y.Base-based classes should use class extensions• Beware the diamond problem• Weigh the importance of constructor deferral
  80. 80. To sum up• Use it to simulate lazy multiple inheritance• Y.Base-based classes should use class extensions• Beware the diamond problem• Weigh the importance of constructor deferral Y.SubClass = Y.extend( function () { Y.SuperClass.apply(this, arguments); Y.EventTarget.apply(this, { /* config */ }); }, Y.SuperClass, // <-- one "official" extention class Y.mix({ /* prototype */ }, Y.EventTarget.prototype), { /* static */ });
  81. 81. Plugins A a a a a
  82. 82. Plugins var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd);
  83. 83. Plugins var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay overlay Constructor ATTRS Attributes Attributes x x y y
  84. 84. Plugins var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS Attributes y y lock
  85. 85. Plugins var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS y y lock
  86. 86. Plugins var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS y y lock
  87. 87. The requirementsHost class • Y.Plugin.Host (free in Y.Base, or add with Y.augment)Plugin class • Static NS property That‟s it
  88. 88. Plugins (instance) Y.Plugin.Host.prototype.plug = function (Plugin, config) { ... if (Plugin && Plugin.NS) { config.host = this; this[Plugin.NS] = new Plugin(config); } };
  89. 89. Plugins (instance) Y.Plugin.Host.prototype.plug = function (Plugin, config) { ... if (Plugin && Plugin.NS) { config.host = this; this[Plugin.NS] = new Plugin(config); } }; overlay.dd.set(lock, true); overlay.unplug(dd);
  90. 90. The contractSHOULD✓ Expect an object constructor argument with „host‟ property
  91. 91. The contractSHOULD MAY✓ Expect an object ✓ Provide namespaced API constructor argument ✓ Modify core behavior via with „host‟ property events or AOP
  92. 92. The contractSHOULD MAY✓ Expect an object ✓ Provide namespaced API constructor argument ✓ Modify core behavior via with „host‟ property events or AOPMUST✓ Remove all traces when unplugged
  93. 93. The contractSHOULD MAY✓ Expect an object ✓ Provide namespaced API constructor argument ✓ Modify core behavior via with „host‟ property events or AOPMUST MUST NOT✓ Remove all traces when ✓ Modify host directly other unplugged than add the namespace
  94. 94. Plugins (class) Y.Plugin.Host.plug(Y.Overlay, Y.Plugin.Drag, { handles: [.yui3-widget-hd] }); var overlay = new Y.Overlay({ ... }); overlay.dd.set(lock, true);
  95. 95. Plugin PROs• Avoids method/property naming collisions• Preserves host behavior when unplug()ed• Plug classes or instances• Generic plugins can work for multiple host types• Works on Nodes
  96. 96. Plugin CONs• Fragments API• Plugin contract to restore host can add code weight• Difficult to manage competing plugins• plug() could use a little sugar
  97. 97. To sum up• Flexible• Better in smaller numbers• Class Plugins vs Augmentation?• Free with Y.Base-based classes and Y.Nodes (have I mentioned that you should use Y.Base?)
  98. 98. Class Extensions B Y.Base A C
  99. 99. Class extensions Y.Base.create = function(NAME, SuperClass, ext, proto, static) Y.extend = function (SubClass, SuperClass, proto, static) Y.SubClass = Y.extend( function() { SubClass.superclass.constructor.apply(this, arguments); }, /* extends */ Y.Base [], // <-- class extensions! { someProperty: „booga!‟, someMethod : function () { ... } }, /* NAME */ „subsub‟, { NAME: „subsub‟, ATTRS: { ... } });
  100. 100. Class extensions Y.Base.create = function(NAME, SuperClass, ext, proto, static) Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { /* Glue Y.Lines APIs to Y.CartesianSeries APIs */ });
  101. 101. Class extensions Y.Base.create = function(NAME, SuperClass, ext, proto, static) Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { /* Glue Y.Lines APIs to Y.CartesianSeries APIs */ }); Y.ComboSeries = Y.Base.create(comboSeries, Y.CartesianSeries, [ Y.Fills, Y.Lines, Y.Plots ], { /* Glue Y.Fills etc APIs to Y.CartesianSeries APIs */ }, { ATTRS: { ... } });
  102. 102. Class extensions Y.Base.create = function(NAME, SuperClass, ext, proto, static) Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { /* Glue Y.Lines APIs to Y.CartesianSeries APIs */ }); Y.ComboSeries = Y.Base.create(comboSeries, Y.CartesianSeries, [ Y.Fills, Y.Lines, Y.Plots ], { /* Glue Y.Fills etc APIs to Y.CartesianSeries APIs */ }, { ATTRS: { ... } });
  103. 103. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); Cartesian LineSeries Lines Constructor Constructor Constructor ATTRS ATTRS Prototype Prototype ATTRS Prototype
  104. 104. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); Cartesian LineSeries Lines Constructor Constructor Constructor Constructor Constructor ATTRS ATTRS ATTRS ATTRS direction Constructor type Prototype Prototype type ATTRS Prototype Prototype Prototype
  105. 105. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); Cartesian LineSeries Lines Constructor Constructor Constructor ATTRS ATTRS ATTRS direction styles type type + Prototype Prototype Prototype
  106. 106. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); Cartesian LineSeries Lines Constructor Constructor Constructor ATTRS ATTRS ATTRS direction Prototype styles type Prototype type draw direction drawLines Prototype type Prototype Prototype
  107. 107. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); Cartesian LineSeries Lines Constructor Constructor Constructor ATTRS ATTRS ATTRS Prototype Prototype Prototype Prototype draw drawLines draw drawSeries
  108. 108. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); Cartesian LineSeries Lines Constructor Constructor Constructor ATTRS ATTRS ATTRS Prototype Prototype Prototype draw initializer initializer initializer drawLines initializer initializer initializer
  109. 109. Class extensions Y.LineSeries = Y.Base.create(lineSeries, Y.CartesianSeries, [ Y.Lines ], { ... }); var series = new Y.LineSeries({ ... }); 1. Constructors are called 2. Attributes are set 3. initializers are called
  110. 110. Two types of extensions • Class decoration Add feature APIs and Attributes • Core functionality Satisfy abstract class implementation
  111. 111. Class extensions Y.Base.create = function(NAME, SuperClass, ext, proto, static) Y.Overlay = Y.Base.create(overlay, Y.Widget, [ Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPosition, Y.WidgetPositionConstrain ]);
  112. 112. Class extensions Y.Base.mix = function(Class, ext) Y.Slider = Y.Base.create(slider, Y.SliderBase, [Y.SliderValueRange]); Y.Base.mix(Y.Slider, [Y.ClickableRail]);
  113. 113. Extensions PROs• Promotes code reuse across environments• Feature APIs are added to the prototype• Can be used to mimic MVC breakdown
  114. 114. Extensions CONs• Requires Y.Base• Initialization overhead• Class definition only (no instance feature additions)• Does not work on Nodes• Increased potential for accidental name collisions
  115. 115. Extension vs Plugin • Extensions can be used to contribute core behavior • Extensions modify the class prototype, plugins are always namespaced • Feature extension constructors are always executed, plugin constructors on plug() • Feature APIs/attributes on the prototype vs class plugins in namespace is a stylistic choice
  116. 116. What We’re Going to Cover• Why YUI?• Modularity• YUI Infrastructure• YUI Loader – Deep dive• Extensibility – Native and Artificial Code Structuring• YUI is Open!
  117. 117. YUI is Open!!• Open Source• Open CDN• Open Hours• Open Communication• Open Development• Open Documentation
  118. 118. References• http://yuilibrary.com/• Images from Google, Flickr • http://www.youtube.com/yuilibrary• Inheritance Patterns by @ls_n
  119. 119. Questions?• Slides at http://slideshare.net/jaisanth• Twitter: @jaisanth• IRC freenode: #yui
  120. 120. THANK YOU!

×