The Once And Future Script Loader (v1)

2,233 views

Published on

A look at the history, current state, and hopeful future state of script loading in browsers.

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

No Downloads
Views
Total views
2,233
On SlideShare
0
From Embeds
0
Number of Embeds
425
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The Once And Future Script Loader (v1)

  1. 1. The Once and Future Script Loader Kyle Simpson @getify http://getify.me
  2. 2. where… we were we are now we’re going next
  3. 3. where…we were once upon a time, in a browser far, far away…
  4. 4. <script src=&quot;…&quot;></script> where…we were
  5. 5. <script src=&quot;…&quot;></script> where…we were <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> …
  6. 6. Why not just combine all your files? where…we were <ul><li>different pages, different scripts </li></ul><ul><li>cacheability </li></ul><ul><li>parallel loading </li></ul><ul><li>on-demand/lazy-loading </li></ul>
  7. 7. where…we were <script> tags block. bad. evil.
  8. 8. where…we were IE7-, FF3-, Chr 1...
  9. 9. where…we were IE8, FF3.5/3.6, Chr 11-
  10. 10. where…we were IE9, FF4 Script Loaders
  11. 11. where…we were What do <script> tags block, and why ? <ul><li>other <script> tags </li></ul><ul><li>other content (loading & rendering) </li></ul><ul><li>DOM-ready </li></ul>
  12. 12. where…we were document.write()
  13. 13. where…we were document.write() Must Die!
  14. 14. <script> tags also suck because... <ul><li>browser-specific scripts </li></ul><ul><li>conditional loading/URLs </li></ul><ul><li>event handling </li></ul>where…we were
  15. 15. So, we need a script loader, huh? where…we were
  16. 16. where…we were The very first script loader? document.write(&quot;<script src='...'></sc&quot;+&quot;ript>&quot;);
  17. 17. where…we were w ho- tf ? ...and still many ad providers, 3rd party widgets, etc.
  18. 18. Other attempts at script loading where…we were
  19. 19. where…we were Loading script in <iframe>? ugh. What about with XHR?
  20. 20. where…we were Making progress... but not there yet
  21. 21. where…we were Framework-specific loaders... ...just stink
  22. 22. where…we were Not for the faint of heart
  23. 23. General Script Loaders (1st gen) where…we were
  24. 24. where…we were A general script loader should : <ul><li>load any script, not just some , at any time, from anywhere [forget document.write()] </li></ul><ul><li>have performance >= <script> in modern browsers </li></ul><ul><li>equivalent behavior in all browsers </li></ul>
  25. 25. where…we were A general script loader should also : <ul><li>avoid: hacks, UA sniffing </li></ul><ul><li>feature-detect </li></ul><ul><li>have as few exception-cases as possible </li></ul>
  26. 26. where…we were General script loader feature creep: <ul><li>trying to handle document.write() </li></ul><ul><li>loading CSS or other resources </li></ul><ul><li>&quot;dependency management&quot; </li></ul><ul><li>messing with DOM-ready </li></ul>
  27. 27. A young leader? LABjs where…we were
  28. 28. LABjs: performance script loader where…we were
  29. 29. where…we were LABjs: performance script loader
  30. 30. where…we were Other early contenders <ul><li>nbl </li></ul><ul><li>Dominoes </li></ul><ul><li>... </li></ul>
  31. 31. where…we were What was wrong with LABjs (& others) ? <ul><li>ugly source code </li></ul><ul><li>lots of hacks </li></ul><ul><li>exception cases </li></ul><ul><li>brittle (not future proof) </li></ul>
  32. 32. where…we were LABjs 2.0 <ul><li>nicer source code </li></ul><ul><li>future proof feature detects </li></ul><ul><li>fewer exception cases </li></ul><ul><li>better performance </li></ul>http://github.com/getify/LABjs/tree/master/next
  33. 33. Anyone can write a loader! where…we are now (and many devs have)
  34. 34. where…we are now https://spreadsheets0.google.com/spreadsheet/ccc?key=tDdcrv9wNQRCNCRCflWxhYQ
  35. 35. Loaders are competing more on APIs than on features or performance where…we are now
  36. 36. But, can their functionality be trusted? where…we are now
  37. 37. where…we are now Testing is much harder than you (and they!) probably realize
  38. 38. where…we are now &quot;Browser support&quot; is not a universally agreed upon measurement
  39. 39. where…we are now Exception cases are either ignored or overlooked, more than they admit
  40. 40. where…we are now Functionality based heavily on hacks and browser sniffs, not feature detects
  41. 41. where…we are now End users have no clue, they trust what the docs say
  42. 42. Appears friendly and civilized where…we are now
  43. 43. Actually ugly and dangerous where…we are now
  44. 44. What happens now? where…we're going next
  45. 45. Competition is good, only if community is educated on what to look for where…we're going next
  46. 46. http://Pick A Loader.com where…we're going next
  47. 47. The browser doesn't yet give us what today's web needs for script loading where…we're going next
  48. 48. Co-opetition is much healthier for the future of script loading where…we're going next
  49. 49. Only script loaders which participate in defining the future will survive where…we're going next
  50. 50. W3C, WHATWG where…we're going next http://wiki.whatwg.org/wiki/Category:Proposals
  51. 51. async=false where…we're going next http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
  52. 52. We'll accomplish more if we work together where…we're going next
  53. 53. Advanced Script Loading where…we're going next
  54. 54. Preloading where…we're going next (deferred execution)
  55. 55. Modules where…we're going next (CommonJS, AMD, etc)
  56. 56. Native Modules where…we're going next (ES-Harmony?)
  57. 57. &quot;Script Loader of my dreams&quot; where…we're going next
  58. 59. True Preloading where…we're going next http://wiki.whatwg.org/wiki/Script_Execution_Control
  59. 60. IE4+ ftw? where…we're going next
  60. 61. What else...? where…we're going next
  61. 62. And now for something completely different... Questions?
  62. 63. http://pickaloader.com Kyle Simpson @getify http://getify.me http://labjs.com http://wiki.whatwg.org/wiki/Category:Proposals

×