YUI on the go
How to include YUI components on demand
Christian Heilmann
Yahoo! Frontend Engineering Summit UK
December 2007

Why use libraries?

Plan Use good Job
Code library done

Without libraries:

Plan Browser Hell
Code
OS inconsistencies
Forget about
obscure bugs
Cannot reproduce

> CVS commit
> Conflict:
> Too much fail error.

You.sacked = true

MCSE

“You want fries
with that?”

Ergo:
Libraries are good, mkay?

A common complaint.

“YUI is too big! If I want to
build something on top of it, I
need to include a lot of large
files!”

yahoo.js – 4.6kb
dom.js – 35kb
event.js – 61kb
reset.css – 0.5kb
fonts.css – 0.6kb
grids.css – 3kb
6 HTTP requests – 104.7kb

First Aid remedies:
– Use the minified YUI versions

yahoo-min.js – 1kb
dom-min.js – 10.2kb
event-min.js – 13kb
reset-min.css – 0.4kb
fonts-min.css – 0.2kb
grids-min.css – 2.4kb
6 HTTP requests – 27.2kb

First Aid remedies:
– Use the minified YUI versions
– Cut down on included YUI
components by using the combined
component includes.

yahoo-dom-event.js – 24.1kb
reset-fonts-grids.css – 3.1kb
2 HTTP requests – 27.2kb

First Aid remedies:
– Use the minified YUI versions
– Cut down on included YUI
components by using the combined
component includes.
– Use the hosted YUI versions.

This is all packing and level
crunching.

What we really want is...

On-demand delivery

Why is that needed?

Use cases:

Use cases:
– We don’t want to make users load
things they don’t need.

Use cases:
– We don’t want to make users load
things they don’t need.
– Distribution (badges, banners) works a
lot better if it is one <script> and not 3.

Use cases:
– We don’t want to make users load
things they don’t need.
– Distribution (badges, banners) works a
lot better if it is one <script> and not 3.
– We can offer implementers to trigger
extra functionality with markup:

Use cases:
– We don’t want to make users load
things they don’t need.
– Distribution (badges, banners) works a
lot better if it is one <script> and not 3.
– We can offer implementers to trigger
extra functionality with markup:
“add an ‘animated’ CSS class for
smooth transitions”

Example?

<div class=\"flickrbadge\">
<p>
<a
href=\"http://www.flickr.com/photos/11414938%
40N00\">
My latest photos on flickr
</a>
</p>
</div>
<script src=\"flickrbadgeloader.js\"></script>
http://icant.co.uk/sandbox/flickrbadgev2/

<div class=\"flickrbadge\">
<p>
<a
href=\"http://www.flickr.com/photos/11414938%
40N00\">
My latest photos on flickr
</a>
</p>
</div>
<script src=\"flickrbadgeloader.js\"></script>
http://icant.co.uk/sandbox/flickrbadgev2/

<div class=\"flickrbadge\">
<p>
<a
href=\"http://www.flickr.com/photos/11414938%
40N00\">
My latest photos on flickr
</a>
</p>
</div>
<script src=\"flickrbadgeloader.js\"></script>
http://icant.co.uk/sandbox/flickrbadgev2/

How?

Supercool Solution:
The YUI Loader
http://developer.yahoo.com/yui/yuiloader

YUI Loader:

YUI Loader:
– Knows about dependencies

YUI Loader:
– Knows about dependencies
– Automatically gets the newest
hosted versions

YUI Loader:
– Knows about dependencies
– Automatically gets the newest
hosted versions
– Works without yahoo.js

YUI Loader:
– Knows about dependencies
– Automatically gets the newest
hosted versions
– Works without yahoo.js
– Extendable with non-YUI
components(!)

<script
src=\"http://yui.yahooapis.com/2.3.1/b
uild/yuiloader/yuiloader-beta-
min.js\"></script>
<script>
loader = new YAHOO.util.YUILoader();
loader.require('calendar','tabview');
loader.insert(function() {
// Your code
});
</script>

http://yuiblog.com/assets/pdf/cheatsheets/yuiloader.pdf

Other option – 11kb is too
much!

Rolling your own
The YAHOO_config way

YUI has an often forgotten
configuration setting in
YAHOO_config.

YUI has an often forgotten
configuration setting in
YAHOO_config.
http://developer.yahoo.com/yui/yahoo/#config

YUI has an often forgotten
configuration setting in
YAHOO_config.
No
ww
http://developer.yahoo.com/yui/yahoo/#config
mo ith
AW re
ES
OM
E!

It allows you to define a
listener function that gets
notified every time a YUI
component is loaded.

<script>
function snitch(component){
console.log('can has YUI ' +
component.name);
};
YAHOO_config = {
listener:snitch
};
</script>
<script
src=\"http://yui.yahooapis.com/2.3.1/build/ya
hoo/yahoo-min.js\"></script>
<script
src=\"http://yui.yahooapis.com/2.3.1/build/ev
ent/event-min.js\"></script>

Using this in conjunction with
your scripts and repeat calls
of the “snitch” function
allows you to dynamically
include the YUI.

var myScript = function(){
// other code
function addScript(url){
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(s);
};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){ // YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
function addScript(url){
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(s);
};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){ // YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
function addScript(url){
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(s);
};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){ // YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
// YUI is ready
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

You can extend that to load
different YUI components one
after the other.

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
if(typeof o === 'undefined'){
var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
'build/yahoo-dom-event/' +
'yahoo-dom-event.js';
addScript(APIurl);
} else {
if(o.name === 'yahoo-dom-event'){
var url = 'http://yui.yahooapis.com/2.3.1/' +
'build/animation/' +
'animation-min.js';
addScript(url);
}
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

var myScript = function(){
// other code
+ function addScript(url){};
function YUIready(o){
+ if(typeof o === 'undefined'){
} else {
if(o.name === 'yahoo-dom-event'){
var url = 'http://yui.yahooapis.com/2.3.1/' +
'build/animation/' +
'animation-min.js';
addScript(url);
};
if(o.name === 'animation'){
// done …
};
};
};
YUIready();
return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

You can also make it
dependent on classes or IDs
used in the document, or
configuration options of your
main script and many more
things.

Have fun!
Thanks!