• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
YUI 3: The Most Advance JavaScript Library in the World
 

YUI 3: The Most Advance JavaScript Library in the World

on

  • 4,752 views

 

Statistics

Views

Total Views
4,752
Views on SlideShare
4,712
Embed Views
40

Actions

Likes
17
Downloads
167
Comments
1

3 Embeds 40

http://www.slideshare.net 38
http://www.taaza.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

YUI 3: The Most Advance JavaScript Library in the World YUI 3: The Most Advance JavaScript Library in the World Presentation Transcript

  • 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
  • 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 2010. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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
  • 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
  • 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. Creative Commons Attribution 2.5 Canada
  • 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
  • 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 Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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. Creative Commons Attribution 2.5 Canada
  • 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
  • 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. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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
  • Node Utility Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • Node Utility DOM abstraction Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • Node Utility DOM abstraction Node & NodeList Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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
  • 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
  • Attribute Utility Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • Attribute Utility Augmentable attribute interface for classes Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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 Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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 Commons Attribution 2.5 Canada
  • 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
  • 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
  • Custom Events Ara Pehlivanian, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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. Creative Commons Attribution 2.5 Canada
  • 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
  • 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
  • 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
  • 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
  • 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 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/ YUI Theater http://developer.yahoo.com/yui/theater/ 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/ 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
  • 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
  • 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, BarCamp Boston 5, April 17-18 2010. Creative Commons Attribution 2.5 Canada