Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
YUI 3: The Most Advance JavaScript Library in the World
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