More Secrets of JavaScript Libraries
-
Upload
jeresig -
Category
Technology
-
view
17.947 -
download
0
Transcript of More Secrets of JavaScript Libraries
![Page 1: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/1.jpg)
More Secrets of JavaScript Libraries
Nate Koechley, Andrew Dupont,Becky Gibson, John Resig
4x 10min talks with Q&A at the end.
![Page 2: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/2.jpg)
Getting LoadedEasier development. Better performance.
![Page 3: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/3.jpg)
Get & LoaderEasier development. Better performance.
![Page 4: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/4.jpg)
The Problems
![Page 5: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/5.jpg)
JavaScript loading blocks page rendering.
![Page 6: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/6.jpg)
![Page 7: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/7.jpg)
More !les increases blocking.
![Page 8: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/8.jpg)
![Page 9: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/9.jpg)
![Page 10: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/10.jpg)
We know a single !le is best:
![Page 11: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/11.jpg)
![Page 12: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/12.jpg)
But in practice...
![Page 13: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/13.jpg)
Widgets & Plugins may have various prerequisites.
![Page 14: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/14.jpg)
<script src="jquery/jquery-1.2.2.pack.js"/>
<script src="jquery/chili/chili.js"/>
<script src="jquery.cookie.js"/>
<script src="jquery.clickmenu.pack.js"/>
<script src="jquery.columnmanager.js"/>
![Page 15: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/15.jpg)
<script src="yahoo-dom-event.js"/>
<script src="element-min.js"/>
<script src="connection-min.js"/>
<script src="tabview-min.js"/>
![Page 16: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/16.jpg)
Sites often use multiple unrelated JavaScript !les.
![Page 17: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/17.jpg)
<script src="prototype.js"/>
<script src="scriptaculous.js"/>
<script src="csiManager.js"/>
<script src="StorageManager.js"/>
<script src="main.js"/>
<script src="urchin.js">
![Page 18: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/18.jpg)
Larger projects usemultiple !les for
"exibility & optimization
![Page 19: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/19.jpg)
<script src="yui-base.js"/>
<script src="oop.js"/>
<script src="event.js"/>
<script src="attribute.js"/>
<script src="base.js"/>
<script src="dom.js"/>
<script src="node.js"/>
<script src="widget.js"/>
<script src="dd.js"/>
<script src="slider/slider.js/">
![Page 20: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/20.jpg)
<script src="dd.js"/>
dd
dd-ddm-base
dd-ddm
dd-drag
dd-proxy
dd-constrain
dd-drop
dd-plugin
dd-drop-plugin
![Page 21: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/21.jpg)
Most !les are order-dependent.
![Page 22: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/22.jpg)
Other !les aren’tneeded right away.
![Page 23: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/23.jpg)
![Page 24: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/24.jpg)
And it’s nice to easily toggle between -raw.js, -min.js,
and -debug.js versions.
![Page 25: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/25.jpg)
three "avors of each
![Page 26: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/26.jpg)
fully-commented
![Page 27: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/27.jpg)
-debug with logging
![Page 28: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/28.jpg)
-min for deployment
![Page 29: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/29.jpg)
So, our goals:
![Page 30: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/30.jpg)
Features• Handle prerequisies without duplication
• Manage order dependency
• Per-module "exibility
• Fast toggling between "avors
• Continue fetching onDemand
• Minimize HTTP requestsand not block rendering
![Page 31: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/31.jpg)
That’s what YUI’s Get & Loader Utilities do.
![Page 32: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/32.jpg)
They’re partners.
![Page 33: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/33.jpg)
Loader Get
![Page 34: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/34.jpg)
Loader Get ComboHandler
![Page 35: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/35.jpg)
Loader Get
The “seed” !le.
Meta data.
Con!g options.
Helpers/Sugar.
Combo
Creates new nodes & src’s.
Non-blocking.
Cross-domain.
GET not POST.
Parses request.
Concats modules if !rst.
Edge-caches.
![Page 36: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/36.jpg)
Loads anything:
• Library !les
• Your own !les
• JS, CSS, JSON, ...
• Urchin.js, badges, includes, ...
![Page 37: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/37.jpg)
Easily de!ne your resources
![Page 38: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/38.jpg)
// one or more external modules // that can be loaded along side of YUI
modules: { json_org: { fullpath: "http://www.json.org/json.js" }, json2_org: { fullpath: "http://www.json.org/json2.js" } }
![Page 39: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/39.jpg)
And their relationships
![Page 40: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/40.jpg)
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'] } } },
![Page 41: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/41.jpg)
With !ne-grained control
![Page 42: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/42.jpg)
name
type
path
fullpath
requires
optional
supersedes
after
rollup
![Page 43: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/43.jpg)
Once the seed is on the page:
![Page 44: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/44.jpg)
<script src="yui-min.js"/>
<script>
YUI().use("slider", function(Y) {
// Slider available and ready for use.
});
</script>
![Page 45: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/45.jpg)
Other cool features in Get:
![Page 46: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/46.jpg)
Choose where the nodes go.
![Page 47: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/47.jpg)
Purge After Reading
![Page 48: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/48.jpg)
Bene!ts
• Easy to use.
• No typos. Less to manage.
• Much faster performance.
• Extensive "exibility.
• Nice support for lazy-loading.
• Library agnostic.
![Page 49: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/49.jpg)
[email protected]/yui/3/yui/developer.yahoo.com/yui/3/get/github.com/yui
![Page 50: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/50.jpg)
![Page 51: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/51.jpg)
Meta-Language Frameworks
![Page 52: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/52.jpg)
The code you write is transformed before a browser consumes it
![Page 53: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/53.jpg)
Google Web Toolkit(turns Java into
JavaScript)
![Page 54: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/54.jpg)
Pyjamas(turns Python into
JavaScript)
![Page 55: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/55.jpg)
Cappuccino(turns “Objective-J”
into JavaScript)
![Page 56: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/56.jpg)
Some of them are lightweight...
![Page 57: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/57.jpg)
Narrative JS(adds “sleep”-like
functionality to JS)
![Page 58: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/58.jpg)
function waitForButton() { // do some work // create our notifier var notifier = new EventNotifier(); // attach our notifier to the button document.getElementById("myButton").onclick = notifier; // wait for the button to be clicked notifier.wait->(); // do more work}
![Page 59: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/59.jpg)
Google Caja(turns JavaScript into
safer JavaScript)
![Page 60: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/60.jpg)
var blogComment = document.createElement('div');blogComment.innerHTML = "<b>user entered text " + "which happens to contain a script " +"tag.</b><script defer>alert('muahahaa');</scr" + "ipt>";document.getElementById("result").appendChild(blogComment);
![Page 61: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/61.jpg)
___.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 {{
![Page 62: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/62.jpg)
$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});}
![Page 63: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/63.jpg)
Why?
![Page 64: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/64.jpg)
GWT gets to use the Java toolset
![Page 65: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/65.jpg)
Cappuccino gets to introduce new syntax
and new features
![Page 66: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/66.jpg)
Let’s say you wantRuby-style
“catch-all” methods
![Page 67: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/67.jpg)
object.methodName(arg);
![Page 68: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/68.jpg)
object.callMethod("methodName", arg);
![Page 69: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/69.jpg)
[object methodName];
![Page 70: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/70.jpg)
Fine, but nowyou’re more distant
from the code
![Page 71: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/71.jpg)
Harder to debug
![Page 72: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/72.jpg)
Longer feedback loop
![Page 73: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/73.jpg)
It’s athicker abstraction
![Page 74: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/74.jpg)
John’s blog posthttp://is.gd/bKwl
![Page 75: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/75.jpg)
Abstractions leak...what happens when
stu! goes wrong?
![Page 76: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/76.jpg)
Francisco’s Responsehttp://is.gd/aJ36
![Page 77: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/77.jpg)
All frameworksare abstractions
![Page 78: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/78.jpg)
Yeah, abstractions leak, but we all use
them anyway
![Page 79: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/79.jpg)
MORAL:
![Page 80: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/80.jpg)
Abstractionsare trade-o!s
![Page 81: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/81.jpg)
Thicker abstractions have more hassle, but o!er greater rewards
![Page 82: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/82.jpg)
Which wayshould you go?
![Page 83: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/83.jpg)
Think about up-front cost
and ongoing cost
![Page 84: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/84.jpg)
Use whatmakes senseto your head
![Page 85: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/85.jpg)
Consider:We’re “stuck”
with JavaScript
![Page 86: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/86.jpg)
!"#$%&'($)%*++",,-.-$-/0
1"+20%3-.,'4
5'6'%*++",,-.-$-/0%7"#)
819%&".%*++",,-.-$-/0%*(+:-/"+/
![Page 87: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/87.jpg)
;
<'=%>%!"#,'4,%?"'=$"%5'4@/%8A=$"A"4/%
*++",,-.-$-/0
![Page 88: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/88.jpg)
>
>B%90%,-/"%8C%#++",,-.$"
%D%-/@,%E=%;FGHI
![Page 89: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/89.jpg)
F
>B%90%,-/"%8C%#++",,-.$"
%D%-/@,%E=%;FGHI
![Page 90: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/90.jpg)
J
;B%?"'=$"%K-/:%5-,#.-$-/-",%)'4@/%E,"%A0%
,-/"
![Page 91: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/91.jpg)
L
;B%?"'=$"%K-/:%5-,#.-$-/-",%)'4@/%E,"%A0%
,-/"
![Page 92: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/92.jpg)
H
MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4%
A0%)",-N4
![Page 93: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/93.jpg)
O
MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4%
A0%)",-N4
![Page 94: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/94.jpg)
P
MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4%
A0%)",-N4
-,%)'-4N%-/
![Page 95: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/95.jpg)
MQ
MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4%
A0%)",-N4
-,%)'-4N%-/
-,%)'-4N%-/
![Page 96: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/96.jpg)
MM
MB%*))-4N%*MM0%-,%/''%:#()%#4)%K-$$%(E-4%
A0%)",-N4
-,%)'-4N%-/
-,%)'-4N%-/
R8%-,%)'-4N%-/
![Page 97: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/97.jpg)
M;
*$$%/:","%+'A=#4-",%#("%)'-4N%-/
![Page 98: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/98.jpg)
M>
*!8*%D% *++",,-.$"%!-+:%84/"(4"/%*==$-+#/-'4,
![Page 99: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/99.jpg)
MF
*!8*%D%&:#/%-,%-/S
! *++",,-.$"%!-+:%84/"(4"/%*==$-+#/-'4,
! &>T%C="+-U-+#/-'4V%$-2"%W<97V%TCCV%X97%"/+B
! &-/:-4%?('/'+'$,%Y%Z'(A#/,%&'(2-4N%3('E=%K:-+:%-,%
=#(/%'U%&*8%D%&".%*++",,-.-$-/0%84-/-#/-["
! 84%7#,/%T#$$%C/#/E,
! 8A=$"A"4/")%-4%Z-("U'GV%8\O%K-/:%]="(#%#4)%C#U#(-%
E4)"(%)"["$'=A"4/
! 3#-4-4N%-4+("#,-4N%,E=='(/%.0%.('K,"(,V%&".%/''$2-/,%
#4)%#,,-,/-["%/"+:4'$'N-",
![Page 100: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/100.jpg)
MJ
*!8*%]["([-"K
! *))%('$"%,"A#4/-+,%/'%,+(-=/")%R8%"$"A"4/,
! R=)#/"%,/#/"%-4U'(A#/-'4%)04#A-+#$$0
! 9#2"%-/"A,%U'+E,#.$"%[-#%/#.-4)"G%#//(-.E/"
! *))%2"0.'#()%"["4/%:#4)$-4N
^9-A-+%/:"%2"0.'#()%.":#[-'(%'U%/:"%(-+:%+$-"4/%R8
^9-4-A-_"%/#.%2"0%4#[-N#/-'4
! *))%$-["%("N-'4%-4U'%#4)%4'/-U-+#/-'4%/'%,E=='(/%*6#G
![Page 101: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/101.jpg)
ML
*!8*%\G#A=$"%D%<(""
!'$"%`%/(""a'4%'E/"(%+'4/#-4"(b
!'$"% %̀/(""-/"A
"G=#4)")`/(E"a'4%'="4%*U(-+#%4')"b
!'$"%`%/(""-/"A"G=#4)")`U#$,"a'4%+$',")%*E,/(#$-#%4')"b
!'$"%`%/(""-/"A,"$"+/")`/(E"a'4%:-N:$-N:/")%\N0=/%+:-$)%4')"%K-/:%4'%+:-$)("4b
![Page 102: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/102.jpg)
MH
*!8*%!'$",
! $-42! +'A.'.'GV%'=/-'4! +:"+2.'G! (#)-'V%(#)-'N('E=! .E//'4! =('N(",,.#(! ,$-)"(! ,=-4.E//'4! /(""V%/(""-/"A! #$"(/
! #==$-+#/-'4! =(","4/#/-'4! N('E=! N(-)V%N(-)+"$$! /#.V%/#.+'4/#-4"(V%/#.$-,/V%/#.=#4"$! $-,/V%$-,/-/"A! A"4E.#(V%A"4E! /''$.#(! A'("cc
![Page 103: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/103.jpg)
MO
*!8*D%%C/#/",
9#40%A'("%ccB
85!\Z)",+(-.").0B%$#."$$").0
85!\Z'K4,V%:#,='=E=
T5*<*[#$E"A-4V%[#$E"A#GV%
[#$E"4'K
/(E"%d%U#$,""G=#4)")
/(E"%d%U#$,"("#)'4$0
/(E"%d%U#$,")-,#.$")
/(E"%d%U#$,"%d%A-G")+:"+2")
e#$E",C/#/"
![Page 104: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/104.jpg)
MP
*!8*%7#4)A#(2%!'$",
! 9#2",%U-4)-4N%#4)%4#[-N#/-4N%/'%,"+/-'4,%'U%/:"%=#N"%
"#,-"(^ !""#$%&'$()
^ *&))+,
^ -(."#+.+)'&,/
^ -()'+)'$)0(
^ 1&$)
^ 2&3$4&'$()
^ 5+&,%6
![Page 105: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/105.jpg)
;Q
7#4)A#(2,%\G#A=$"
![Page 106: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/106.jpg)
;M
7#4)A#(2,%\G#A=$"
.#44"(
![Page 107: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/107.jpg)
;;
7#4)A#(2,%\G#A=$"
.#44"(
f#[-N#/-'4
![Page 108: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/108.jpg)
;>
7#4)A#(2,%\G#A=$"
.#44"(
f#[-N#/-'4
9#-4
![Page 109: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/109.jpg)
;F
7#4)A#(2,%\G#A=$"
.#44"(
f#[-N#/-'4
9#-4
+'4/"4/-4U'
![Page 110: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/110.jpg)
;J
7#4)A#(2%\G#A=$"
g)-[%)'6'<0="`h)-6-/B$#0'E/BT'4/"4/?#4"h%("N-'4`h/'=h%
+$#,,`h.#44"(h%('$"`h.#44"(hi
g,=#4%+$#,,`h$'N'hi&".*MM0gj,=#4i%
%%% gj)-[igIDD%"4)%'U%/'=%DDi
%%% g)-[%-)`h$"U/h%)'6'<0="`h)-6-/B$#0'E/BT'4/"4/?#4"h%("N-'4`h$"U/h%
('$"`h4#[-N#/-'4hi
gIDD%<(""%N'",%:"("%DDi
%%% gj)-[igIDD%"4)%'U%$"U/%DDi
%%% g)-[%-)`h+'4/"4/h%)'6'<0="`h)-6-/B$#0'E/BT'4/"4/?#4"h%/-/$"`hT'4/"4/h%
('$"`hA#-4h%#(-#D$-["`h#,,"(/-["h%#(-#D#/'A-+`h/(E"h%i
%%%%%%%% 84U'%U('A%,"$"+/")%/(""%-/"A%-,%$'#)")%:"("
%%% gj)-[igIDD%"4)%'U%+"4/"(%DDi
%%% g)-[%)'6'<0="`h)-6-/B$#0'E/BT'4/"4/?#4"h%("N-'4`h.'//'Ah%
('$"`h+'4/"4/-4U'h% i
gIDD%U''/"(%N'",%:"("%DDi
%%% gj)-[igIDD%"4)%'U%.'//'A%DDi
![Page 111: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/111.jpg)
;L
*!8*%7-["%!"N-'4,
! ?"(+"-[#.$"%,"+/-'4,%#("%-)"4/-U-")%K-/:%("N-'4%('$"
! 7-["%-4)-+#/",%("N-'4%-,%E=)#/")
^ e#$E",%'Uk%]UUV%?'$-/"V%*,,"(/-["V%!E)"
! */'A-+%-)"4/-U-",%/:"%"G/"4/%'U%E=)#/",^ <(E"%^%"4/-("%("N-'4%-,%E=)#/")%#4)%("$"[#4/
^ Z#$,"%^%'4$0%+:#4N")%"$"A"4/%4""),%/'%."%=(","4/")%/'%E,"(
![Page 112: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/112.jpg)
;H
7-["%!"N-'4%\G#A=$"
![Page 113: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/113.jpg)
;O
7-["%!"N-'4%\G#A=$"
gIDD%A",,#N"%=("[-"K%=#4"%DDi
g)-[%-)`hA",,#N"h%)'6'<0="`h)-6-/B$#0'E/BT'4/"4/?#4"h%
("N-'4`h+"4/"(h%A-4C-_"`h;Qh
('$"`h("N-'4h%#(-#D$-["`h#,,"(/-["h%#(-#D#/'A-+`h/(E"h%i
9",,#N"%T'4/"4/,%$'#)")%:"("
gj)-[i%
gIDD%"4)%'U%hA",,#N"h%DDi
![Page 114: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/114.jpg)
;P
CEAA#(0
! lC%<''$2-/,%#("%-A=$"A"4/-4N%*!8*%D%E,"%/:"AI
^ 5'6'%)-6-/,%#("%#$$%UE$$0%#++",,-.$"
! *!8*%A#2",%*6#G%#++",,-.$"
! 9#2"%0'E(%K".,-/",%)04#A-+%*f5%#++",,-.$"I
8A='(/#4+"%'U%m"0.'#()
![Page 115: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/115.jpg)
Performance and Testing
John Resig
![Page 116: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/116.jpg)
Performance
![Page 117: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/117.jpg)
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:! "new Date#.getTime"#;
![Page 118: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/118.jpg)
Stack Pro$ling! jQuery Stack Pro$ler
! Look for problematic methods and plugins
! http://ejohn.org/blog/deep%pro$ling%jquery%apps/
![Page 119: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/119.jpg)
![Page 120: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/120.jpg)
Accuracy of JavaScript Time
http://ejohn.org/blog/accuracy-of-javascript-time/
We’re measuring the performance ofJavaScript from within JavaScript!
![Page 121: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/121.jpg)
![Page 122: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/122.jpg)
![Page 123: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/123.jpg)
![Page 124: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/124.jpg)
15ms intervals ONLY!
Error Rate of 50-750%!
![Page 125: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/125.jpg)
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
! "Part of Safari 4#! IE 8 Pro$ler
![Page 126: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/126.jpg)
Firebug Pro$ler
![Page 127: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/127.jpg)
Safari 4 Pro$ler
![Page 128: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/128.jpg)
IE 8 Pro$ler
![Page 129: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/129.jpg)
FireUnit! A simple JavaScript test suite embedded in
Firebug.
! http://$reunit.org/
![Page 130: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/130.jpg)
FireUnit Pro$le Data
{
"time": 8.443,
"calls": 611,
"data":[
{
"name":"makeArray()",
"calls":1,
"percent":23.58,
"ownTime":1.991,
"time":1.991,
"avgTime":1.991,
"minTime":1.991,
"maxTime":1.991,
"fileName":"jquery.js (line 2059)"
},
// etc.
]}
fireunit.getProfile();
http://ejohn.org/blog/function-call-profiling/
![Page 131: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/131.jpg)
Complexity Analysis! Analyze complexity rather than raw time
! jQuery Call Count Pro$ler "uses FireUnit#
Method Calls Big-O
.addClass("test"); 542 6n
.addClass("test"); 592 6n
.removeClass("test"); 754 8n
.removeClass("test"); 610 6n
.css("color", "red"); 495 5n
.css({color: "red", border: "1px solid red"});
887 9n
.remove(); 23772 2n+n2
.append("<p>test</p>"); 307 3n
![Page 132: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/132.jpg)
Complexity Analysis! Reducing call count helps to reduce
complexity
! Results for 1.3.3:
Method Calls Big-O
.remove(); 298 3n
.html("<p>test</p>"); 507 5n
.empty(); 200 2n
http://ejohn.org/blog/function-call-profiling/
![Page 133: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/133.jpg)
Testing
![Page 134: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/134.jpg)
Test Suites! Automated testing
! jQuery, Prototype, Dojo, YUI all have their own test suites
![Page 135: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/135.jpg)
QUnit! jQuery&s Test Suite
! Nice and simple! Works well for asynchronous tests, too.
![Page 136: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/136.jpg)
qUnit Usage! test("a basic test example", function() {
ok( true, "this test is fine" );
var value = "hello";
equals( "hello", value, "We expect value to be hello" );
});
module("Module A");
test("first test within module", function() {
ok( true, "all pass" );
});
test("second test within module", function() {
ok( true, "all pass" );
});
module("Module B");
test("some other test", function() {
expect(1);
ok( true, "well" );
});
![Page 137: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/137.jpg)
qUnit Output
![Page 138: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/138.jpg)
Choose Your Browsers
![Page 139: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/139.jpg)
Cost / Bene$t
IE 7 IE 6 FF 3 Safari 3 Opera 9.5
Cost Benefit
Draw a line in the sand.
![Page 140: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/140.jpg)
Graded Support
Yahoo Browser Compatibility
![Page 141: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/141.jpg)
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
![Page 142: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/142.jpg)
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 1.3 Browser Support
![Page 143: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/143.jpg)
The Scaling Problem! The Problem:
! jQuery has 6 test suites! Run in 11 browsers! "Not even including multiple platforms!#
! All need to be run for every commit, patch, and plugin.
! JavaScript testing doesn&t scale well.
![Page 144: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/144.jpg)
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
![Page 145: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/145.jpg)
TestSwarm
FF 3
FF 3
FF 3.5 FF 3.5 FF 3.5IE 6
IE 6
IE 6
IE 7
IE 7
Op 9
Test Suite Test Suite Test Suite
![Page 146: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/146.jpg)
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.
![Page 147: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/147.jpg)
TestSwarm.com! Incentives for top testers "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
![Page 148: More Secrets of JavaScript Libraries](https://reader038.fdocuments.in/reader038/viewer/2022103004/55d4c394bb61eb2f718b4586/html5/thumbnails/148.jpg)
Q&APlease come up to the microphones!