How late is later?

A lazy loading solution on the edge between very clever and incredibly mad." " Massimiliano Marcon" @mmarcon" " frontendconf.ch • September 7th 2012

What I do at Nokia Maps

I " LAZY " LOADING

WTF !!1!!! !! !!2!!! !! !!3!!!! !!4!!! !! !!5!!!!! !!6!!!!! !!7!!!! !!8!!! !! !!9!!! !! !10!!! !! !11!!! !! !12!!!!! !13!! !!

Not good either !1!! !!

The problem The amount of code the browser loads affects performance and influences the perceived loading time.

LESS CODE TO LOAD

Is all that code really necessary? NO!

THE STORY OF A HAPPY USER

I, as a user… Open my browser and start typing a URL in my address bar.

Bootstrap ASAP 1!

Dude, that was fast!

2! Enrich the Experience

3! Load remaining code on demand

Load shims on demand

1!Bootstrap ! 2!Enrich! 3!On Demand!

WHERE EVERYTHING BEGAN

No content

…possibly load UI components on demand •  What does on demand mean?

“In distributed computing, code on demand is a general term for any technology that sends executable software code from a server computer to a client computer upon request from the client's software” ― Wikipedia

HOW CAN WE DO IT?

Require.js Modules ON DEMAND Dependencies

callback-require !1!!require(['require',! !! !2!!!!!!!!!!!'modules/3rd:party/jquery'],!function(require,!$)!{! !! !3!!!!!!$('button').on('click',!function(e){! !! !4!!!!!!!!!!require(['modules/dialog'],!function(dialog){! !! !5!!!!!!!!!!!!!!dialog.create($('

Hello!world

'),!'My!Dialog');! !! !6!!!!!!!!!!});! !! !7!!!!!!});! !! !8!!});!!

callback-require for shims !!1! !require(['require',! !! !!2! !!!!!!!!!!'modules/3rd:party/jquery'],!function(require,!$)!{! !! !!3! !! !! !!4! !!!!!var!SUPER_DUPER_APP!=!function(JSON){! !! !!5! !!!!!!!!!//Do!some!fancy!stuff!here!with!my!application.! !! !!6! !!!!!!!!!//At!this!poit!all!JSON.parse/JSON.stringify!will!be!available!for! !! !!7! !!!!!!!!!//ALL!browsers.!Isn't!that!cool?!! !! !!8! !!!!!};! !! !!9! !! !! !10! !!!!!if(typeof!JSON.parse!===!'function')!{!!! !11! !!!!!!!!!//Oh,!we've!got!native!JSON!support! !! !12! !!!!!!!!!SUPER_DUPER_APP(JSON!/*Native!one*/);! !! !13! !!!!!}! !! !14! !!!!!else!{! !! !15! !!!!!!!!!//Uhmm...!I!smell!IE!

CLEVERNESS or MADNESS?

Custom solution !1!!$(function(){! !! !2!!!!!!$('button').on('click',!function(e){! !! !3!!!!!!!!!!$.onDemand.use('dialog').done(function(dialog){! !! !4!!!!!!!!!!!!!!dialog.create($('

Hello!world

'),!'My!Dialog');! !! !5!!!!!!!!!!});! !! !6!!!!!!});! !! !7!!});!!

How does this work? !!1! !OnDemand.prototyte.firstLoad!=!function(fn,7args,7context){! !! !!2! !!!!!var!script,!deferred!=!$.Deferred(),!rv;!!! !!3! !! !! !!4! !!!!!if!(isFn(that._proxy[fn]))!{! !! !!5! !!!!!!!!!rv!=!that._proxy[fn].apply(context,!args);! !! !!6! !!!!!!!!!deferred.resolve(rv);! !! !!7! !!!!!}! !! !!8! !!!!!else!if(isObj(that._proxy[fn]))!{! !! !!9! !!!!!!!!!deferred.resolve(that._proxy[fn]);! !! !10! !!!!!}! !! !11! !!!!!else!{! !! !12! !!!!!!!!!script!=!this.fn2script(fn);! !! !13! !!!!!!!!!if!(!script)!{! !! !14! !!!!!!!!!!!!!return;! !! !15! !!!!!!!!!}! !! !16! !!!!!!!!!$.getScript(script).done(function(){!!! !17! !!!!!!!!!!!!!var!rv;! !! !18! !!!!!!!!!!!!!if!(isFn(that._proxy[fn]))!{! !! !19! !!!!!!!!!!!!!!!!!rv!=!that._proxy[fn].apply(context,!args);! !! !20! !!!!!!!!!!!!!}! !! !21! !!!!!!!!!!!!!else!if!(isObj(that._proxy[fn]))!{! !! !22! !!!!!!!!!!!!!!!!!rv!=!that._proxy[fn];! !! !23! !!!!!!!!!!!!!}! !! !24! !!!!!!!!!!!!!deferred.resolve(rv);! !! !25! !!!!!!!!!}).fail(function(){! !! !26! !!!!!!!!!!!!!deferred.reject('OnDemand!failed!to!load!script!'!!+!script);! !! !27! !!!!!!!!!});!!! !28! !!!!!}! !! !29! !!!!!return!deferred.promise();! !! !30! !};! !!4! !!!!!if!(isFn(that._proxy[fn]))!{! !! !!5! !!!!!!!!!rv!=!that._proxy[fn].apply(context,!args);! !!6! !!!!!!!!!deferred.resolve(rv);! !! !!7! !!!!!}! !! !!8! !!!!!else!if(isObj(that._proxy[fn]))!{! !! !!9! !!!!!!!!!deferred.resolve(that._proxy[fn]);!!! !10! !!!!!}!! !16! !!!!!!!!!$.getScript(script).done(function(){! !! !17! !!!!!!!!!!!!!var!rv;! !! !18! !!!!!!!!!!!!!if!(isFn(that._proxy[fn]))!{! !! !19! !!!!!!!!!!!!!!!rv!=!that._proxy[fn].apply(context,!args);!!! !20! !!!!!!!!!!!!!}! !! !21! !!!!!!!!!!!!!else!if!(isObj(that._proxy[fn]))!{! !! !22! !!!!!!!!!!!!!!!!!rv!=!that._proxy[fn];! !! !23! !!!!!!!!!!!!!}! !! !24! !!!!!!!!!!!!!deferred.resolve(rv);! !! !25! !!!!!!!!!})!

PERFORMANCE

“0.1 second is about the limit for having the user feel that the system is reacting instantaneously…” ― Nielsen, Usability Engineering

Let’s relax the definition of" on demand •  On demand is not strictly on click. •  On demand is right before we expect the code to be needed.

BEYOND MADNESS

window.performance !1! !//!returns!a!duration!in!milliseconds! !! !2! !function!getUserPerceivedLoadingTime()!{! !! !3! !!!return!!! !4! !!!!!window.performance.timing.loadEventStart!!! !5! !!!!!!:!window.performance.timing.navigationStart;! !! !6! !}; !! http://j.mp/w3c-window-performance

Q&A

DO IT. DO IT WISELY.

If you are interested in these slides and some other material related to this presentation just follow @mmarcon." Feedback: http://j.mp/rate-mmarcon

Thank you.