YUI 3: The Most Advance JavaScript Library in the WorldPresentation 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
Let LinkedIn power your SlideShare experience
+
Let LinkedIn power your SlideShare experience
Customize SlideShare content based on your interests
We will import your LinkedIn profile and you will be visible on SlideShare.
Keep up to date when your LinkedIn contacts post on SlideShare
1–1 of 1 previous next