YUI 3
The Most Advanced JavaScript
     Library in the World




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
...
What is YUI?




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
What is YUI?
 YUI stands for Yahoo! User Interface Library




         Ara Pehlivanian, BarCamp Boston 5, April 17-18 201...
What is YUI?
 YUI stands for Yahoo! User Interface Library

 JavaScript Library to simplify development




         Ara P...
What is YUI?
 YUI stands for Yahoo! User Interface Library

 JavaScript Library to simplify development

 First released i...
What is YUI?
 YUI stands for Yahoo! User Interface Library

 JavaScript Library to simplify development

 First released i...
What is YUI?
 YUI stands for Yahoo! User Interface Library

 JavaScript Library to simplify development

 First released i...
A New Start




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
A New Start
 YUI 3 was rebuilt from the ground up




         Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
      ...
A New Start
 YUI 3 was rebuilt from the ground up

 Strong emphasis on performance
 Demo:
 http://developer.yahoo.com/perf...
Most Advanced?


   Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
         Creative Commons Attribution 2.5 Canada
Browser?




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
Browser?
 Doesn’t assume a browser




        Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
              Creative...
Browser?
 Doesn’t assume a browser

 Abstracts window and document references




        Ara Pehlivanian, BarCamp Boston ...
Browser?
 Doesn’t assume a browser

 Abstracts window and document references

 Can now run server-side on Node.js thanks ...
Sub-modular




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
Sub-modular
 Load only what you need




        Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
              Creati...
Sub-modular
 Load only what you need

 Dependency configurator
 Demo:
 http://developer.yahoo.com/yui/3/configurator/




 ...
Loader




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
Loader
 Built into YUI Global Object




         Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
               Crea...
Loader
 Built into YUI Global Object

 Accessed through use() method
 YUI().use('history', function(Y) {
     // History a...
Loader
 Built into YUI Global Object

 Accessed through use() method
 YUI().use('history', function(Y) {
     // History a...
Loader
 Built into YUI Global Object

 Accessed through use() method
 YUI().use('history', function(Y) {
     // History a...
Node Utility




     Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
           Creative Commons Attribution 2.5 Can...
Node Utility
 DOM abstraction




        Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
              Creative Comm...
Node Utility
 DOM abstraction

 Node & NodeList




        Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
         ...
Node Utility
 DOM abstraction

 Node & NodeList
var node = Y.one(‘#foo’); // returns Node




           Ara Pehlivanian, ...
Node Utility
 DOM abstraction

 Node & NodeList
var node = Y.one(‘#foo’); // returns Node

var nodes = Y.all(‘#foo .bar’);...
Node Utility
 DOM abstraction

 Node & NodeList
var node = Y.one(‘#foo’); // returns Node

var nodes = Y.all(‘#foo .bar’);...
Node Utility
 DOM abstraction

 Node & NodeList
var node = Y.one(‘#foo’); // returns Node

var nodes = Y.all(‘#foo .bar’);...
Attribute Utility




     Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
           Creative Commons Attribution 2....
Attribute Utility
 Augmentable attribute interface for classes




         Ara Pehlivanian, BarCamp Boston 5, April 17-18...
Attribute Utility
 Augmentable attribute interface for classes

 Customizable getters and setters for data
 normalization ...
Attribute Utility
 Augmentable attribute interface for classes

 Customizable getters and setters for data
 normalization ...
Base




       Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
             Creative Commons Attribution 2.5 Canada
Base
 Low-level foundation class




         Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
               Creative...
Base
 Low-level foundation class

 Standard template for creating attribute based
 objects




         Ara Pehlivanian, B...
Base
 Low-level foundation class

 Standard template for creating attribute based
 objects

 Consistent init() and destroy...
Plugin




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
Plugin
 Allows addition of atomic functionality to
 object instances




         Ara Pehlivanian, BarCamp Boston 5, April...
Plugin
 Allows addition of atomic functionality to
 object instances

 Lets you write cleaner, simpler classes




       ...
Plugin
 Allows addition of atomic functionality to
 object instances

 Lets you write cleaner, simpler classes

 Demo:
 ht...
Event




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
Event
 DOM events & Custom Events




        Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
              Creative ...
Event
 DOM events & Custom Events

 Attach to elements that may not yet exist
 Y.on(‘click’, handleClick, ‘#foo’); // no e...
Event
 DOM events & Custom Events

 Attach to elements that may not yet exist
 Y.on(‘click’, handleClick, ‘#foo’); // no e...
Custom Events




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Cana...
Custom Events
 Define your own events at key moments of
 interest




        Ara Pehlivanian, BarCamp Boston 5, April 17-1...
Custom Events
 Define your own events at key moments of
 interest

 YUI treats DOM events and Custom Events the
 same:
 fun...
IO




     Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
           Creative Commons Attribution 2.5 Canada
IO
 io-base: base class used for standard XHR




         Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          ...
IO
 io-base: base class used for standard XHR

 io-xdr: extension for cross-domain requests




         Ara Pehlivanian, ...
IO
 io-base: base class used for standard XHR

 io-xdr: extension for cross-domain requests

 io-form: extension for form ...
IO
 io-base: base class used for standard XHR

 io-xdr: extension for cross-domain requests

 io-form: extension for form ...
IO
 io-base: base class used for standard XHR

 io-xdr: extension for cross-domain requests

 io-form: extension for form ...
Deep Dive




    Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
          Creative Commons Attribution 2.5 Canada
Deep Dive
 API Docs, examples and walkthroughs
 http://developer.yahoo.com/yui/3/




          Ara Pehlivanian, BarCamp B...
Deep Dive
 API Docs, examples and walkthroughs
 http://developer.yahoo.com/yui/3/


 YUI Theater
 http://developer.yahoo.c...
Deep Dive
 API Docs, examples and walkthroughs
 http://developer.yahoo.com/yui/3/


 YUI Theater
 http://developer.yahoo.c...
Deep Dive
 API Docs, examples and walkthroughs
 http://developer.yahoo.com/yui/3/


 YUI Theater
 http://developer.yahoo.c...
Questions?


 Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010.
       Creative Commons Attribution 2.5 Canada
Thank You!
 ara.pehlivanian@gmail.com

 http://twitter.com/@ara_p

 http://arapehlivanian.com




        Ara Pehlivanian,...
Upcoming SlideShare
Loading in...5
×

YUI 3: The Most Advance JavaScript Library in the World

3,585

Published on

Published in: Technology
1 Comment
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,585
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
171
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide

















































  • YUI 3: The Most Advance JavaScript Library in the World

    1. 1. YUI 3 The Most Advanced JavaScript Library in the World Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    2. 2. What is YUI? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    3. 3. What is YUI? YUI stands for Yahoo! User Interface Library Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    4. 4. What is YUI? YUI stands for Yahoo! User Interface Library JavaScript Library to simplify development Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    5. 5. What is YUI? YUI stands for Yahoo! User Interface Library JavaScript Library to simplify development First released in February 2006 Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    6. 6. What is YUI? YUI stands for Yahoo! User Interface Library JavaScript Library to simplify development First released in February 2006 Core maintained by a team of engineers at Yahoo! with community-contributed modules Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    7. 7. What is YUI? YUI stands for Yahoo! User Interface Library JavaScript Library to simplify development First released in February 2006 Core maintained by a team of engineers at Yahoo! with community-contributed modules http://developer.yahoo.com/yui/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    8. 8. A New Start Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    9. 9. A New Start YUI 3 was rebuilt from the ground up Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    10. 10. A New Start YUI 3 was rebuilt from the ground up Strong emphasis on performance Demo: http://developer.yahoo.com/performance/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    11. 11. Most Advanced? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    12. 12. Browser? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    13. 13. Browser? Doesn’t assume a browser Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    14. 14. Browser? Doesn’t assume a browser Abstracts window and document references Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    15. 15. Browser? Doesn’t assume a browser Abstracts window and document references Can now run server-side on Node.js thanks to Dav Glass Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    16. 16. Sub-modular Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    17. 17. Sub-modular Load only what you need Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    18. 18. Sub-modular Load only what you need Dependency configurator Demo: http://developer.yahoo.com/yui/3/configurator/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    19. 19. Loader Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    20. 20. Loader Built into YUI Global Object Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    21. 21. Loader Built into YUI Global Object Accessed through use() method YUI().use('history', function(Y) { // History available, and ready for use. }); Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    22. 22. Loader Built into YUI Global Object Accessed through use() method YUI().use('history', function(Y) { // History available, and ready for use. }); Self-aware dependency management/healing Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    23. 23. Loader Built into YUI Global Object Accessed through use() method YUI().use('history', function(Y) { // History available, and ready for use. }); Self-aware dependency management/healing Optimal dependency loading Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    24. 24. Node Utility Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    25. 25. Node Utility DOM abstraction Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    26. 26. Node Utility DOM abstraction Node & NodeList Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    27. 27. Node Utility DOM abstraction Node & NodeList var node = Y.one(‘#foo’); // returns Node Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    28. 28. Node Utility DOM abstraction Node & NodeList var node = Y.one(‘#foo’); // returns Node var nodes = Y.all(‘#foo .bar’); // returns NodeList Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    29. 29. Node Utility DOM abstraction Node & NodeList var node = Y.one(‘#foo’); // returns Node var nodes = Y.all(‘#foo .bar’); // returns NodeList myNode.addClass() and myNode.setStyle() Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    30. 30. Node Utility DOM abstraction Node & NodeList var node = Y.one(‘#foo’); // returns Node var nodes = Y.all(‘#foo .bar’); // returns NodeList myNode.addClass() and myNode.setStyle() Makes protection schemes possible Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    31. 31. Attribute Utility Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    32. 32. Attribute Utility Augmentable attribute interface for classes Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    33. 33. Attribute Utility Augmentable attribute interface for classes Customizable getters and setters for data normalization and validation Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    34. 34. Attribute Utility Augmentable attribute interface for classes Customizable getters and setters for data normalization and validation Change events for getters and setters; hooks for on and after events Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    35. 35. Base Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    36. 36. Base Low-level foundation class Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    37. 37. Base Low-level foundation class Standard template for creating attribute based objects Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    38. 38. Base Low-level foundation class Standard template for creating attribute based objects Consistent init() and destroy() Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    39. 39. Plugin Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    40. 40. Plugin Allows addition of atomic functionality to object instances Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    41. 41. Plugin Allows addition of atomic functionality to object instances Lets you write cleaner, simpler classes Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    42. 42. Plugin Allows addition of atomic functionality to object instances Lets you write cleaner, simpler classes Demo: http://developer.yahoo.com/yui/3/plugin/#simple Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    43. 43. Event Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    44. 44. Event DOM events & Custom Events Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    45. 45. Event DOM events & Custom Events Attach to elements that may not yet exist Y.on(‘click’, handleClick, ‘#foo’); // no element Y.on(‘click’, handleClick, foo); // element exists foo.on(‘click’, handleClick); // same as above Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    46. 46. Event DOM events & Custom Events Attach to elements that may not yet exist Y.on(‘click’, handleClick, ‘#foo’); // no element Y.on(‘click’, handleClick, foo); // element exists foo.on(‘click’, handleClick); // same as above Normalized event object function handleClick(e) { // regardless of browser e.preventDefault(); var target = e.target; } Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    47. 47. Custom Events Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    48. 48. Custom Events Define your own events at key moments of interest Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    49. 49. Custom Events Define your own events at key moments of interest YUI treats DOM events and Custom Events the same: function domEventHandler(e) { e.stopPropagation(); } function customEventHandler(e) { e.stopPropagation(); } Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    50. 50. IO Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    51. 51. IO io-base: base class used for standard XHR Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    52. 52. IO io-base: base class used for standard XHR io-xdr: extension for cross-domain requests Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    53. 53. IO io-base: base class used for standard XHR io-xdr: extension for cross-domain requests io-form: extension for form data serialization for POST transactions Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    54. 54. IO io-base: base class used for standard XHR io-xdr: extension for cross-domain requests io-form: extension for form data serialization for POST transactions io-upload-iframe: gets around XHR’s file upload limitation from HTML forms Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    55. 55. IO io-base: base class used for standard XHR io-xdr: extension for cross-domain requests io-form: extension for form data serialization for POST transactions io-upload-iframe: gets around XHR’s file upload limitation from HTML forms io-queue: keep async transactions in order Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    56. 56. Deep Dive Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    57. 57. Deep Dive API Docs, examples and walkthroughs http://developer.yahoo.com/yui/3/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    58. 58. Deep Dive API Docs, examples and walkthroughs http://developer.yahoo.com/yui/3/ YUI Theater http://developer.yahoo.com/yui/theater/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    59. 59. Deep Dive API Docs, examples and walkthroughs http://developer.yahoo.com/yui/3/ YUI Theater http://developer.yahoo.com/yui/theater/ Events http://upcoming.yahoo.com/group/4081/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    60. 60. Deep Dive API Docs, examples and walkthroughs http://developer.yahoo.com/yui/3/ YUI Theater http://developer.yahoo.com/yui/theater/ Events http://upcoming.yahoo.com/group/4081/ Get Involved http://yuilibrary.com/gallery/ Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    61. 61. Questions? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    62. 62. Thank You! ara.pehlivanian@gmail.com http://twitter.com/@ara_p http://arapehlivanian.com Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
    1. A particular slide catching your eye?

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

    ×