Yahoo! User Interface
http://developer.yahoo.com/yui
          @yuilibrary




                                 Luke Smith...
server
(X)HTML




 server
(X)HTML

          Specification




 server
(X)HTML

           Specification
          Implementation




 server
(X)HTML

           Specification
          Implementation
               Bugs




 server
(X)HTML

              Specification
             Implementation
                  Bugs
          [ Theory / Practice ]



...
CSS

                          BOM API
(X)HTML    DOM                      JavaScript
                          DOM API

 ...
Safari   Firefox   Chrome     IE6, 7, 8   Opera     10,000+ UAs


                        CSS

                           ...
Macintosh                 Windows              Linux, Unix, Mobile

Safari       Firefox   Chrome     IE6, 7, 8   Opera   ...
Macintosh                 Windows              Linux, Unix, Mobile

Safari       Firefox   Chrome     IE6, 7, 8   Opera   ...
Macintosh               Windows              Linux, Unix, Mobile

Safari       Firefox   Chrome   IE6, 7, 8   Opera       ...
usability, internationalization,
    localization, visual design,
  accessibility, information
   architecture, security, ...
What is YUI?
What is YUI?


JavaScript library
What is YUI?


JavaScript library

      True*
YUI Library Project
  • JavaScript library
  • CSS foundation
  • Documentation tools
  • Build tools
  • Testing tools
  ...
YUI Library Project
YUI 2
JavaScript core, utilities, widgets;
CSS foundation including Grids
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI Library Project
YUI 2                                  YUI 3
JavaScript core, utilities, widgets;   JavaScript core, u...
YUI 2     YUI 3
                        UI
YUI CSS   YUI Gallery
YUI 2          YUI 3
                                UI
YUI CSS        YUI Gallery

CDN hosting    PHPLoader
             ...
YUI 2          YUI 3
                                UI
YUI CSS        YUI Gallery

CDN hosting    PHPLoader
             ...
YUI 2          YUI 3
                                  UI
YUI CSS        YUI Gallery

CDN hosting    PHPLoader
           ...
YUI 3

YUI Gallery
YUI 3

YUI Gallery
YUI 3 First Concepts
  • DOM, Events, Ajax
  • Loading
  • Custom events
  • Component infrastructure
DOM
var node = Y.one("#foo");
node.setStyle("background", "#900")
    .prepend("<em>Watch out!</em>");

var nodeList = Y.a...
Events
node.on("click", handler);
nodeList.on("mouseenter", handler);

node.delegate("click", handler, "li");

Y.on("click...
Events (cont.)
node.on("submit", function ( e ) {
 e.preventDefault();
 this.addClass("submitted");
});

node.on("outsidec...
Ajax
Y.io(url, config);

new Y.DataSource.IO(config);

Y.yql(query, callback);
Y.jsonp(url, callback);



    • XHR normal...
YUI 3 First Concepts
  ✓DOM, Events, Ajax
  • Loading
  • Custom events
  • Component infrastructure
Before
• Large blocking script for core features
Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
• Dependent scripts can f...
Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
• Dependent scripts can f...
Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
• Dependent scripts can f...
Loading YUI 3
<script src=”http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js”></script>
<script>
YUI().use('node', funct...
After
• Seed file (7K)
• Module strategy (order independence)
• Feature level submodularity (no dead code)
• Optimal async ...
http://developer.yahoo.com/yui/3/configurator/
Y.use(...)
Y.use(...)




Y.use(...)
Y.use(...)




Y.use(...)
Y.use(...)
Y.use(...)
...
๏ One page
๏ One page
๏ n applications
๏ One page
๏ n applications
๏ Start with seed, base modules
๏ One page
๏ n applications
๏ Start with seed, base modules
๏ After that, the user decides what loads
YUI 3 First Concepts
  ✓DOM, Events, Ajax
  ✓Loading
  • Custom events
  • Component infrastructure
Custom events
this.fire("foo", { payload: x });

myObject.on("bar", function( e ) {
 e.preventDefault();
});

slider.after...
Custom events




http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events
YUI 3 First Concepts
  ✓DOM, Events, Ajax
  ✓Loading
  ✓Custom events
  • Component infrastructure
Component infrastructure
     = Your stuff
Your stuff
• Attribute
Your stuff
• Attribute
• Base
Your stuff
• Attribute
• Base
• Plugin
Your stuff
• Attribute
• Base
• Plugin
• Widget
Attribute
MyClass.ATTRS = {
  foo: {
    value: "default",
    setter: setMethod,
    validator: validationMethod,
    rea...
Base
Y.extend( MyClass, Y.Base, {
  initializer: function () { ... },
  destructor: function () { ... },
  /* prototype */...
Plugin
Y.extend( MyPluginClass, Y.Plugin, {
    initializer: function () { ... },
    destructor: function () { ... },
   ...
Widget
Y.extend( MyWidgetClass, Y.Widget, {
  renderUI: function () { ... },
  bindUI: function () { ... },
  syncUI: func...
Infrastructure




http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets
YUI 3 First Concepts
  ✓ DOM, Events, Ajax
  ✓ Loading
  ✓ Custom events
  ✓ Component infrastructure
Putting it together
 •   Write reusable modules
 •   Your modules in use(...)
 •   YUI Gallery
YUI.add
YUI.add(‘my-module’, function (Y) {

 function MyWidgetClass() {...}

 Y.extend(MyWidgetClass, Y.Widget, { ... });...
use() your stuff
YUI.add(‘my-module’, ...);

YUI().use(‘io’, ‘my-module’, ‘anim’, function (Y) {

 var instance = new Y.My...
YUI Global
add phase          YUI Global


            YUI / Yahoo! CDN
add phase                  YUI Global

            node   event           oop

             YUI / Yahoo! CDN
             ...
YUI Global
                                            cu
                                         cu s
add phase

       ...
YUI Global
                                            cu
                                         cu my s
add phase

    ...
YUI Global
                                            cu
                                         cu my s
add phase

    ...
YUI Global
                                                        cu
                                                    ...
YUI Global
                                                        cu
                                                    ...
YUI Global
                                                                             cu
                               ...
YUI Global
                                                                             cu
                               ...
YUI Global
                                                                  data
                                        ...
YUI Global
                                                                         data
                                 ...
YUI Global
                                                                         data
                                 ...
YUI Gallery
YUI Gallery




http://yuilibrary.com/gallery/
YUI Gallery




http://github.com/yui/yui3-gallery/
YUI Gallery




• Your code on Yahoo!’s CDN
• Available from any use()
use() your stuff
YUI().use(‘tabview’, ‘gallery-yql’, function (Y) {

 Y.yql(“select * from internet”, function (data) {
  ...
YUI Gallery




http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing
Wrapping up
•   JavaScript Library + Lots more
•   Baked in best practices
•   Simple pages or complex apps
•   Evented pr...
Thanks!
Luke Smith
@ls_n

http://developer.yahoo.com/yui/
http://yuilibrary.com/
http://github.com/yui/
@yuilibrary
Yui3
Yui3
Yui3
Upcoming SlideShare
Loading in...5
×

Yui3

4,472

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,472
On Slideshare
0
From Embeds
0
Number of Embeds
0
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×