JavaScript Libraries:

The Big Picture

Simon Willison
XTech, 16th May 2007
• What problems do libraries solve?
• An overview of the Big Four
• ... what are the interesting ideas?
Personal bias
• I like JavaScript-the-language
• So I won't be talking about frameworks that
generate JavaScript code for you
 “ The Web is the most
hostile software engineering
environment imaginable.”
Douglas Crockford
The legacy of the
browser wars
• The DOM API kind of sucks
• Event handling is frequently broken
• Ajax is inconsistent
• You have to roll your own animation
• Drag and drop is tricky
• Co-ordinates are surprisingly hard
• Internet Explorer leaks memory like a sieve
 The Event model
// Internet Explorer
element.attachEvent('click',
function() {
alert(window.event);
}
)
// Everyone else
element.addEventListener('click',
function(ev) { alert(ev) }, false
);
 “The bad news:
JavaScript is broken.
The good news:
It can be fixed with
more JavaScript!”
Geek folk saying
 The big four

• The Dojo Toolkit

• The Yahoo! User Interface Library
• Prototype (and Script.aculo.us)
• jQuery
The Dojo Toolkit
• Founded in 2004
• Originally unified from a bunch of older
frameworks

• Initial aim was to show that JavaScript /

DHTML should be taken seriously

• Enormous amount of smart technology

dojo.collections dojo.math

dojo.crypto dojo.reflect

dojo.date dojo.rpc

dojo.dnd dojo.storage

dojo.dom dojo.string

dojo.event 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/
 dijit
• The Dojo widget system
• Create widgets programmatically, or use
declarative markup

<div dojoType="dijit.TitlePane"
label="Terms and Conditions"
width="200">
Text...
</div>
 The future today

• Cross browser 2D drawing APIs

• dojo.storage - store data offline
• dojo.undo.browser - history management
• The Dojo Offline Toolkit
The Yahoo! User Interface Library
 YUI

• 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
 controls

autocomplete calendar container

menu slider treeview

animation dragdrop

dom event connection

utilities
YAHOO.util.Event.on(window, 'load', function() {

var div = YAHOO.util.Dom.get('messages');

if (!div) {


return;

}

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);
});
 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
Prototype and Script.aculo.us
Prototype and script.aculo.us: The "Bungee
book" has landed!
Submit patches and report bugs.

Who's using Prototype?

Meet the developers
Core team member Christophe
Porteneuve has been hard at work
for the past few months tracking
• Integrated with Ruby on Rails, but can be
used separately as well

• Small, readable codebase - Prototype is just

3,000 lines

• Makes JavaScript behave more like Ruby

• This is a dual-edged sword
$$('#bmarks li').each(function(li){
Event.observe(li, 'click', function(e) {
this.style.backgroundColor = 'yellow';
}.bindAsEventListener(li));
});
 Script.aculo.us

• Wizzy extension for Prototype

• Huge collection of packaged effects
• AutoComplete, Slider, InPlaceEditor controls
• Drag and drop
• Easier DOM building
jQuery
$(document).ready(function(){
$("a").addClass('hidden').click(
function() {
$(this).hide("slow");
return false;
});
);
});
 It’s not a gimmick!
• API designed around “chaining”
• Built in support for onContentLoaded
• Outstanding node selection
• CSS 3, XPath and custom extensions
• Small core library, smart plugin mechanism
• visualjquery.com/ offers the best docs
!?
Playing well with others
 “Namespaces are one
honking great idea -- let's
do more of those!”
Tim Peters, “The Zen of Python”
python -c "import this"
 Prototype

var moo = $('moo');

['foo', 'bar'].each(function(id) {
// ...
});
"This is a string".dasherize()
Object.toJSON({foo: 'bar'}
 YUI
YAHOO.util.Event.on(
YAHOO.util.Dom.get('foo'),
'click',
function(ev) {
YAHOO.util.Event.stopEvent(ev);
// ...
}
);
 YUI idiom
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
$E.on(
$D.get('foo'), 'click',
function(ev) {
$E.stopEvent(ev);
// ...
}
);
 jQuery

• Everything it does is encapsulated in the

jQuery function / object
• $(...) is just a shortcut for jQuery(...)
• If it exists, the original $ function is stashed
away in jQuery._$
• You can restore it with jQuery.noConflict()
 jQuery.noConflict()
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(function($) {
$('div.panel').hide();
// ...
});
</script>
 Progressive
enhancement
http://www.neighbourhoodfixit.com/
Some neat ideas
Interaction Design Patterns
 Smart node selection

• Progressive enhancement inevitably starts out by

selecting existing nodes

• jQuery is based entirely around node selection

• Prototype has node selection as a key API

• YUI and Dojo just have getElementsByClassName

• YUI-ext offers smarter selections for YUI

 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
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
 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();
 XPath optimisations

• Mozilla and Opera offer fast XPath lookups

through document.evaluate(...)
• Dojo can use this for getElementsByClass()
• Prototype redefines getElementsBySelector
to use XPath
 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
 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

The law of leaky abstractions
You need to understand
what your library
is doing for you
Thank you
http://www.flickr.com/photos/klara/94704029/

http://www.flickr.com/photos/petele/407151800/

http://www.flickr.com/photos/adactio/464449077/

http://www.flickr.com/photos/thepartycow/62830567/

http://www.flickr.com/photos/lunchtimemama/97685471/