More Secrets of JavaScript Libraries

More Secrets of JavaScript Libraries Nate Koechley, Andrew Dupont, Becky Gibson, John Resig 4x 10min talks with Q&A at the end.

Getting Loaded Easier development. Better performance.

Get & Loader Easier development. Better performance.

The Problems

JavaScript loading blocks page rendering.

More les increases blocking.

We know a single le is best:

But in practice...

Widgets & Plugins may have various prerequisites.

Sites often use multiple unrelated JavaScript les.

Larger projects use multiple les for exibility & optimization

Most les are order-dependent.

Other les aren’t needed right away.

And it’s nice to easily toggle between -raw.js, -min.js, and -debug.js versions.

three avors of each

fully-commented

-debug with logging

-min for deployment

So, our goals:

Features • Handle prerequisies without duplication • Manage order dependency • Per-module exibility • Fast toggling between avors • Continue fetching onDemand • Minimize HTTP requests and not block rendering

That’s what YUI’s Get & Loader Utilities do.

They’re partners.

Loader Get

Combo Loader Get Handler

Loader Get Combo The “seed” le. Parses request. Creates new nodes & src’s. Meta data. Concats modules if rst. Non-blocking. Con g options. Edge-caches. Cross-domain. Helpers/Sugar. GET not POST.

Loads anything: • Library les • Your own les • JS, CSS, JSON, ... • Urchin.js, badges, includes, ...

Easily de ne your resources

// one or more external modules // that can be loaded along side of YUI modules: { json_org: { fullpath: quot;http://www.json.org/json.jsquot; }, json2_org: { fullpath: quot;http://www.json.org/json2.jsquot; } }

And their relationships

modules: { dom: { requires: ['event'], submodules: { 'dom-base': { requires: ['event'] }, 'dom-style': { requires: ['dom-base'] }, 'dom-screen': { requires: ['dom-base', 'dom-style'] }, selector: { requires: ['dom-base'] } } },

With ne-grained control

name type path fullpath requires optional supersedes after rollup

Once the seed is on the page:

Other cool features in Get:

Choose where the nodes go.

Purge After Reading

Bene ts • Easy to use. • No typos. Less to manage. • Much faster performance. • Extensive exibility. • Nice support for lazy-loading. • Library agnostic.

nate@koechley.com developer.yahoo.com/yui/3/yui/ developer.yahoo.com/yui/3/get/ github.com/yui

Meta-Language Frameworks

The code you write is transformed before a browser consumes it

Google Web Toolkit (turns Java into JavaScript)

Pyjamas (turns Python into JavaScript)

Cappuccino (turns “Objective-J” into JavaScript)

Some of them are lightweight...

Narrative JS (adds “sleep”-like functionality to JS)

function waitForButton() { // do some work // create our notifier var notifier = new EventNotifier(); // attach our notifier to the button document.getElementById(quot;myButtonquot;).onclick = notifier; // wait for the button to be clicked notifier.wait->(); // do more work }

Google Caja (turns JavaScript into safer JavaScript)

var blogComment = document.createElement('div'); blogComment.innerHTML = quot;<b>user entered text quot; + quot;which happens to contain a script quot; + quot;tag.</b><script defer>alert('muahahaa');</scrquot; + quot;ipt>quot;; document.getElementById(quot;resultquot;).appendChild(blogComment);

___.loadModule({ 'instantiate': function (___, IMPORTS___) { var moduleResult___ = ___.NO_RESULT; var $v = ___.readImport(IMPORTS___, '$v', { 'getOuters': { '()': { } }, 'ro': { '()': { } }, 'so': { '()': { } }, 'initOuter': { '()': { } }, 'cm': { '()': { } }, 's': { '()': { } } }); var $dis = $v.getOuters(); $v.initOuter('onerror'); try { {

$v.so('blogComment', $v.cm($v.ro('document'), 'createElement', [ 'div' ])); $v.s($v.ro('blogComment'), 'innerHTML', '<b>user entered text which happens to contain a script ' + 'tag.</b><script defer>alert('muahahaa');</scr' + 'ipt>'); moduleResult___ = $v.cm($v.cm($v.ro('document'), 'getElementById', [ 'result' ]), 'appendChild', [ $v.ro('blogComment') ]); } } catch (ex___) { ___.getNewModuleHandler().handleUncaughtException(ex___, $v.ro('onerror'), 'testbed/', '2'); } return moduleResult___; }, 'cajolerName': 'com.google.caja', 'cajolerVersion': '3339M', 'cajoledDate': 1237011597543 }); }

GWT gets to use the Java toolset

Cappuccino gets to introduce new syntax and new features

Let’s say you want Ruby-style “catch-all” methods

object.methodName(arg);

object.callMethod(quot;methodNamequot;, arg);

[object methodName];

Fine, but now you’re more distant from the code

Harder to debug

Longer feedback loop

It’s a thicker abstraction

John’s blog post http://is.gd/bKwl

Abstractions leak... what happens when stu goes wrong?

Francisco’s Response http://is.gd/aJ36

All frameworks are abstractions

Yeah, abstractions leak, but we all use them anyway

MORAL:

Abstractions are trade-o s

Thicker abstractions have more hassle, but o er greater rewards

Which way should you go?

Think about up-front cost and ongoing cost

Use what makes sense to your head

Consider: We’re “stuck” with JavaScript

!quot;#$%&'($)%*++quot;,,-.-$-/0 1quot;+20%3-.,'4 5'6'%*++quot;,,-.-$-/0%7quot;#) 819%".%*++quot;,,-.-$-/0%*(+:-/quot;+/

<'=%>%!quot;#,'4,%?quot;'=$quot;%5'4@/%8A=$quot;Aquot;4/ % *++quot;,,-.-$-/0 ;

>B%90%,-/quot;%8C%#++quot;,,-.$quot; %D%-/@,%E=%;FGHI >

>B%90%,-/quot;%8C%#++quot;,,-.$quot; %D%-/@,%E=%;FGHI F

;B%?quot;'=$quot;%K-/:%5-,#.-$-/-quot;,%)'4@/%E,quot;%A0 % ,-/quot; J

;B%?quot;'=$quot;%K-/:%5-,#.-$-/-quot;,%)'4@/%E,quot;%A0 % ,-/quot; L

MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4% A0%)quot;,-N4 H

MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4% A0%)quot;,-N4 O

MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4% A0%)quot;,-N4 -,%)'-4N%-/ P

MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4% A0%)quot;,-N4 -,%)'-4N%-/ -,%)'-4N%-/ MQ

MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4% A0%)quot;,-N4 -,%)'-4N%-/ -,%)'-4N%-/ R8%-,%)'-4N%-/ MM

*$$%/:quot;,quot;%+'A=#4-quot;,%#(quot;%)'-4N%-/ M;

*!8*%D *++quot;,,-.$quot;%!-+:%84/quot;(4quot;/%*==$-+#/-'4, % M>

*!8*%D%&:#/%-,%-/S ! *++quot;,,-.$quot;%!-+:%84/quot;(4quot;/%*==$-+#/-'4, ! &>T%C=quot;+-U-+#/-'4V%$-2quot;%W<97V%TCCV%X97%quot;/+B ! &-/:-4%?('/'+'$,%Y%Z'(A#/,%&'(2-4N%3('E=%K:-+:%-, % =#(/%'U%&*8%D%".%*++quot;,,-.-$-/0%84-/-#/-[quot; ! 84%7#,/%T#$$%C/#/E, ! 8A=$quot;Aquot;4/quot;)%-4%Z-(quot;U'GV%8O%K-/:%]=quot;(#%#4)%C#U#(- % E4)quot;(%)quot;[quot;$'=Aquot;4/ ! 3#-4-4N%-4+(quot;#,-4N%,E=='(/%.0%.('K,quot;(,V%".%/''$2-/,% #4)%#,,-,/-[quot;%/quot;+:4'$'N-quot;, MF

*!8*%][quot;([-quot;K ! *))%('$quot;%,quot;A#4/-+,%/'%,+(-=/quot;)%R8%quot;$quot;Aquot;4/, ! R=)#/quot;%,/#/quot;%-4U'(A#/-'4%)04#A-+#$$0 ! 9#2quot;%-/quot;A,%U'+E,#.$quot;%[-#%/#.-4)quot;G%#//(-.E/quot; ! *))%2quot;0.'#()%quot;[quot;4/%:#4)$-4N ^ 9-A-+%/:quot;%2quot;0.'#()%.quot;:#[-'(%'U%/:quot;%(-+:%+$-quot;4/%R8 ^ 9-4-A-_quot;%/#.%2quot;0%4#[-N#/-'4 ! *))%$-[quot;%(quot;N-'4%-4U'%#4)%4'/-U-+#/-'4%/'%,E=='(/%*6#G MJ

*!8*%G#A=$quot;%D%<(quot;quot; !'$quot;%`%/(quot;quot; a'4%'E/quot;(%+'4/#-4quot;(b !'$quot;%` % /(quot;quot;-/quot;A quot;G=#4)quot;)`/(Equot; a'4%'=quot;4%*U(-+#%4')quot;b !'$quot;%`%/(quot;quot;-/quot;A ,quot;$quot;+/quot;)`/(Equot; a'4%:-N:$-N:/quot;)%N0=/%+:-$)%4')quot;%K-/:%4'%+:-$)(quot;4b !'$quot;%`%/(quot;quot;-/quot;A quot;G=#4)quot;)`U#$,quot; a'4%+$',quot;)%*E,/(#$-#%4')quot;b ML

*!8*%!'$quot;, ! $-42 ! #==$-+#/-'4 ! +'A.'.'GV%'=/-'4 ! =(quot;,quot;4/#/-'4 ! +:quot;+2.'G ! N('E= ! (#)-'V%(#)-'N('E= ! N(-)V%N(-)+quot;$$ ! .E//'4 ! /#.V%/#.+'4/#-4quot;(V% /#.$-,/V%/#.=#4quot;$ ! =('N(quot;,,.#( ! $-,/V%$-,/-/quot;A ! ,$-)quot;( ! Aquot;4E.#(V%Aquot;4E ! ,=-4.E//'4 ! /''$.#( ! /(quot;quot;V%/(quot;quot;-/quot;A ! A'(quot;cc ! #$quot;(/ MH

*!8*D%%C/#/quot;, C/#/quot; e#$Equot;, +:quot;+2quot;) /(Equot;%d%U#$,quot;%d%A-Gquot;) )-,#.$quot;) /(Equot;%d%U#$,quot; (quot;#)'4$0 /(Equot;%d%U#$,quot; quot;G=#4)quot;) /(Equot;%d%U#$,quot; [#$Equot;A-4V%[#$Equot;A#GV % T5*<* [#$Equot;4'K 'K4,V%:#,='=E= 85!Z )quot;,+(-.quot;).0B%$#.quot;$$quot;).0 85!Z 9#40%A'(quot;%ccB MO

*!8*%7#4)A#(2%!'$quot;, ! 9#2quot;,%U-4)-4N%#4)%4#[-N#/-4N%/'%,quot;+/-'4,%'U%/:quot;%=#Nquot; % quot;#,-quot;( !quot;quot;#$%&'$() ^ *&))+, ^ -(.quot;#+.+)'&,/ ^ -()'+)'$)0( ^ 1&$) ^ 2&3$4&'$() ^ 5+&,%6 ^ MP

7#4)A#(2,%G#A=$quot; ;Q

7#4)A#(2,%G#A=$quot; .#44quot;( ;M

7#4)A#(2,%G#A=$quot; .#44quot;( f#[-N#/-'4 ;;

7#4)A#(2,%G#A=$quot; .#44quot;( f#[-N#/-'4 9#-4 ;>

7#4)A#(2,%G#A=$quot; .#44quot;( f#[-N#/-'4 9#-4 +'4/quot;4/-4U' ;F

7#4)A#(2%G#A=$quot; g)-[%)'6'<0=quot;`h)-6-/B$#0'E/BT'4/quot;4/?#4quot;h%(quot;N-'4`h/'=h % +$#,,`h.#44quot;(h%('$quot;`h.#44quot;(hi g,=#4%+$#,,`h$'N'hi".*MM0gj,=#4i % %% gj)-[igIDD%quot;4)%'U%/'=%DDi % %% g)-[%-)`h$quot;U/h%)'6'<0=quot;`h)-6-/B$#0'E/BT'4/quot;4/?#4quot;h%(quot;N-'4`h$quot;U/h % % ('$quot;`h4#[-N#/-'4hi gIDD%<(quot;quot;%N'quot;,%:quot;(quot;%DDi %% gj)-[igIDD%quot;4)%'U%$quot;U/%DDi % %% g)-[%-)`h+'4/quot;4/h%)'6'<0=quot;`h)-6-/B$#0'E/BT'4/quot;4/?#4quot;h%/-/$quot;`hT'4/quot;4/h % % ('$quot;`hA#-4h%#(-#D$-[quot;`h#,,quot;(/-[quot;h%#(-#D#/'A-+`h/(Equot;h%i %%%%%%%% 84U'%U('A%,quot;$quot;+/quot;)%/(quot;quot;%-/quot;A%-,%$'#)quot;)%:quot;(quot; %% gj)-[igIDD%quot;4)%'U%+quot;4/quot;(%DDi % %% g)-[%)'6'<0=quot;`h)-6-/B$#0'E/BT'4/quot;4/?#4quot;h%(quot;N-'4`h.'//'Ah % % ('$quot;`h+'4/quot;4/-4U'h i % gIDD%U''/quot;(%N'quot;,%:quot;(quot;%DDi %% gj)-[igIDD%quot;4)%'U%.'//'A%DDi % ;J

*!8*%7-[quot;%!quot;N-'4, ! ?quot;(+quot;-[#.$quot;%,quot;+/-'4,%#(quot;%-)quot;4/-U-quot;)%K-/:%(quot;N-'4%('$quot; ! 7-[quot;%-4)-+#/quot;,%(quot;N-'4%-,%E=)#/quot;) ^ e#$Equot;,%'Uk%]UUV%?'$-/quot;V%*,,quot;(/-[quot;V%!E)quot; ! */'A-+%-)quot;4/-U-quot;,%/:quot;%quot;G/quot;4/%'U%E=)#/quot;, ^ <(Equot;%^%quot;4/-(quot;%(quot;N-'4%-,%E=)#/quot;)%#4)%(quot;$quot;[#4/ ^ Z#$,quot;%^%'4$0%+:#4Nquot;)%quot;$quot;Aquot;4/%4quot;quot;),%/'%.quot;%=(quot;,quot;4/quot;)%/'%E,quot;( ;L

7-[quot;%!quot;N-'4%G#A=$quot; ;H

7-[quot;%!quot;N-'4%G#A=$quot; gIDD%Aquot;,,#Nquot;%=(quot;[-quot;K%=#4quot;%DDi g)-[%-)`hAquot;,,#Nquot;h%)'6'<0=quot;`h)-6-/B$#0'E/BT'4/quot;4/?#4quot;h % (quot;N-'4`h+quot;4/quot;(h%A-4C-_quot;`h;Qh ('$quot;`h(quot;N-'4h%#(-#D$-[quot;`h#,,quot;(/-[quot;h%#(-#D#/'A-+`h/(Equot;h%i 9quot;,,#Nquot;%T'4/quot;4/,%$'#)quot;)%:quot;(quot; gj)-[i% gIDD%quot;4)%'U%hAquot;,,#Nquot;h%DDi ;O

CEAA#(0 ! lC%<''$2-/,%#(quot;%-A=$quot;Aquot;4/-4N%*!8*%D%E,quot;%/:quot;AI ^ 5'6'%)-6-/,%#(quot;%#$$%UE$$0%#++quot;,,-.$quot; ! *!8*%A#2quot;,%*6#G%#++quot;,,-.$quot; ! 9#2quot;%0'E(%Kquot;.,-/quot;,%)04#A-+%*f5%#++quot;,,-.$quot;I 8A='(/#4+quot;%'U%mquot;0.'#() ;P

Performance and Testing John Resig

Performance

Analyzing Performance Optimizing performance is a huge ! concern: Faster code = happy users! Measure execution time ! Loop the code a few times ! Measure the di!erence: ! ! quot;new Date#.getTimequot;#;

Stack Pro$ling jQuery Stack Pro$ler ! Look for problematic methods and plugins ! http://ejohn.org/blog/deep%pro$ling% ! jquery%apps/

Accuracy of JavaScript Time We’re measuring the performance of JavaScript from within JavaScript! http://ejohn.org/blog/accuracy-of-javascript-time/

15ms intervals ONLY! Error Rate of 50-750%!

Performance Tools How can we get good numbers? ! We have to go straight to the source: Use ! the tools the browsers provide. Tools: ! ! Firebug Pro$ler ! Safari Pro$ler ! quot;Part of Safari 4# ! IE 8 Pro$ler

Firebug Pro$ler

Safari 4 Pro$ler

IE 8 Pro$ler

FireUnit A simple JavaScript test suite embedded in ! Firebug. http://$reunit.org/ !

FireUnit Pro$le Data { fireunit.getProfile(); quot;timequot;: 8.443, quot;callsquot;: 611, quot;dataquot;:[ { quot;namequot;:quot;makeArray()quot;, quot;callsquot;:1, quot;percentquot;:23.58, quot;ownTimequot;:1.991, quot;timequot;:1.991, quot;avgTimequot;:1.991, quot;minTimequot;:1.991, quot;maxTimequot;:1.991, quot;fileNamequot;:quot;jquery.js (line 2059)quot; }, // etc. http://ejohn.org/blog/function-call-profiling/ ]}

Complexity Analysis Analyze complexity rather than raw time ! jQuery Call Count Pro$ler quot;uses FireUnit# ! Method Calls Big-O .addClass(quot;testquot;); 542 6n .addClass(quot;testquot;); 592 6n .removeClass(quot;testquot;); 754 8n .removeClass(quot;testquot;); 610 6n .css(quot;colorquot;, quot;redquot;); 495 5n .css({color: quot;redquot;, border: quot;1px 887 9n solid redquot;}); .remove(); 23772 2n+n2 .append(quot;<p>test</p>quot;); 307 3n

Complexity Analysis Reducing call count helps to reduce ! complexity Results for 1.3.3: ! Method Calls Big-O .remove(); 298 3n .html(quot;<p>test</p>quot;); 507 5n .empty(); 200 2n http://ejohn.org/blog/function-call-proﬁling/

Testing

Test Suites Automated testing ! jQuery, Prototype, Dojo, YUI all have ! their own test suites

QUnit jQuery&s Test Suite ! ! Nice and simple ! Works well for asynchronous tests, too.

qUnit Usage test(quot;a basic test examplequot;, function() { ! ok( true, quot;this test is finequot; ); var value = quot;helloquot;; equals( quot;helloquot;, value, quot;We expect value to be helloquot; ); }); module(quot;Module Aquot;); test(quot;first test within modulequot;, function() { ok( true, quot;all passquot; ); }); test(quot;second test within modulequot;, function() { ok( true, quot;all passquot; ); }); module(quot;Module Bquot;); test(quot;some other testquot;, function() { expect(1); ok( true, quot;wellquot; ); });

qUnit Output

Choose Your Browsers

Cost / Bene$t IE 7 IE 6 FF 3 Safari 3 Opera 9.5 Cost Benefit Draw a line in the sand.

Graded Support Yahoo Browser Compatibility

Browser Support Grid IE Firefox Safari Opera Chrome Previous 6.0 2.0 3.0 9.5 Current 7.0 3.0 3.2 9.6 1.0 Next 8.0 3.1 4.0 10.0 2.0 jQuery Browser Support

Browser Support Grid IE Firefox Safari Opera Chrome Previous 3.0 9.5 6.0 2.0 Current 7.0 3.0 3.2 9.6 1.0 Next 8.0 3.1 4.0 2.0 10.0 jQuery 1.3 Browser Support

The Scaling Problem The Problem: ! ! jQuery has 6 test suites ! Run in 11 browsers ! quot;Not even including multiple platforms!# All need to be run for every commit, ! patch, and plugin. JavaScript testing doesn&t scale well. !

Distributed Testing Hub server ! Clients connect and help run tests ! A simple JavaScript client that can be run ! in all browsers ! Including mobile browsers! ! TestSwarm

FF 3.5 FF 3.5 FF 3.5 IE 6 IE 6 FF 3 IE 6 Op 9 FF 3 IE 7 TestSwarm IE 7 Test Suite Test Suite Test Suite

Manual Testing Push tests to users who follow pre%de$ned ! steps Answer 'Yes&/&No& questions which are ! pushed back to the server. An e!ective way to distribute manual test ! load to dozens of clients.

TestSwarm.com Incentives for top testers quot;t%shirts, books# ! Will be opening for testing at the end of ! the month Help your favorite JavaScript library ! become better tested! http://testswarm.com !

Q&A Please come up to the microphones!

http://ejohn.org	4527
http://www.xelaz.de	148
http://static.slideshare.net	35
http://blarnee.com	31
http://www.redditmedia.com	29
http://www.slideshare.net	20
http://localhost	15
http://crynobone.com	10
http://xss.yandex.net	9
http://www.hanrss.com	9
http://webcache.googleusercontent.com	7
http://feeds.feedburner.com	6
http://www.tforster.com	5
http://onwebdev.blogspot.com	4
http://xianguo.com	3
http://mybadattitude.com	2
http://www.zhuaxia.com	2
http://www.iweb34.com	2
http://www.plugmasters.com.br	2
http://reader.youdao.com	1
http://rizzi.local.	1
http://www.troyforster.com	1
http://www.xaguilars.com	1
http://zhuaxia.com	1
http://devnetwork.ru	1
http://www.newsgator.com	1
applewebdata://AF07E2BC-4C57-44FF-A16A-57CF9ACB09DD	1
applewebdata://3C47941E-F01F-4272-BA02-9F84A003DE7D	1
http://sozlukten.net	1

More Secrets of JavaScript Libraries

by jeresig on Mar 20, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

29 Embeds 4,876

Statistics

More Secrets of JavaScript Libraries — Presentation Transcript