1. Yahoo! User Interface
http://developer.yahoo.com/yui
@yuilibrary
Luke Smith (@ls_n)

2. server

3. (X)HTML
server

4. (X)HTML
Specification
server

5. (X)HTML
Specification
Implementation
server

6. (X)HTML
Specification
Implementation
Bugs
server

7. (X)HTML
Specification
Implementation
Bugs
[ Theory / Practice ]
server

8. CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
mixed: new (x)html
data: custom, xml,
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server

9. Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
mixed: new (x)html
data: custom, xml,
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server

10. Macintosh Windows Linux, Unix, Mobile
Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
mixed: new (x)html
data: custom, xml,
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server

11. Macintosh Windows Linux, Unix, Mobile
Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
mixed: new (x)html,
data: custom, xml,
Data Transport
Implementation
behavior: js
json
Defects
[ Theory / Practice ]
server

12. Macintosh Windows Linux, Unix, Mobile
Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs
knowledge areas: 7
CSS
(X)HTML
dimensions: xJavaScript
DOM
4 BOM API
DOM API
platforms: x 3
Specification
mixed: new (x)html,
data: custom, xml,
browsers perDefects platform: x 5
Data Transport
Implementation
behavior: js
json
rendering modes: x 2
[ Theory / Practice ]
server
=840

14. usability, internationalization,
localization, visual design,
accessibility, information
architecture, security, build
processes, performance,
benchmarking, devices, portability

15. What is YUI?

16. What is YUI?
JavaScript library

17. What is YUI?
JavaScript library
True*

18. YUI Library Project
• JavaScript library
• CSS foundation
• Documentation tools
• Build tools
• Testing tools
• Server side delivery tools
• Developer education

19. YUI Library Project
YUI 2
JavaScript core, utilities, widgets;
CSS foundation including Grids

20. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.

21. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.
YUI Compressor
Build-time tool for minifying
JavaScript and CSS.

22. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.
YUI Compressor YUI Doc
Build-time tool for minifying Build-time tool for generating
JavaScript and CSS. API documentation.

23. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.
YUI Compressor YUI Doc
Build-time tool for minifying Build-time tool for generating
JavaScript and CSS. API documentation.
YUI Test
Comprehensive unit testing
solution for any JS code.

24. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.
YUI Compressor YUI Doc
Build-time tool for minifying Build-time tool for generating
JavaScript and CSS. API documentation.
YUI Test YUI Theater
Comprehensive unit testing Video library on the discipline
solution for any JS code. of frontend engineering.

25. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.
YUI Compressor YUI Doc
Build-time tool for minifying Build-time tool for generating
JavaScript and CSS. API documentation.
YUI Test YUI Theater
Comprehensive unit testing Video library on the discipline
solution for any JS code. of frontend engineering.
YUI Builder
Build scripts for generating YUI
JS/CSS from source.

26. YUI Library Project
YUI 2 YUI 3
JavaScript core, utilities, widgets; JavaScript core, utilities; CSS
CSS foundation including Grids foundation; Gallery.
YUI Compressor YUI Doc
Build-time tool for minifying Build-time tool for generating
JavaScript and CSS. API documentation.
YUI Test YUI Theater
Comprehensive unit testing Video library on the discipline
solution for any JS code. of frontend engineering.
YUI Builder YUI PHP Loader
Build scripts for generating YUI PHP js/css mgt. solution, with
JS/CSS from source. YUI metadata; combos.

27. YUI 2 YUI 3
UI
YUI CSS YUI Gallery

28. YUI 2 YUI 3
UI
YUI CSS YUI Gallery
CDN hosting PHPLoader
Server
Combo Loader YUI3 + Node.js

29. YUI 2 YUI 3
UI
YUI CSS YUI Gallery
CDN hosting PHPLoader
Server
Combo Loader YUI3 + Node.js
YUI Doc Builder
YUI Test Compressor Development
YUI Console Profiler

30. YUI 2 YUI 3
UI
YUI CSS YUI Gallery
CDN hosting PHPLoader
Server
Combo Loader YUI3 + Node.js
YUI Doc Builder
YUI Test Compressor Development
YUI Console Profiler
YUI Blog yuilibrary forum
Developer
YUI Theater #yui (freenode)

31. YUI 3
YUI Gallery

32. YUI 3
YUI Gallery

33. YUI 3 First Concepts
• DOM, Events, Ajax
• Loading
• Custom events
• Component infrastructure

34. DOM
var node = Y.one("#foo");
node.setStyle("background", "#900")
.prepend("<em>Watch out!</em>");
var nodeList = Y.all(".bar tr");
nodeList.odd().addClass("stripe");
• Selector driven
• Normalized API
• Class & style management
• Lots more...

35. Events
node.on("click", handler);
nodeList.on("mouseenter", handler);
node.delegate("click", handler, "li");
Y.on("click", handler, "#notHereYet");
• Consistent for all subscribable objects
• Baked in event delegation
• Subscribe ahead of DOM availability

36. Events (cont.)
node.on("submit", function ( e ) {
e.preventDefault();
this.addClass("submitted");
});
node.on("outsideclick", fn, thisObj);
• Normalized event object
• Default "this" is the Node
• Set "this" in handler
• Create synthetic DOM events

37. Ajax
Y.io(url, config);
new Y.DataSource.IO(config);
Y.yql(query, callback);
Y.jsonp(url, callback);
• XHR normalization
• Cross Domain (XDR)
• Asynchronous form submit
• Lots of ways to link to remote data

38. YUI 3 First Concepts
✓DOM, Events, Ajax
• Loading
• Custom events
• Component infrastructure

39. Before
• Large blocking script for core features

40. Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features

41. Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
• Dependent scripts can fail when out of order

42. Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
• Dependent scripts can fail when out of order
• Unused code in monolithic scripts

43. Before
• Large blocking script for core features
• Multiple blocking <scripts> for more features
• Dependent scripts can fail when out of order
• Unused code in monolithic scripts
• Volatility in collaborative environments

44. Loading YUI 3
<script src=”http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js”></script>
<script>
YUI().use('node', function (Y) {
Y.one("body").setContent("Hello, World!");
Y.use(‘io’, ‘anim’, function (Y) { //lazy load on-demand
Y.io("/data", { ... });
});
});
</script>
• One <script> requirment: yui-min.js
• Everything else via use("module")
• Dependencies automatically resolved
• Asychronous combo-loaded from CDN
• Sandboxed code

45. After
• Seed file (7K)
• Module strategy (order independence)
• Feature level submodularity (no dead code)
• Optimal async loading (one non-blocking http request)
• Dependency resolution (DWIW)

46. http://developer.yahoo.com/yui/3/configurator/

49. Y.use(...)

50. Y.use(...)
Y.use(...)

51. Y.use(...)
Y.use(...)
Y.use(...)
Y.use(...)
...

52. ๏ One page

53. ๏ One page
๏ n applications

54. ๏ One page
๏ n applications
๏ Start with seed, base modules

55. ๏ One page
๏ n applications
๏ Start with seed, base modules
๏ After that, the user decides what loads

56. YUI 3 First Concepts
✓DOM, Events, Ajax
✓Loading
• Custom events
• Component infrastructure

57. Custom events
this.fire("foo", { payload: x });
myObject.on("bar", function( e ) {
e.preventDefault();
});
slider.after("valueChange", handler);
• Normalized API
• Subscribable on and after phases
• Can have cancelable default behaviors
• Can bubble

58. Custom events
http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events

59. YUI 3 First Concepts
✓DOM, Events, Ajax
✓Loading
✓Custom events
• Component infrastructure

60. Component infrastructure
= Your stuff

61. Your stuff
• Attribute

62. Your stuff
• Attribute
• Base

63. Your stuff
• Attribute
• Base
• Plugin

64. Your stuff
• Attribute
• Base
• Plugin
• Widget

65. Attribute
MyClass.ATTRS = {
foo: {
value: "default",
setter: setMethod,
validator: validationMethod,
readOnly: boolean
}
};
var instance = new MyClass({ foo: "new value" });
instance.after("fooChange", handler);
instance.set("foo", "Hello, World!");
http://developer.yahoo.com/yui/3/attribute/

66. Base
Y.extend( MyClass, Y.Base, {
initializer: function () { ... },
destructor: function () { ... },
/* prototype */
});
var instance = new MyClass();
instance.after("fooChange", handler);
instance.plug(pluginClass);
instance.destroy();
http://developer.yahoo.com/yui/3/base/

67. Plugin
Y.extend( MyPluginClass, Y.Plugin, {
initializer: function () { ... },
destructor: function () { ... },
/* prototype */
}, {
NS: "baz",
ATTRS: { ... }
}
});
instance.plug(MyPluginClass);
instance.baz.set("bar", "open");
instance.unplug("baz");
http://developer.yahoo.com/yui/3/plugin/

68. Widget
Y.extend( MyWidgetClass, Y.Widget, {
renderUI: function () { ... },
bindUI: function () { ... },
syncUI: function () { ... },
/* prototype */
});
var instance = new MyWidgetClass();
instance.render("#container");
instance.destroy();
http://developer.yahoo.com/yui/3/widget/

69. Infrastructure
http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets

70. YUI 3 First Concepts
✓ DOM, Events, Ajax
✓ Loading
✓ Custom events
✓ Component infrastructure

71. Putting it together
• Write reusable modules
• Your modules in use(...)
• YUI Gallery

72. YUI.add
YUI.add(‘my-module’, function (Y) {
function MyWidgetClass() {...}
Y.extend(MyWidgetClass, Y.Widget, { ... });
Y.MyWidgetClass = MyWidgetClass;
}, ‘0.0.1’, { requires: [‘widget’] });
• Expose API on Y
• Identify requirements
• Same infrastructure used by YUI modules

73. use() your stuff
YUI.add(‘my-module’, ...);
YUI().use(‘io’, ‘my-module’, ‘anim’, function (Y) {
var instance = new Y.MyWidgetClass();
});
• Same API to load any module
• Sandboxed, order independent,
dependency resolution, etc

74. YUI Global

75. add phase YUI Global
YUI / Yahoo! CDN

76. add phase YUI Global
node event oop
YUI / Yahoo! CDN
data
type

77. YUI Global
cu
cu s
add phase
node event oop st to
om m
YUI / Yahoo! CDN
data
lo cod
ca e
type tio
n

78. YUI Global
cu
cu my s
add phase
moduleto
node event oop st
om m
YUI / Yahoo! CDN
data
lo cod
ca e
type tio
n

79. YUI Global
cu
cu my s
add phase
moduleto
node event oop st
om m
YUI / Yahoo! CDN
data
lo cod
ca e
type tio
n
use phase

80. YUI Global
cu
cu my s
add phase
moduleto
node event oop st
om m
YUI / Yahoo! CDN data
lo cod
ca e
type tio
n
YUI().use("imageloader", ...)
use phase

81. YUI Global
cu
cu my s
add phase
moduleto
node event oop st
om m
YUI / Yahoo! CDN image data
lo cod
ca e
loader type tio
n
YUI().use("imageloader", ...)
use phase

82. YUI Global
cu
cu my s
add phase
moduleto
node event oop st
om m
YUI / Yahoo! CDN image data
lo cod
ca e
loader type tio
n
image
YUI().use("imageloader", ...) oop event node
loader
use phase

83. YUI Global
cu
cu my s
add phase
moduleto
node event oop st
om m
YUI / Yahoo! CDN image data
lo cod
ca e
loader type tio
n
image
YUI().use("imageloader", ...) oop event node
loader
Y.use("datasource", "mymodule", ...)
use phase

84. YUI Global
data
cu
cu my s
add phase
moduleto
node event io oop st
source
om m
YUI / Yahoo! CDN image data
lo cod
ca e
json
loader type
cookie cache tio
n
image
YUI().use("imageloader", ...) oop event node
loader
data my
data
Y.use("datasource", "mymodule", ...)
use phase
oopevent
cachejson iocookie
type module
source

85. YUI Global
data
cu
cu my s
add phase
moduleto
node event io oop st
source
om m
YUI / Yahoo! CDN image data
lo cod
ca e
json
loader type
cookie cache tio
n
image
YUI().use("imageloader", ...) oop event node
loader
data my
data
Y.use("datasource", "mymodule", ...)
use phase
oopevent
cachejson iocookie
type module
source
YUI({ modules: {
anothermodule: {
fullpath: 'http://eg.com/mod.js',
requires: [‘anim’, ‘stylesheet’, ... ]
}
}}).use("anothermodule", ...)

86. YUI Global
data
cu another
cu my s
add phase
moduleto module
node event dd io oop st
source
om m
YUI / Yahoo! CDN image data style
lo cod
ca e
anim json
loader type sheet
cookie cache tio
n
image
YUI().use("imageloader", ...) oop event node
loader
data my
data
Y.use("datasource", "mymodule", ...)
use phase
oopevent
cachejson iocookie
type module
source
YUI({ modules: { my
anothermodule: { oop event node
module
fullpath: 'http://eg.com/mod.js',
requires: [‘anim’, ‘stylesheet’, ... ]
} style another
dd anim
}}).use("anothermodule", ...) sheet module

87. YUI Gallery

88. YUI Gallery
http://yuilibrary.com/gallery/

89. YUI Gallery
http://github.com/yui/yui3-gallery/

90. YUI Gallery
• Your code on Yahoo!’s CDN
• Available from any use()

91. use() your stuff
YUI().use(‘tabview’, ‘gallery-yql’, function (Y) {
Y.yql(“select * from internet”, function (data) {
// Profit
});
});
• Available to anybody by use()
• Served from Yahoo!’s CDN
• Combo loaded with the rest of
the requested modules.
• Free

92. YUI Gallery
http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing

93. Wrapping up
• JavaScript Library + Lots more
• Baked in best practices
• Simple pages or complex apps
• Evented programming yay!
• Infrastructure templates
• Docs, examples, community
• OMG Gallery

94. Thanks!
Luke Smith
@ls_n
http://developer.yahoo.com/yui/
http://yuilibrary.com/
http://github.com/yui/
@yuilibrary