Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

YUI on the go Slide 1 YUI on the go Slide 2 YUI on the go Slide 3 YUI on the go Slide 4 YUI on the go Slide 5 YUI on the go Slide 6 YUI on the go Slide 7 YUI on the go Slide 8 YUI on the go Slide 9 YUI on the go Slide 10 YUI on the go Slide 11 YUI on the go Slide 12 YUI on the go Slide 13 YUI on the go Slide 14 YUI on the go Slide 15 YUI on the go Slide 16 YUI on the go Slide 17 YUI on the go Slide 18 YUI on the go Slide 19 YUI on the go Slide 20 YUI on the go Slide 21 YUI on the go Slide 22 YUI on the go Slide 23 YUI on the go Slide 24 YUI on the go Slide 25 YUI on the go Slide 26 YUI on the go Slide 27 YUI on the go Slide 28 YUI on the go Slide 29 YUI on the go Slide 30 YUI on the go Slide 31 YUI on the go Slide 32 YUI on the go Slide 33 YUI on the go Slide 34 YUI on the go Slide 35 YUI on the go Slide 36 YUI on the go Slide 37 YUI on the go Slide 38 YUI on the go Slide 39 YUI on the go Slide 40 YUI on the go Slide 41 YUI on the go Slide 42 YUI on the go Slide 43 YUI on the go Slide 44 YUI on the go Slide 45 YUI on the go Slide 46 YUI on the go Slide 47 YUI on the go Slide 48 YUI on the go Slide 49 YUI on the go Slide 50 YUI on the go Slide 51 YUI on the go Slide 52 YUI on the go Slide 53 YUI on the go Slide 54 YUI on the go Slide 55 YUI on the go Slide 56 YUI on the go Slide 57 YUI on the go Slide 58 YUI on the go Slide 59 YUI on the go Slide 60 YUI on the go Slide 61 YUI on the go Slide 62 YUI on the go Slide 63 YUI on the go Slide 64 YUI on the go Slide 65 YUI on the go Slide 66 YUI on the go Slide 67 YUI on the go Slide 68
Upcoming SlideShare
Yui- Yahoo! User Interface Library
Next
Download to read offline and view in fullscreen.

10 Likes

Share

Download to read offline

YUI on the go

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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!
  • ijliao

    Apr. 23, 2014
  • maverickpuss

    Dec. 2, 2013
  • zetaj

    Nov. 19, 2011
  • princeverma

    Mar. 5, 2008
  • lietus

    Mar. 3, 2008
  • charliez

    Feb. 21, 2008
  • pgrous

    Dec. 27, 2007
  • renatoalbano

    Dec. 13, 2007
  • hubslides

    Dec. 10, 2007
  • manikandakumar

    Dec. 7, 2007

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.

Views

Total views

13,211

On Slideshare

0

From embeds

0

Number of embeds

391

Actions

Downloads

217

Shares

0

Comments

0

Likes

10

×