YUI 3: The Most Advance JavaScript Library in the World

  • 3,454 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,454
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
169
Comments
1
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

















































Transcript

  • 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. What is YUI? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. 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. 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. 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. A New Start Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. Most Advanced? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 12. Browser? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 13. Browser? Doesn’t assume a browser Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. Sub-modular Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 17. Sub-modular Load only what you need Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. Loader Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 20. Loader Built into YUI Global Object Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. 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. Node Utility Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 25. Node Utility DOM abstraction Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 26. Node Utility DOM abstraction Node & NodeList Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. 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. 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. Attribute Utility Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 32. Attribute Utility Augmentable attribute interface for classes Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. Base Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 36. Base Low-level foundation class Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. Plugin Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. 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. Event Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 44. Event DOM events & Custom Events Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. Custom Events Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. IO Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. 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. 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. 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. Deep Dive Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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. 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. 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. 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. Questions? Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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