YUI 3 Loading Strategies
Caridy Patino / @caridy
Frontend Engineer
Yahoo! Search
YUI Evangelist
… since YUIConf 2009
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g...
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g...
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g...
YUI Loading Strategy
Evolution
developer.yahoo.com/performance/rules.html
…YUI3 changes the game
YUI < 3.3.0 Loader Limitations
- Concurrent loading
- Queueing and aggregation
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 Y.use()
Rollout Composition
YUI
Core
Gallery
2in
3
Custom
Init.js
A big app-rollout takes
more time to download
and can potentially freeze
the browser
SimpleYUI is a rollout
github.com/yui/yui3/tree/master/
src/simpleyui/concat.sh
Interactivity Core & Lazy
Components
Defining the interactivity
core will help to reduce the
app-rollout size through
lazy components
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
• Produce a VERY tiny non-blocking bootstrap
• Avoid blocking onload with app-rollout
• Spli...
Event Binder Strategy
Time to Interactivity
Timeline
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
- Event-driven Module Loading
- Early Event Binding
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
- Inject the widget without degrading the host page
- Keep the widget JavaScript in a sandbox
- Keep t...
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
Modules using document and
window
Use “Y.config.win”
and “Y.config.doc” instead.
/var/node/yui3-gallery/src
15:25:59 none:...
…a mental note
… some more thoughts
- Optimize only if it doesn’t add complexity to your app
- Granularity is good for optimization
- Rol...
Thanks!
Caridy Patino
http://github.com/caridy
http://twitter.com/caridy
Bonus Section
Preload Strategy
http://www.linkedin.com/jsearch
Preload: Features
- Store static JS assets in cache
without executing them
- Store static CSS assets in cache
without incl...
Stay ahead of the users
without increasing the
complexity of the app
yuilibrary.com/gallery/show/preload
Preload: Implementation
- (new Image()).src = f; // for IE
- doc.createElement('object').data = f; // for others
- Stoyan:...
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
YUI 3 Loading Strategies - YUIConf2010
Upcoming SlideShare
Loading in …5
×

YUI 3 Loading Strategies - YUIConf2010

5,881 views

Published on

A robust loading strategy is one of the most important pieces when you think about optimization for high traffic websites. YUI Loader is a wonderful piece of software, and learning how to leverage it is a MUST-HAVE for YUI developers. Dynamic injections, controlling early user interactions, parallel downloads, preloading asssets, and window-iframe loading strategies are some of the topics that Caridy will cover in this presentation.

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,881
On SlideShare
0
From Embeds
0
Number of Embeds
141
Actions
Shares
0
Downloads
75
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

YUI 3 Loading Strategies - YUIConf2010

  1. 1. YUI 3 Loading Strategies Caridy Patino / @caridy Frontend Engineer Yahoo! Search YUI Evangelist
  2. 2. … since YUIConf 2009
  3. 3. What has changed since 2009? - YUI().use ( ‘gallery-yui2’ )
  4. 4. What has changed since 2009? - YUI().use ( ‘gallery-yui2’ ) - YUI 2in3 Project: Y.use(‘yui2-*’)
  5. 5. What has changed since 2009? - YUI().use ( ‘gallery-yui2’ ) - YUI 2in3 Project: Y.use(‘yui2-*’) - Conditional loading (e.g., “mod-name-ie”)
  6. 6. What has changed since 2009? - YUI().use ( ‘gallery-yui2’ ) - YUI 2in3 Project: Y.use(‘yui2-*’) - Conditional loading (e.g., “mod-name-ie”) - Fast Boot & _YUI
  7. 7. What has changed since 2009? - YUI().use ( ‘gallery-yui2’ ) - YUI 2in3 Project: Y.use(‘yui2-*’) - Conditional loading (e.g., “mod-name-ie”) - Fast Boot & _YUI - SimpleYUI
  8. 8. YUI Loading Strategy Evolution
  9. 9. developer.yahoo.com/performance/rules.html
  10. 10. …YUI3 changes the game
  11. 11. YUI < 3.3.0 Loader Limitations - Concurrent loading - Queueing and aggregation
  12. 12. dd, substitute and slider tabview, oop, event, node, widget, etc yui seed loader
  13. 13. Static Combo Strategy
  14. 14. Data-driven initialization routine
  15. 15. Using app-rollout files
  16. 16. Using app-rollout files
  17. 17. Rollout vs Y.use()
  18. 18. Rollout Composition YUI Core Gallery 2in 3 Custom Init.js
  19. 19. A big app-rollout takes more time to download and can potentially freeze the browser
  20. 20. SimpleYUI is a rollout
  21. 21. github.com/yui/yui3/tree/master/ src/simpleyui/concat.sh
  22. 22. Interactivity Core & Lazy Components
  23. 23. Defining the interactivity core will help to reduce the app-rollout size through lazy components
  24. 24. Core and Lazy Components core rollout lazy components
  25. 25. Parallel Download Strategy
  26. 26. Get app-rollout early without compromising domready and onload
  27. 27. “Ideal Solution”
  28. 28. Parallel Download: Challenges • Produce a VERY tiny non-blocking bootstrap • Avoid blocking onload with app-rollout • Split the app-rollout into multiple and balanced files
  29. 29. Event Binder Strategy
  30. 30. Time to Interactivity
  31. 31. Timeline
  32. 32. Users should be able to interact with the page at any time
  33. 33. Catch and hold some events until the handler become available
  34. 34. But, doing so without increasing the complexity of the application
  35. 35. yuilibrary.com/gallery/show/event-binder
  36. 36. Event Binder: Features - Event-driven Module Loading - Early Event Binding
  37. 37. Event-driven Module Loading
  38. 38. Regular YUI 3 Module
  39. 39. Event-driven Module Loading
  40. 40. Early Event Binding
  41. 41. Early Event Binding
  42. 42. iFrame Strategy
  43. 43. Plug & Play Widgets
  44. 44. A Plug & Play Widget is an independent piece of software that can run on any page
  45. 45. Widgets: Challenges - Inject the widget without degrading the host page - Keep the widget JavaScript in a sandbox - Keep the widget CSS in a sandbox
  46. 46. A YUI instance can be tailored to work off a different document
  47. 47. yuilibrary.com/gallery/show/parent-window
  48. 48. Injecting a widget using an iframe
  49. 49. widget-app-rollout.js
  50. 50. Modules using document and window Use “Y.config.win” and “Y.config.doc” instead. /var/node/yui3-gallery/src 15:25:59 none:src $ grep -rinl "document." */js/*.js gallery-accordion/js/gallery-accordion-item.js gallery-accordion/js/gallery-accordion.js gallery-aui-autocomplete/js/gallery-aui-autocomplete.js gallery-aui-base/js/gallery-aui-core.js gallery-aui-chart/js/gallery-aui-chart.js gallery-aui-color/js/gallery-aui-color.js gallery-aui-dialog/js/gallery-aui-dialog.js gallery-aui-editable/js/gallery-aui-editable.js.js gallery-boxshadow-anim/js/boxshadow-anim.js gallery-charts/js/Renderer.js gallery-dimensions/js/Dimensions.js gallery-event-pasted/js/pasted.js gallery-exprbuilder/js/ExpressionBuilder.js gallery-formvalidator/js/BaseInputField.js gallery-lightbox/js/lightbox.js gallery-modernizr/js/modernizr.js gallery-notifications/js/notifications.js gallery-overlay-extras/js/overlay-extras.js gallery-overlay-modal/js/overlay-modal.js gallery-scrollintoview/js/ScrollIntoView.js gallery-simple-editor/js/simple-editor.js gallery-simple-editor/js/toolbar.js gallery-speedns/js/speedns.js gallery-stalker/js/gallery-stalker.js gallery-tabby/js/tabby.js gallery-textarea-counter/js/textarea-counter.js gallery-treeview/js/Node.js gallery-treeview/js/TextNode.js gallery-treeview/js/TreeViewEd.js gallery-treeview/js/TreeView.js /var/node/yui3-gallery/src 15:28:13 none:src $ grep -rinl "window." */js/*.js gallery-aui-node-html5-print/js/gallery-aui-node-html5-print.js gallery-beforeunload/js/beforeunload.js gallery-history-lite/js/history-lite.js gallery-markout/js/markout.js gallery-modernizr/js/modernizr.js gallery-notifications/js/notifications.js gallery-parent-window/js/gallery-parent-window.js gallery-sandbox/js/sandbox.js gallery-scrollintoview/js/ScrollIntoView.js gallery-shoveler/js/shoveler.js gallery-simple-editor/js/simple-editor.js gallery-treeview/js/TreeView.js
  51. 51. …a mental note
  52. 52. … some more thoughts - Optimize only if it doesn’t add complexity to your app - Granularity is good for optimization - Rollouts can help you to control the loading process - Focus on the bottle necks that affect the majority of your users - Work on the user perception
  53. 53. Thanks! Caridy Patino http://github.com/caridy http://twitter.com/caridy
  54. 54. Bonus Section
  55. 55. Preload Strategy
  56. 56. http://www.linkedin.com/jsearch
  57. 57. Preload: Features - Store static JS assets in cache without executing them - Store static CSS assets in cache without including them
  58. 58. Stay ahead of the users without increasing the complexity of the app
  59. 59. yuilibrary.com/gallery/show/preload
  60. 60. Preload: Implementation - (new Image()).src = f; // for IE - doc.createElement('object').data = f; // for others - Stoyan: Preload CSS/JS without execution http://www.phpied.com/preload-cssjavascript-without-execution/ - Stoyan: Preload, then execute http://www.phpied.com/preload-then-execute/

×