SlideShare ist ein Scribd-Unternehmen logo
1 von 64
Downloaden Sie, um offline zu lesen
YUI 3 Loading Strategies Caridy Patino / @caridy Frontend Engineer Yahoo! Search YUI Evangelist
Evolution
 
 
developer.yahoo.com/performance/rules.html
Put Scripts at Bottom
Minimize HTTP Requests
Use a Content Delivery Network (CDN)
 
JS Loader Frameworks changed the game
YUI  LABjs   HeadJS  ControlJS RequireJS  Load.js YepNope.js  $script.js LazyLoad  curl.js DeferJS   jquery.defer.js   jQl DominateJS   JSL Bootstrap   StealJS bdLoad   NBL.js https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=0
 
dd, substitute and slider tabview, oop, event, node, widget, etc yui seed loader
Static Combo Strategy
 
 
Data-driven initialization routine
Using app-rollout files
Using app-rollout files
Rollout  vs  Loader
Rollout Composition Library Plugins Custom Init.js
A big app-rollout takes more time to download and can potentially freeze the browser
Simple rollout
Interactivity Core & Lazy Components
 
Defining the interactivity core is crucial
 
Core and Lazy Components core rollout lazy components
Parallel Download Strategy
Get app-rollout early without compromising domready and onload
“ Ideal Solution”
 
Parallel Download: Challenges ,[object Object],[object Object],[object Object]
Event Binder Strategy
Time to Interactivity
Time to Interactivity
Users should be able to interact with the page at any time
Catch and hold  some  events until the handler become available
But, doing so  without  increasing the complexity of the application
yuilibrary.com/gallery/show/event-binder
Event Binder: Features ,[object Object],[object Object]
Event-driven Module Loading
Regular YUI 3 Module
Event-driven Module Loading
Early Event Binding
Early Event Binding
 
iFrame Strategy
Plug & Play Widgets
A Plug & Play Widget is an independent piece of software that can run on any page
Widgets: Challenges ,[object Object],[object Object],[object Object]
A YUI instance can be tailored to work off a different document
yuilibrary.com/gallery/show/parent-window
Injecting a widget using an iframe
widget-app-rollout.js
Preload Strategy
http://www.linkedin.com/jsearch
Preload: Features ,[object Object],[object Object]
Stay ahead of the users  without  increasing the complexity of the app
yuilibrary.com/gallery/show/preload
 
 
…  some more thoughts ,[object Object],[object Object],[object Object],[object Object],[object Object]
Thanks! Caridy Patino http://github.com/caridy http://twitter.com/caridy

Weitere ähnliche Inhalte

Ähnlich wie JS Loading strategies

Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Artur Cistov
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.Arshak Movsisyan
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019
Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019
Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019Codemotion
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityAshok Modi
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahooguestb1b95b
 
Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSScalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSGalih Pratama
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applicationsMilan Korsos
 
JavaScriptMVC vs GI vs GWT
JavaScriptMVC vs GI vs GWTJavaScriptMVC vs GI vs GWT
JavaScriptMVC vs GI vs GWTowenpengtao
 
Android
AndroidAndroid
Androidscottw
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)Steve Souders
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesStoyan Stefanov
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest servicesIoan Eugen Stan
 
API Doc Smackdown
API Doc SmackdownAPI Doc Smackdown
API Doc SmackdownTed Husted
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 

Ähnlich wie JS Loading strategies (20)

Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
Droidcon Paris 2015
Droidcon Paris 2015Droidcon Paris 2015
Droidcon Paris 2015
 
Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019
Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019
Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019
 
Yii php framework_honey
Yii php framework_honeyYii php framework_honey
Yii php framework_honey
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSScalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JS
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
JavaScriptMVC vs GI vs GWT
JavaScriptMVC vs GI vs GWTJavaScriptMVC vs GI vs GWT
JavaScriptMVC vs GI vs GWT
 
Android
AndroidAndroid
Android
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
API Doc Smackdown
API Doc SmackdownAPI Doc Smackdown
API Doc Smackdown
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 

Mehr von Caridy Patino

MiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptMiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptCaridy Patino
 
CSP Level 2: Defensa en profundidad para aplicaciones Web
CSP Level 2: Defensa en profundidad para aplicaciones WebCSP Level 2: Defensa en profundidad para aplicaciones Web
CSP Level 2: Defensa en profundidad para aplicaciones WebCaridy Patino
 
The rise of single-page applications
The rise of single-page applicationsThe rise of single-page applications
The rise of single-page applicationsCaridy Patino
 
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" ProjectYUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" ProjectCaridy Patino
 
FOWA2013: The rise of single page applications
FOWA2013: The rise of single page applicationsFOWA2013: The rise of single page applications
FOWA2013: The rise of single page applicationsCaridy Patino
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoCaridy Patino
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
YUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI DevelopersYUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI DevelopersCaridy Patino
 
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screensBayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screensCaridy Patino
 
HTML5 summit - DevCon5 - Miami - Feb 2, 2012
HTML5 summit - DevCon5 - Miami - Feb 2, 2012HTML5 summit - DevCon5 - Miami - Feb 2, 2012
HTML5 summit - DevCon5 - Miami - Feb 2, 2012Caridy Patino
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSCaridy Patino
 
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010Caridy Patino
 

Mehr von Caridy Patino (12)

MiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptMiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScript
 
CSP Level 2: Defensa en profundidad para aplicaciones Web
CSP Level 2: Defensa en profundidad para aplicaciones WebCSP Level 2: Defensa en profundidad para aplicaciones Web
CSP Level 2: Defensa en profundidad para aplicaciones Web
 
The rise of single-page applications
The rise of single-page applicationsThe rise of single-page applications
The rise of single-page applications
 
YUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" ProjectYUIConf2013: Introducing The "Modown" Project
YUIConf2013: Introducing The "Modown" Project
 
FOWA2013: The rise of single page applications
FOWA2013: The rise of single page applicationsFOWA2013: The rise of single page applications
FOWA2013: The rise of single page applications
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
YUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI DevelopersYUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI Developers
 
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screensBayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screens
 
HTML5 summit - DevCon5 - Miami - Feb 2, 2012
HTML5 summit - DevCon5 - Miami - Feb 2, 2012HTML5 summit - DevCon5 - Miami - Feb 2, 2012
HTML5 summit - DevCon5 - Miami - Feb 2, 2012
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
 
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
 

JS Loading strategies