How to make

Simon Willison - http://simonwillison.net/Web 2.0 Expo Berlin

7th November 2007

librarieswork for you

This talk

• JavaScript libraries!

• What they are

• Why they exist

• What they can do for you

• How to pick one

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?

“The bad news: JavaScript is broken.

The good news:It can be fixed with more JavaScript!”

Geek folk saying

• 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

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); } }}

• Prototype (and Scriptaculous)

• The Yahoo! User Interface Library - YUI

• jQuery

• The Dojo Toolkit

Narrowing them down...

Download API Docs Tips and Tutorials Blog Discuss Contribute

Prototype is a JavaScript Framework that aims toease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven

development and the nicest Ajax library around, Prototype

is quickly becoming the codebase of choice for web

application developers everywhere.

Prototype and script.aculo.us: The "Bungee

book" has landed!

Core team member Christophe

Porteneuve has been hard at work

for the past few months tracking

and documenting Prototype for his

new book Prototype and

script.aculo.us, which is now

available as a Beta Book from the

Pragmatic Programmers (and is

scheduled to ship later this year).

Read more !

DownloadGet the latest version—1.5.1

LearnOnline documentation and resources.

DiscussMailing list and IRC

ContributeSubmit patches and report bugs.

Who's using Prototype?

Meet the developers

© 2006-2007 Prototype Core Team | Licenses: MIT (source code) and CC BY-SA (documentation).

Prototype and Scriptaculous

• 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

• $, $$, $F, $A, $H

• var Animal = Class.create(...)

• new Ajax.Request(url[, options])

• Event.observe(el, 'click', function() { ... })

• "foo-bar".camelize() -> "fooBar"

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

• Wizzy extension for Prototype

• Huge collection of packaged effects

• AutoComplete, Slider, InPlaceEditor controls

• Drag and drop

Script.aculo.us

The Yahoo UI Library

• 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

dom event connection

animation dragdrop

utilities

controls

autocomplete calendar

menu slider treeview

container

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);});

$E = YAHOO.util.Event;$D = YAHOO.util.Dom;

$E.on(window, 'load', function() { var div = $D.get('messages'); ...});

Common YUI idiom

jQuery

• 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

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

$(function() { $("div.hideable"). css('cursor', 'pointer'). append('<p>Click to hide</p>'). click(function() { $(this).hide("slow"); return false; });});

The Dojo Toolkit

• 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

http://www.flickr.com/photos/aprillynn77/8818200/

dojo.collections

dojo.crypto

dojo.date

dojo.dnd

dojo.dom

dojo.event

dojo.io

dojo.lang

dojo.lfx

dojo.logging

dojo.math

dojo.reflect

dojo.rpc

dojo.storage

dojo.string

dojo.style

dojo.undo

dojo.uri

dojo.widget

dojo.xml

Dojo 0.4

Dojo 1.0

dojo

dijitdojox

• dojo

• Core library, similar to jQuery / Prototype

• Dynamic code loading and dependency management

• dijit

• Advanced widget system

• dojox

• Dojo eXperimental - crazy voodoo magic

Dojo components

dijit

<div dojoType="dijit.layout.TabContainer" sizeShare="40"><div id="tab1" dojoType="dijit.layout.ContentPane" title="Form Feel"> <h2>Various Form Elements:</h2> <form name="dijitFormTest"><p><input type="checkBox" dojoType="dijit.form.CheckBox" checked="checked">Standard Dijit CheckBox<br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled">Disabled Dijit<br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked">Checked and Disabled Dijit</p>...

dojox

• Graphics (cross-browser drawing API)

• Offline storage

• Cryptography

• Templating

• Data grids and more

• “The future of the browser today”

Honourable mentions

Ext JS

The Google Web Toolkit

What are the interesting ideas?

Interaction Design Patterns

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

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

So how do you pick one?

• It depends on what you are trying to build

So how do you pick one?

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!

• 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

The law of leaky abstractions

The more you rely on abstractions, the worse off you’ll

be when one of them leaks

http://www.joelonsoftware.com/articles/LeakyAbstractions.html

My interpretation:

Thank you!