YUI 3 Loading Strategies - YUIConf2010

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’ )

YUI 2in3 Project: Y.use(‘yui2-*’)

- YUI 2in3 Project: Y.use(‘yui2-*’)
Conditional loading (e.g., “mod-name-ie”)

Fast Boot & _YUI

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

Rollout vs Y.use()

Rollout Composition YUI Core Gallery 2in3 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
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

Regular YUI 3 Module

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

… 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 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 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/

http://lanyrd.com	41
http://speakerrate.com	13

YUI 3 Loading Strategies - YUIConf2010

by Caridy Patino on Nov 10, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 54

Statistics

YUI 3 Loading Strategies - YUIConf2010 — Presentation Transcript