Post on 21-Nov-2014
description
The Once and Future Script
Loader
Kyle Simpson@getify
http://getify.me
where…we were
we are nowwe’re going
next
where…we were
once upon a time, in a browser far, far away…
<script src="…"></script>
where…we were
<script src="…"></script>
where…we were
<script src="…"></script><script src="…"></script><script src="…"></script><script src="…"></script><script src="…"></script> …
Why not just combine all your files?
where…we were
• different pages, different scripts• cacheability• parallel loading• on-demand/lazy-loading
where…we were
<script> tags block. bad. evil.
where…we were
IE7-, FF3-, Chr 1...
where…we were
IE8, FF3.5/3.6, Chr 11-
where…we were
IE9, FF4
Script Loaders
where…we were
What do <script> tags block, and why?
• other <script> tags• other content (loading & rendering)• DOM-ready
where…we were
document.write()
where…we were
document.write()
MustDie!
<script> tags also suck because...
• browser-specific scripts• conditional loading/URLs• event handling
where…we were
So, we need a script loader,
huh?
where…we were
where…we were
The very first script loader?
document.write("<script src='...'></sc"+"ript>");
where…we were
who-tf?
...and still many ad providers, 3rd party widgets, etc.
Other attempts at script loading
where…we were
where…we were
Loading script in <iframe>? ugh.
What about with XHR?
where…we were
Making progress... but not there yet
where…we were
Framework-specific loaders...
...just stink
where…we were
Not for the faint of heart
General Script Loaders (1st gen)
where…we were
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
where…we were
A general script loader should also:
• avoid: hacks, UA sniffing• feature-detect• have as few exception-cases as possible
where…we were
General script loader feature creep:
• trying to handle document.write()• loading CSS or other resources• "dependency management"• messing with DOM-ready
A young leader?
LABjs
where…we were
LABjs: performance script loader
where…we were
where…we were LABjs: performance
script loader
where…we were
Other early contenders
• nbl• Dominoes• ...
where…we were
What was wrong with LABjs (&
others)?• ugly source code• lots of hacks• exception cases• brittle (not future proof)
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
Anyone can write a loader!
where…we are now
(and many devs have)
where…we are now
https://spreadsheets0.google.com/spreadsheet/ccc?key=tDdcrv9wNQRCNCRCflWxhYQ
Loaders are competing more on
APIs than on features or performance
where…we are now
But, can their
functionality be trusted?
where…we are now
where…we are now
Testing is much harder than you (and
they!) probably realize
where…we are now
"Browser support" is not a universally
agreed upon measurement
where…we are now
Exception cases are either ignored or overlooked, more than they admit
where…we are now
Functionality based heavily on hacks and browser sniffs, not
feature detects
where…we are now
End users have no clue, they trust what
the docs say
Appears friendly and
civilized
where…we are now
Actually ugly and
dangerous
where…we are now
What happens
now?
where…we're going next
Competition is good, only if community is educated on what to
look for
where…we're going next
http://PickALoader.com
where…we're going next
The browser doesn't yet give us what
today's web needs for script loading
where…we're going next
Co-opetition is much healthier for the future of script
loading
where…we're going next
Only script loaders which participate in defining the future
will survive
where…we're going next
W3C, WHATWG
where…we're going next
http://wiki.whatwg.org/wiki/Category:Proposals
async=false
where…we're going next
http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
We'll accomplish more if we work together
where…we're going next
Advanced Script
Loading
where…we're going next
Preloading
where…we're going next
(deferred execution)
Modules
where…we're going next
(CommonJS, AMD, etc)
Native Modules
where…we're going next
(ES-Harmony?)
"Script Loader of my
dreams"
where…we're going next
True Preloading
where…we're going next
http://wiki.whatwg.org/wiki/Script_Execution_Control
IE4+ ftw?
where…we're going next
What else...?
where…we're going next
And now for something completely different...
Questions?
http://
pickaloader.com Kyle Simpson
@getifyhttp://getify.
me
http://labjs.com
http://wiki.whatwg.org/wiki/Category:Proposals