50 minute talk on Ajax and JavaScript libraries, presented at Web 2.0 Expo Berlin on 7th November 2007.

1. How to
make
libraries
work for you
Simon Willison - http://simonwillison.net/
Web 2.0 Expo Berlin
7th November 2007

2. This talk
• JavaScript libraries!
• What they are
• Why they exist
• What they can do for you
• How to pick one

3. JavaScript libraries
• ajaxpatterns.org lists over 40 general purpose
JavaScript libraries
• ... and that’s not including the many libraries tied
to a specific server-side language
• Why are there so many of them?

4. “The bad news:
JavaScript is broken.
The good news:
It can be fixed with
more JavaScript!”
Geek folk saying

5. • Inconsistent event model (thanks, IE)
• Memory management (thanks, IE)
• The DOM is a horrible API!
• JavaScript-the-language has quite a few warts
• But it’s powerful enough to let you fix them
• Browser Ajax is far too verbose
• Positioning and co-ordinates
• Drag and drop and Animation are really hard

6. var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('Error code ' + xhr.status);
}
}
}

7. Narrowing them down...
• Prototype (and Scriptaculous)
• The Yahoo! User Interface Library - YUI
• jQuery
• The Dojo Toolkit

8. Download
Get the latest version—1.5.1
Learn
Prototype is a JavaScript Framework that aims to Online documentation and resources.
ease development of dynamic web applications.
Featuring a unique, easy-to-use toolkit for class-driven Discuss
development and the nicest Ajax library around, Prototype Mailing list and IRC
is quickly becoming the codebase of choice for web
application developers everywhere.
Contribute
Submit patches and report bugs.
Prototype and Scriptaculous
Prototype and script.aculo.us: The quot;Bungee
bookquot; has landed!
Core team member Christophe
Who's using Prototype?
Meet the developers
Porteneuve has been hard at work
for the past few months tracking

9. • Prototype focuses on basic browser
compatibility and JavaScript language
enhancement
• It tries to make JavaScript more like Ruby
• Extends most of JavaScript’s built-in objects
with new functionality
• Scriptaculous adds fancy effects, basic
widgets and drag and drop

10. • $, $$, $F, $A, $H
• var Animal = Class.create(...)
• new Ajax.Request(url[, options])
• Event.observe(el, 'click', function() { ... })
• quot;foo-barquot;.camelize() -> quot;fooBarquot;

11. $$('#bmarks li').each(function(li){
Event.observe(li, 'click', function(e) {
this.style.backgroundColor = 'yellow';
}.bindAsEventListener(li));
});

12. Script.aculo.us
• Wizzy extension for Prototype
• Huge collection of packaged effects
• AutoComplete, Slider, InPlaceEditor controls
• Drag and drop

13. The Yahoo UI Library

14. • Created at Yahoo!, BSD licensed
• Designed for both creating new applications
and integration with legacy code
• Focused on browser issues; almost no
functionality relating to JS language itself
• Extensively tested and documented

15. controls
autocomplete calendar container
menu slider treeview
animation dragdrop
dom event connection
utilities

16. YAHOO.util.Event.on(window, 'load', function() {
var div = YAHOO.util.Dom.get('messages');
setTimeout(function() {
var anim = new YAHOO.util.Anim(div, {
height: {to: 0},
opacity: {to: 0}
}, 0.4);
anim.animate();
anim.onComplete.subscribe(function() {
div.parentNode.removeChild(div);
});
}, 2000);
});

17. Common YUI idiom
$E = YAHOO.util.Event;
$D = YAHOO.util.Dom;
$E.on(window, 'load', function() {
var div = $D.get('messages');
...
});

18. jQuery

19. • Simple philosophy: find some nodes, then do
something to them
• Minimal impact on your global namespace - it adds
two global symbols: jQuery and $, and $ can be easily
reverted
• API designed around “chaining” - other libraries are
now emulating this
• Outstanding node selection, based on CSS 3 and
custom extensions
• Small core library with a smart plugin mechanism

20. jQuery(window).ready(function() {
jQuery(quot;div.hideablequot;).
css('cursor', 'pointer').
append('<p>Click to hide</p>').
click(function() {
jQuery(this).hide(quot;slowquot;);
return false;
});
});

21. $(function() {
$(quot;div.hideablequot;).
css('cursor', 'pointer').
append('<p>Click to hide</p>').
click(function() {
$(this).hide(quot;slowquot;);
return false;
});
});

22. The Dojo Toolkit

23. • The oldest of the current popular libraries,
pre-dating even the term “Ajax”
• Incredible amounts of functionality
• Used to suffer from a tough learning curve,
but the 1.0 release greatly simplifies things

24. dojo.collections dojo.math
dojo.crypto dojo.reflect
dojo.date dojo.rpc
dojo.dnd dojo.storage
dojo.dom dojo.string
dojo.event Dojo 0.4
dojo.style
dojo.io dojo.undo
dojo.lang dojo.uri
dojo.lfx dojo.widget
dojo.logging dojo.xml
http://www.flickr.com/photos/aprillynn77/8818200/

25. dojo
Dojo 1.0
dojox dijit

26. Dojo components
• dojo
• Core library, similar to jQuery / Prototype
• Dynamic code loading and dependency
management
• dijit
• Advanced widget system
• dojox
• Dojo eXperimental - crazy voodoo magic

27. dijit

29. <div dojoType=quot;dijit.layout.TabContainerquot; sizeShare=quot;40quot;>
<div id=quot;tab1quot;
dojoType=quot;dijit.layout.ContentPanequot; title=quot;Form Feelquot;>
<h2>Various Form Elements:</h2>
<form name=quot;dijitFormTestquot;>
<p><input type=quot;checkBoxquot;
dojoType=quot;dijit.form.CheckBoxquot; checked=quot;checkedquot;>
Standard Dijit CheckBox
<br><input type=quot;checkBoxquot;
dojoType=quot;dijit.form.CheckBoxquot; disabled=quot;disabledquot;>
Disabled Dijit
<br>
<input type=quot;checkBoxquot;
dojoType=quot;dijit.form.CheckBoxquot; disabled=quot;disabledquot;
checked=quot;checkedquot;>
Checked and Disabled Dijit
</p>
...

30. dojox

31. • Graphics (cross-browser drawing API)
• Offline storage
• Cryptography
• Templating
• Data grids and more
• “The future of the browser today”

32. Honourable mentions

33. Ext JS

34. The Google Web Toolkit

35. What are the interesting ideas?

36. Interaction Design Patterns

37. Smart node selection
• Any JavaScript that modifies the page inevitably
starts out by selecting some existing nodes
• jQuery is based entirely around node selection
• Prototype and Dojo also have node selection APIs

38. Smarter Ajax
• Prototype makes it easy to set a callback for
when ANY Ajax request completes... useful
for loading status icons
• Ajax.Updater can extract and execute
<script> blocks in HTML fragments
• Great for unobtrusively enhancing elements
that have just been added to the page

39. Self-adjusting animations
• You can roll your own animations in
JavaScript using setTimeout and setInterval...
• ... but the time taken for a animation will
vary depending on browser performance
• Smarter animations adjust their framerate to
compensate for browser performance
• All four libraries do this

40. DSLs for animation
var anim = new YAHOO.util.Anim('el', {
opacity: {to: 0.5},
height: {to: 0},
fontSize: {
from: 100, to: 50, unit: '%'
}
}, 1);
anim.animate();

41. XPath optimisations
• Mozilla and Opera offer fast XPath lookups
through document.evaluate(...)
• Dojo can use this for getElementsByClass()
• Prototype redefines getElementsBySelector
to use XPath

42. Minification
• All four libraries ship in both uncompressed
and compressed formats
• YUI uses minification: whitespace and
comments are stripped
• The Dojo build system uses “ShrinkSafe”,
which compresses JavaScript using the Rhino
parser
• jQuery uses Dean Edwards’ Packer, with
base62 encoding

43. Hosting on a CDN
http://yui.yahooapis.com/2.2.2/build/reset/reset-min.css
http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js
...
http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.4.1/dojo.js
• JavaScript is cached before the user even visits your site

44. So how do you pick one?

45. So how do you pick one?
• It depends on what you are trying to build

47. My library selection criteria
• Enables unobtrusive JavaScript
• Plays well with other code
• Smart use of namespacing
• Global variable impact kept to a minimum
• Tie breaker: the less code I have to write the
better!

48. • I’m currently using and recommending
jQuery for most situations
• But... there’s cut-throat competition
between the various libraries at the moment
• This is one of the reasons I care about
interoperability - commit to a single library
and you might lose out when one of the
others jumps ahead of it

49. The law of leaky abstractions

50. http://www.joelonsoftware.com/articles/LeakyAbstractions.html
My interpretation:
The more you rely on
abstractions, the worse off you’ll
be when one of them leaks

51. Thank you!