SlideShare a Scribd company logo
1 of 65
T he   O nce and   F uture   S cript   L oader Kyle Simpson @getify http://getify.me
where…we  were once upon a time, in a browser far, far away…
<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> <script src=&quot;…&quot;></script> … where…we  were
Why not just combine all your files? ,[object Object],[object Object],[object Object],[object Object],where…we  were
<script> tags block. bad. evil. where…we  were
What  do <script> tags block, and  why ? ,[object Object],[object Object],[object Object],where…we  were
IE7-, FF3-, Opera where…we  were
IE8, FF3.5/3.6, Chr 14- where…we  were
IE9+, FF4+ Script Loaders where…we  were
document.write() where…we  were
document.write() Must Die! where…we  were
<script> tags also suck because... ,[object Object],[object Object],[object Object],where…we  were
The very first script loader? document.write(&quot;<script src='...'></sc&quot;+&quot;ript>&quot;); where…we  were
w ho- tf ? ...and  still  many ad providers, 3rd party widgets, etc. where…we  were
Surely we can do better!? where…we  were
XHR? where…we  were
Framework-specific loaders... ...just stink where…we  were
Making progress... but not  there  yet where…we  were
What's hard about script loading? where…we  were
A general script loader  should : ,[object Object],[object Object],[object Object],where…we  were
A general script loader should  also : ,[object Object],[object Object],[object Object],where…we  were
General script loader  feature creep: ,[object Object],[object Object],[object Object],[object Object],where…we  were
[object Object],[object Object],Script loading requires: where…we  were
<script> tags (even dynamically created) give you  no  control over loading  or  execution where…we  were
The spec says that dynamic scripts should load  and  run ASAP  (not ordered) umm... where…we  were
All current browser versions except Opera (but soon!) follow the spec uh oh where…we  were
Some  older browsers execute in order, some don't doh! Some  older browsers load in parallel, some don't where…we  were
Not for the faint of heart where…we  were
A young leader? LABjs where…we  were
LABjs:  performance  script loader where…we  were
where…we  were LABjs:  performance  script loader
What  was  wrong with LABjs? ,[object Object],[object Object],[object Object],[object Object],where…we  were
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
They're also copying each other  (good and bad) where…we are   now
But, can their  functionality  be trusted? where…we are  now
Testing is  much  harder than most realize where…we are   now
&quot;Browser support&quot; is vague where…we are   now
Exception cases often ignored or overlooked where…we are   now
Browser Sniffs, Hacks where…we are   now
What  should  a loader do? where…we are  now
Real Preloading http://wiki.whatwg.org/wiki/Script_Execution_Control where…we are   now
IE4+ ftw?  where…we are   now
async=false http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order Ordered Async FF4+, Chr 12+, IE10p2+, Webkit/Safari, Opera (soon!) where…we are   now
[object Object],[object Object],[object Object],[object Object],How? where…we are   now
LABjs 2.0 ,[object Object],[object Object],[object Object],[object Object],http://labjs.com/releasenotes.php where…we are   now
What happens next? where…we're going  next
Competition is good,  only  if community is educated where…we're going  next
http://Pick A Loader.com where…we're going   next (coming soon)
Browsers do not  yet  give us what we  really  need where…we're going  next
Co-opetition is much healthier for the community where…we're going   next
Only script loaders which help build the future  will survive  where…we're going   next
W3C, WHATWG  http://wiki.whatwg.org/wiki/Category:Proposals where…we're going   next
We'll accomplish more if we work together where…we're going  next
Future, The Script Loader where…we're going  next
Preloading  (deferred execution) where…we're going   next
Modules  (CommonJS, AMD, etc) where…we're going   next
Native Modules (ES-Harmony?) where…we're going   next
 
&quot;Script Loader of my dreams&quot; where…we're going  next
[object Object],[object Object],[object Object],[object Object],What else?  where…we're going   next
And now for something completely different... Questions?
http://pickaloader.com   Kyle Simpson @getify http://getify.me http://labjs.com  http://wiki.whatwg.org/wiki/Category:Proposals

More Related Content

What's hot

What's hot (18)

Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
 
GopherCon 2014 Recap for Melbourne Go Group
GopherCon 2014 Recap for Melbourne Go GroupGopherCon 2014 Recap for Melbourne Go Group
GopherCon 2014 Recap for Melbourne Go Group
 
Dear compiler please don't be my nanny v2
Dear compiler  please don't be my nanny v2Dear compiler  please don't be my nanny v2
Dear compiler please don't be my nanny v2
 
Comments: Why not What
Comments: Why not WhatComments: Why not What
Comments: Why not What
 
Mastermind 10th march full page cache
Mastermind 10th march   full page cacheMastermind 10th march   full page cache
Mastermind 10th march full page cache
 
JavaScript development methodology
JavaScript development methodologyJavaScript development methodology
JavaScript development methodology
 
The Front End Testing Frontier - RubyConf 2010
The Front End Testing Frontier - RubyConf 2010The Front End Testing Frontier - RubyConf 2010
The Front End Testing Frontier - RubyConf 2010
 
Firefox OS something 201411
Firefox OS something 201411Firefox OS something 201411
Firefox OS something 201411
 
Fav
FavFav
Fav
 
Os Harrison
Os HarrisonOs Harrison
Os Harrison
 
XSS Without Browser
XSS Without BrowserXSS Without Browser
XSS Without Browser
 
Lessons learned from Node.js - Callbacks / Promises
Lessons learned from Node.js - Callbacks / PromisesLessons learned from Node.js - Callbacks / Promises
Lessons learned from Node.js - Callbacks / Promises
 
Node.js Talk at jQuery Pittsburgh
Node.js Talk at jQuery PittsburghNode.js Talk at jQuery Pittsburgh
Node.js Talk at jQuery Pittsburgh
 
Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)
 
Sharelaw + Video Tips
Sharelaw + Video TipsSharelaw + Video Tips
Sharelaw + Video Tips
 
End to-End CoffeeScript
End to-End CoffeeScriptEnd to-End CoffeeScript
End to-End CoffeeScript
 
Merb presentation at ORUG
Merb presentation at ORUGMerb presentation at ORUG
Merb presentation at ORUG
 
Gatsby vs. Next.js
Gatsby vs. Next.jsGatsby vs. Next.js
Gatsby vs. Next.js
 

Similar to The Once And Future Script Loader (v2)

The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
Kyle Simpson
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
yiditushe
 

Similar to The Once And Future Script Loader (v2) (20)

The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)
 
The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Loading JavaScript: Even a caveman can do it
Loading JavaScript: Even a caveman can do itLoading JavaScript: Even a caveman can do it
Loading JavaScript: Even a caveman can do it
 
Teflon - Anti Stick for the browser attack surface
Teflon - Anti Stick for the browser attack surfaceTeflon - Anti Stick for the browser attack surface
Teflon - Anti Stick for the browser attack surface
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
 
Sxsw 20090314
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
 
DiUS Computing Lca Rails Final
DiUS  Computing Lca Rails FinalDiUS  Computing Lca Rails Final
DiUS Computing Lca Rails Final
 
Integration Testing in Python
Integration Testing in PythonIntegration Testing in Python
Integration Testing in Python
 
Devops down-under
Devops down-underDevops down-under
Devops down-under
 
hacking with node.JS
hacking with node.JShacking with node.JS
hacking with node.JS
 
Best practices in museum search
 Best practices in museum search Best practices in museum search
Best practices in museum search
 
Intro to Rails
Intro to RailsIntro to Rails
Intro to Rails
 
An Introduction to Solr
An Introduction to SolrAn Introduction to Solr
An Introduction to Solr
 
Madison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small TeamsMadison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small Teams
 
ZendCon 2015 - DevOps for Small Teams
ZendCon 2015 - DevOps for Small TeamsZendCon 2015 - DevOps for Small Teams
ZendCon 2015 - DevOps for Small Teams
 
Extjs Howto
Extjs HowtoExtjs Howto
Extjs Howto
 
CouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relaxCouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relax
 
Experts live2016 - Karim Vaes - end-to-end automation
Experts live2016 - Karim Vaes - end-to-end automationExperts live2016 - Karim Vaes - end-to-end automation
Experts live2016 - Karim Vaes - end-to-end automation
 

More from Kyle Simpson

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
Kyle Simpson
 

More from Kyle Simpson (10)

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
 
Server-side JavaScript for the rest of us
Server-side JavaScript for the rest of usServer-side JavaScript for the rest of us
Server-side JavaScript for the rest of us
 
Rise of the Middle End
Rise of the Middle EndRise of the Middle End
Rise of the Middle End
 
Dude, That's Some Strange UI Architecture
Dude, That's Some Strange UI ArchitectureDude, That's Some Strange UI Architecture
Dude, That's Some Strange UI Architecture
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
 
Dude, where's my UI architecture?
Dude, where's my UI architecture?Dude, where's my UI architecture?
Dude, where's my UI architecture?
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
 
JavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of ItJavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of It
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
 
Extending Ajax Events for all mankind
Extending Ajax Events for all mankindExtending Ajax Events for all mankind
Extending Ajax Events for all mankind
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

The Once And Future Script Loader (v2)