YUI 3 Loading Strategies

Caridy Patino / @caridyFrontend EngineerYahoo! SearchYUI 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., “mod-name-ie”)

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

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

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

2in3

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

• Split the app-rollout into multiple and balanced files

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 the widget CSS in a sandbox

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/src15:25:59 none:src $ grep -rinl "document\." */js/*.js

gallery-accordion/js/gallery-accordion-item.jsgallery-accordion/js/gallery-accordion.jsgallery-aui-autocomplete/js/gallery-aui-autocomplete.jsgallery-aui-base/js/gallery-aui-core.jsgallery-aui-chart/js/gallery-aui-chart.jsgallery-aui-color/js/gallery-aui-color.jsgallery-aui-dialog/js/gallery-aui-dialog.jsgallery-aui-editable/js/gallery-aui-editable.js.jsgallery-boxshadow-anim/js/boxshadow-anim.jsgallery-charts/js/Renderer.jsgallery-dimensions/js/Dimensions.jsgallery-event-pasted/js/pasted.jsgallery-exprbuilder/js/ExpressionBuilder.jsgallery-formvalidator/js/BaseInputField.jsgallery-lightbox/js/lightbox.jsgallery-modernizr/js/modernizr.jsgallery-notifications/js/notifications.jsgallery-overlay-extras/js/overlay-extras.jsgallery-overlay-modal/js/overlay-modal.jsgallery-scrollintoview/js/ScrollIntoView.jsgallery-simple-editor/js/simple-editor.jsgallery-simple-editor/js/toolbar.jsgallery-speedns/js/speedns.jsgallery-stalker/js/gallery-stalker.jsgallery-tabby/js/tabby.jsgallery-textarea-counter/js/textarea-counter.jsgallery-treeview/js/Node.jsgallery-treeview/js/TextNode.jsgallery-treeview/js/TreeViewEd.jsgallery-treeview/js/TreeView.js

/var/node/yui3-gallery/src15:28:13 none:src $ grep -rinl "window\." */js/*.js

gallery-aui-node-html5-print/js/gallery-aui-node-html5-print.jsgallery-beforeunload/js/beforeunload.jsgallery-history-lite/js/history-lite.jsgallery-markout/js/markout.jsgallery-modernizr/js/modernizr.jsgallery-notifications/js/notifications.jsgallery-parent-window/js/gallery-parent-window.jsgallery-sandbox/js/sandbox.jsgallery-scrollintoview/js/ScrollIntoView.jsgallery-shoveler/js/shoveler.jsgallery-simple-editor/js/simple-editor.jsgallery-treeview/js/TreeView.js

…a mental note

… 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

Thanks!

Caridy Patinohttp://github.com/caridyhttp://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 including them

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: Preload CSS/JS without execution http://www.phpied.com/preload-cssjavascript-without-execution/

- Stoyan: Preload, then execute http://www.phpied.com/preload-then-execute/