Yui3

4,757 views
4,626 views

Published on

1 Comment
14 Likes
Statistics
Notes
  • cool,thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,757
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
141
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide





























































































































































  • Yui3

    1. 1. Yahoo! User Interface http://developer.yahoo.com/yui @yuilibrary Luke Smith (@ls_n)
    2. 2. server
    3. 3. (X)HTML server
    4. 4. (X)HTML Specification server
    5. 5. (X)HTML Specification Implementation server
    6. 6. (X)HTML Specification Implementation Bugs server
    7. 7. (X)HTML Specification Implementation Bugs [ Theory / Practice ] server
    8. 8. CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server
    9. 9. Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server
    10. 10. Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server
    11. 11. Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification mixed: new (x)html, data: custom, xml, Data Transport Implementation behavior: js json Defects [ Theory / Practice ] server
    12. 12. Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs knowledge areas: 7 CSS (X)HTML dimensions: xJavaScript DOM 4 BOM API DOM API platforms: x 3 Specification mixed: new (x)html, data: custom, xml, browsers perDefects platform: x 5 Data Transport Implementation behavior: js json rendering modes: x 2 [ Theory / Practice ] server =840
    13. 13. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
    14. 14. What is YUI?
    15. 15. What is YUI? JavaScript library
    16. 16. What is YUI? JavaScript library True*
    17. 17. YUI Library Project • JavaScript library • CSS foundation • Documentation tools • Build tools • Testing tools • Server side delivery tools • Developer education
    18. 18. YUI Library Project YUI 2 JavaScript core, utilities, widgets; CSS foundation including Grids
    19. 19. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery.
    20. 20. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor Build-time tool for minifying JavaScript and CSS.
    21. 21. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation.
    22. 22. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test Comprehensive unit testing solution for any JS code.
    23. 23. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering.
    24. 24. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering. YUI Builder Build scripts for generating YUI JS/CSS from source.
    25. 25. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering. YUI Builder YUI PHP Loader Build scripts for generating YUI PHP js/css mgt. solution, with JS/CSS from source. YUI metadata; combos.
    26. 26. YUI 2 YUI 3 UI YUI CSS YUI Gallery
    27. 27. YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js
    28. 28. YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js YUI Doc Builder YUI Test Compressor Development YUI Console Profiler
    29. 29. YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js YUI Doc Builder YUI Test Compressor Development YUI Console Profiler YUI Blog yuilibrary forum Developer YUI Theater #yui (freenode)
    30. 30. YUI 3 YUI Gallery
    31. 31. YUI 3 YUI Gallery
    32. 32. YUI 3 First Concepts • DOM, Events, Ajax • Loading • Custom events • Component infrastructure
    33. 33. DOM var node = Y.one("#foo"); node.setStyle("background", "#900") .prepend("<em>Watch out!</em>"); var nodeList = Y.all(".bar tr"); nodeList.odd().addClass("stripe"); • Selector driven • Normalized API • Class & style management • Lots more...
    34. 34. Events node.on("click", handler); nodeList.on("mouseenter", handler); node.delegate("click", handler, "li"); Y.on("click", handler, "#notHereYet"); • Consistent for all subscribable objects • Baked in event delegation • Subscribe ahead of DOM availability
    35. 35. Events (cont.) node.on("submit", function ( e ) { e.preventDefault(); this.addClass("submitted"); }); node.on("outsideclick", fn, thisObj); • Normalized event object • Default "this" is the Node • Set "this" in handler • Create synthetic DOM events
    36. 36. Ajax Y.io(url, config); new Y.DataSource.IO(config); Y.yql(query, callback); Y.jsonp(url, callback); • XHR normalization • Cross Domain (XDR) • Asynchronous form submit • Lots of ways to link to remote data
    37. 37. YUI 3 First Concepts ✓DOM, Events, Ajax • Loading • Custom events • Component infrastructure
    38. 38. Before • Large blocking script for core features
    39. 39. Before • Large blocking script for core features • Multiple blocking <scripts> for more features
    40. 40. Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order
    41. 41. Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order • Unused code in monolithic scripts
    42. 42. Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order • Unused code in monolithic scripts • Volatility in collaborative environments
    43. 43. Loading YUI 3 <script src=”http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js”></script> <script> YUI().use('node', function (Y) { Y.one("body").setContent("Hello, World!"); Y.use(‘io’, ‘anim’, function (Y) { //lazy load on-demand Y.io("/data", { ... }); }); }); </script> • One <script> requirment: yui-min.js • Everything else via use("module") • Dependencies automatically resolved • Asychronous combo-loaded from CDN • Sandboxed code
    44. 44. After • Seed file (7K) • Module strategy (order independence) • Feature level submodularity (no dead code) • Optimal async loading (one non-blocking http request) • Dependency resolution (DWIW)
    45. 45. http://developer.yahoo.com/yui/3/configurator/
    46. 46. Y.use(...)
    47. 47. Y.use(...) Y.use(...)
    48. 48. Y.use(...) Y.use(...) Y.use(...) Y.use(...) ...
    49. 49. ๏ One page
    50. 50. ๏ One page ๏ n applications
    51. 51. ๏ One page ๏ n applications ๏ Start with seed, base modules
    52. 52. ๏ One page ๏ n applications ๏ Start with seed, base modules ๏ After that, the user decides what loads
    53. 53. YUI 3 First Concepts ✓DOM, Events, Ajax ✓Loading • Custom events • Component infrastructure
    54. 54. Custom events this.fire("foo", { payload: x }); myObject.on("bar", function( e ) { e.preventDefault(); }); slider.after("valueChange", handler); • Normalized API • Subscribable on and after phases • Can have cancelable default behaviors • Can bubble
    55. 55. Custom events http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events
    56. 56. YUI 3 First Concepts ✓DOM, Events, Ajax ✓Loading ✓Custom events • Component infrastructure
    57. 57. Component infrastructure = Your stuff
    58. 58. Your stuff • Attribute
    59. 59. Your stuff • Attribute • Base
    60. 60. Your stuff • Attribute • Base • Plugin
    61. 61. Your stuff • Attribute • Base • Plugin • Widget
    62. 62. Attribute MyClass.ATTRS = { foo: { value: "default", setter: setMethod, validator: validationMethod, readOnly: boolean } }; var instance = new MyClass({ foo: "new value" }); instance.after("fooChange", handler); instance.set("foo", "Hello, World!"); http://developer.yahoo.com/yui/3/attribute/
    63. 63. Base Y.extend( MyClass, Y.Base, { initializer: function () { ... }, destructor: function () { ... }, /* prototype */ }); var instance = new MyClass(); instance.after("fooChange", handler); instance.plug(pluginClass); instance.destroy(); http://developer.yahoo.com/yui/3/base/
    64. 64. Plugin Y.extend( MyPluginClass, Y.Plugin, { initializer: function () { ... }, destructor: function () { ... }, /* prototype */ }, { NS: "baz", ATTRS: { ... } } }); instance.plug(MyPluginClass); instance.baz.set("bar", "open"); instance.unplug("baz"); http://developer.yahoo.com/yui/3/plugin/
    65. 65. Widget Y.extend( MyWidgetClass, Y.Widget, { renderUI: function () { ... }, bindUI: function () { ... }, syncUI: function () { ... }, /* prototype */ }); var instance = new MyWidgetClass(); instance.render("#container"); instance.destroy(); http://developer.yahoo.com/yui/3/widget/
    66. 66. Infrastructure http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets
    67. 67. YUI 3 First Concepts ✓ DOM, Events, Ajax ✓ Loading ✓ Custom events ✓ Component infrastructure
    68. 68. Putting it together • Write reusable modules • Your modules in use(...) • YUI Gallery
    69. 69. YUI.add YUI.add(‘my-module’, function (Y) { function MyWidgetClass() {...} Y.extend(MyWidgetClass, Y.Widget, { ... }); Y.MyWidgetClass = MyWidgetClass; }, ‘0.0.1’, { requires: [‘widget’] }); • Expose API on Y • Identify requirements • Same infrastructure used by YUI modules
    70. 70. use() your stuff YUI.add(‘my-module’, ...); YUI().use(‘io’, ‘my-module’, ‘anim’, function (Y) { var instance = new Y.MyWidgetClass(); }); • Same API to load any module • Sandboxed, order independent, dependency resolution, etc
    71. 71. YUI Global
    72. 72. add phase YUI Global YUI / Yahoo! CDN
    73. 73. add phase YUI Global node event oop YUI / Yahoo! CDN data type
    74. 74. YUI Global cu cu s add phase node event oop st to om m YUI / Yahoo! CDN data lo cod ca e type tio n
    75. 75. YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN data lo cod ca e type tio n
    76. 76. YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN data lo cod ca e type tio n use phase
    77. 77. YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN data lo cod ca e type tio n YUI().use("imageloader", ...) use phase
    78. 78. YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN image data lo cod ca e loader type tio n YUI().use("imageloader", ...) use phase
    79. 79. YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN image data lo cod ca e loader type tio n image YUI().use("imageloader", ...) oop event node loader use phase
    80. 80. YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN image data lo cod ca e loader type tio n image YUI().use("imageloader", ...) oop event node loader Y.use("datasource", "mymodule", ...) use phase
    81. 81. YUI Global data cu cu my s add phase moduleto node event io oop st source om m YUI / Yahoo! CDN image data lo cod ca e json loader type cookie cache tio n image YUI().use("imageloader", ...) oop event node loader data my data Y.use("datasource", "mymodule", ...) use phase oopevent cachejson iocookie type module source
    82. 82. YUI Global data cu cu my s add phase moduleto node event io oop st source om m YUI / Yahoo! CDN image data lo cod ca e json loader type cookie cache tio n image YUI().use("imageloader", ...) oop event node loader data my data Y.use("datasource", "mymodule", ...) use phase oopevent cachejson iocookie type module source YUI({ modules: { anothermodule: { fullpath: 'http://eg.com/mod.js', requires: [‘anim’, ‘stylesheet’, ... ] } }}).use("anothermodule", ...)
    83. 83. YUI Global data cu another cu my s add phase moduleto module node event dd io oop st source om m YUI / Yahoo! CDN image data style lo cod ca e anim json loader type sheet cookie cache tio n image YUI().use("imageloader", ...) oop event node loader data my data Y.use("datasource", "mymodule", ...) use phase oopevent cachejson iocookie type module source YUI({ modules: { my anothermodule: { oop event node module fullpath: 'http://eg.com/mod.js', requires: [‘anim’, ‘stylesheet’, ... ] } style another dd anim }}).use("anothermodule", ...) sheet module
    84. 84. YUI Gallery
    85. 85. YUI Gallery http://yuilibrary.com/gallery/
    86. 86. YUI Gallery http://github.com/yui/yui3-gallery/
    87. 87. YUI Gallery • Your code on Yahoo!’s CDN • Available from any use()
    88. 88. use() your stuff YUI().use(‘tabview’, ‘gallery-yql’, function (Y) { Y.yql(“select * from internet”, function (data) { // Profit }); }); • Available to anybody by use() • Served from Yahoo!’s CDN • Combo loaded with the rest of the requested modules. • Free
    89. 89. YUI Gallery http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing
    90. 90. Wrapping up • JavaScript Library + Lots more • Baked in best practices • Simple pages or complex apps • Evented programming yay! • Infrastructure templates • Docs, examples, community • OMG Gallery
    91. 91. Thanks! Luke Smith @ls_n http://developer.yahoo.com/yui/ http://yuilibrary.com/ http://github.com/yui/ @yuilibrary

    ×