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
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.
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
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)
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
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
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
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