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.

1. YUI 3 Loading Strategies
Caridy Patino / @caridy
Frontend Engineer
Yahoo! Search
YUI Evangelist

2. … since YUIConf 2009

3. What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )

4. What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)

5. What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g., “mod-name-ie”)

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. 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. YUI Loading Strategy
Evolution

11. developer.yahoo.com/performance/rules.html

13. …YUI3 changes the game

15. YUI < 3.3.0 Loader Limitations
- Concurrent loading
- Queueing and aggregation

18. dd, substitute and slider
tabview, oop, event, node, widget, etc
yui seed
loader

19. Static Combo Strategy

22. Data-driven initialization routine

23. Using app-rollout files

24. Using app-rollout files

25. Rollout vs Y.use()

26. Rollout Composition
YUI
Core
Gallery
2in
3
Custom
Init.js

27. A big app-rollout takes
more time to download
and can potentially freeze
the browser

28. SimpleYUI is a rollout

29. github.com/yui/yui3/tree/master/
src/simpleyui/concat.sh

30. Interactivity Core & Lazy
Components

32. Defining the interactivity
core will help to reduce the
app-rollout size through
lazy components

34. Core and Lazy Components
core rollout
lazy components

35. Parallel Download
Strategy

37. Get app-rollout early
without compromising
domready and onload

38. “Ideal Solution”

40. 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

41. Event Binder Strategy

42. Time to Interactivity

43. Timeline

44. Users should be able to
interact with the page at
any time

45. Catch and hold some events
until the handler become
available

46. But, doing so without
increasing the complexity
of the application

47. yuilibrary.com/gallery/show/event-binder

48. Event Binder: Features
- Event-driven Module Loading
- Early Event Binding

49. Event-driven Module
Loading

50. Regular YUI 3 Module

51. Event-driven Module Loading

52. Early Event Binding

53. Early Event Binding

55. iFrame Strategy

56. Plug & Play Widgets

57. A Plug & Play Widget is
an independent piece of
software that can run on
any page

58. Widgets: Challenges
- Inject the widget without degrading the host page
- Keep the widget JavaScript in a sandbox
- Keep the widget CSS in a sandbox

59. A YUI instance can be
tailored to work off a
different document

60. yuilibrary.com/gallery/show/parent-window

61. Injecting a widget using an iframe

62. widget-app-rollout.js

63. 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

64. …a mental note

66. … 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

67. Thanks!
Caridy Patino
http://github.com/caridy
http://twitter.com/caridy

68. Bonus Section

69. Preload Strategy

71. http://www.linkedin.com/jsearch

72. Preload: Features
- Store static JS assets in cache
without executing them
- Store static CSS assets in cache
without including them

73. Stay ahead of the users
without increasing the
complexity of the app

74. yuilibrary.com/gallery/show/preload

77. 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/