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