YUI on the go
How to include YUI components on demand


                   Christian Heilmann
         Yahoo! Frontend Eng...
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 – 3k...
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.cs...
First Aid remedies:

– Use the minified YUI versions
– Cut down on included YUI
  components by using the combined
  compo...
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
  compo...
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 be...
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot be...
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot be...
Example?
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My late...
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My late...
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My late...
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
– Exten...
<script
src=quot;http://yui.yahooapis.com/2.3.1/b
uild/yuiloader/yuiloader-beta-
min.jsquot;></script>

<script>
loader = ...
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
           ...
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 = {
...
Using this in conjunction with
your scripts and repeat calls
   of the “snitch” function
 allows you to dynamically
      ...
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script')...
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script')...
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script')...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o ...
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 ...
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
  +     if(typeof o ...
You can also make it
dependent on classes or IDs
  used in the document, or
configuration options of your
 main script and...
Have fun!



Thanks!
YUI on the go
YUI on the go
YUI on the go
YUI on the go
Upcoming SlideShare
Loading in …5
×

YUI on the go

12,749 views
12,662 views

Published on

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.

Published in: Technology, Education
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,749
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
217
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

YUI on the go

  1. 1. YUI on the go How to include YUI components on demand Christian Heilmann Yahoo! Frontend Engineering Summit UK December 2007
  2. 2. Why use libraries?
  3. 3. Plan Use good Job Code library done
  4. 4. Without libraries:
  5. 5. Plan Browser Hell Code OS inconsistencies Forget about obscure bugs Cannot reproduce
  6. 6. > CVS commit > Conflict: > Too much fail error.
  7. 7. You.sacked = true
  8. 8. MCSE
  9. 9. “You want fries with that?”
  10. 10. Ergo: Libraries are good, mkay?
  11. 11. A common complaint.
  12. 12. “YUI is too big! If I want to build something on top of it, I need to include a lot of large files!”
  13. 13. 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
  14. 14. First Aid remedies: – Use the minified YUI versions
  15. 15. 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
  16. 16. First Aid remedies: – Use the minified YUI versions – Cut down on included YUI components by using the combined component includes.
  17. 17. yahoo-dom-event.js – 24.1kb reset-fonts-grids.css – 3.1kb 2 HTTP requests – 27.2kb
  18. 18. 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.
  19. 19. This is all packing and level crunching.
  20. 20. What we really want is...
  21. 21. On-demand delivery
  22. 22. Why is that needed?
  23. 23. Use cases:
  24. 24. Use cases: – We don’t want to make users load things they don’t need.
  25. 25. 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.
  26. 26. 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:
  27. 27. 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”
  28. 28. Example?
  29. 29. <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/
  30. 30. <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/
  31. 31. <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/
  32. 32. How?
  33. 33. Supercool Solution: The YUI Loader http://developer.yahoo.com/yui/yuiloader
  34. 34. YUI Loader:
  35. 35. YUI Loader: – Knows about dependencies
  36. 36. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions
  37. 37. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions – Works without yahoo.js
  38. 38. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions – Works without yahoo.js – Extendable with non-YUI components(!)
  39. 39. <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>
  40. 40. http://yuiblog.com/assets/pdf/cheatsheets/yuiloader.pdf
  41. 41. Other option – 11kb is too much!
  42. 42. Rolling your own The YAHOO_config way
  43. 43. YUI has an often forgotten configuration setting in YAHOO_config.
  44. 44. YUI has an often forgotten configuration setting in YAHOO_config. http://developer.yahoo.com/yui/yahoo/#config
  45. 45. 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!
  46. 46. It allows you to define a listener function that gets notified every time a YUI component is loaded.
  47. 47. <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>
  48. 48. Using this in conjunction with your scripts and repeat calls of the “snitch” function allows you to dynamically include the YUI.
  49. 49. 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 };
  50. 50. 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 };
  51. 51. 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 };
  52. 52. 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 };
  53. 53. 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 };
  54. 54. 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 };
  55. 55. 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 };
  56. 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. 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. 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. 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. 60. You can extend that to load different YUI components one after the other.
  61. 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'){ 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 };
  62. 62. 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 };
  63. 63. 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.
  64. 64. Have fun! Thanks!

×