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