My talk at the Yahoo! Frontend Engineering Summit in December 2007. It explains how you can embed the YUI component by component on demand rather than in one big chunk.

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

2. Why use libraries?

3. Plan Use good Job
Code library done

4. Without libraries:

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

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

8. You.sacked = true

9. MCSE

12. “You want fries
with that?”

14. Ergo:
Libraries are good, mkay?

15. A common complaint.

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

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

18. First Aid remedies:
– Use the minified YUI versions

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

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

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

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

23. This is all packing and level
crunching.

24. What we really want is...

25. On-demand delivery

26. Why is that needed?

27. Use cases:

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

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

30. 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:

31. 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”

32. Example?

33. <div class=quot;flickrbadgequot;>
<p>
<a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
My latest photos on flickr
</a>
</p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>
http://icant.co.uk/sandbox/flickrbadgev2/

34. <div class=quot;flickrbadgequot;>
<p>
<a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
My latest photos on flickr
</a>
</p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>
http://icant.co.uk/sandbox/flickrbadgev2/

35. <div class=quot;flickrbadgequot;>
<p>
<a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
My latest photos on flickr
</a>
</p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>
http://icant.co.uk/sandbox/flickrbadgev2/

36. How?

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

38. YUI Loader:

39. YUI Loader:
– Knows about dependencies

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

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

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

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

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

45. Other option – 11kb is too
much!

46. Rolling your own
The YAHOO_config way

47. YUI has an often forgotten
configuration setting in
YAHOO_config.

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

49. 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!

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

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

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

53. 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 };

54. 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 };

55. 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 };

56. 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 };

57. 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 };

58. 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 };

59. 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 };

60. 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 };

61. 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 };

62. 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 };

63. 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 };

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

65. 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 };

66. 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 };

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

68. Have fun!
Thanks!