JavaScript Libraries

Ajax Experience - October 2007

John Resig (ejohn.org)

Question: How do you want
to write JavaScript?
 1) Plug-and-Play

• Drop in a “calendar widget” or “tabbed

navigation”
• Little, to no, JavaScript experience required.
• Just customize some options and go.
• No flexibility.
 2) Some Assembly
Required
• Write common utilities
• Click a link, load a page via Ajax
• Build a dynamic menu
• Creating interactive forms
• Use pre-made code to distance yourself
from browser bugs.
• Flexible, until you hit a browser bug.
 3) Down-and-Dirty

• Write all JavaScript code from scratch

• Deal, directly, with browser bugs
• Quirksmode is your lifeline
• Excessively flexible, to the point of
hinderance.
What we’ve just seen...

• Widgets
• Libraries
• Raw JavaScript
What we’ve just seen...

• Widgets
• Libraries
• Raw JavaScript
 Why use a library?

• Makes JavaScript bearable

• Gets the job done fast
• Simplifies cross-browser support
• Sort of like C stdlib - no one just codes all
of C by hand
 What kind of libraries exist?
Open Source Commercial
Atlas
Client/ AjaxCFC
Backbase for
Server Qcodo
Struts

Prototype
Browser jQuery Backbase
Only Yahoo UI SmartClient
Dojo
 What kind of libraries exist?
Open Source Commercial
Atlas
Client/ AjaxCFC
Backbase for
Server Qcodo
Struts

Prototype
Browser jQuery Backbase
Only Yahoo UI SmartClient
Dojo
 Open Source Libraries
Browser Only Client/Server
Scriptaculous
Task AjaxCFC
moo.fx
Specific Qcodo
Open Rico

Prototype
General jQuery Ruby on Rails
Purpose Yahoo UI CakePHP
Dojo
 Open Source Libraries
Browser Only Client/Server
Scriptaculous
Task AjaxCFC
moo.fx
Specific Qcodo
Open Rico

Prototype
General jQuery Ruby on Rails
Purpose Yahoo UI CakePHP
Dojo
Why these libraries?
 Ajaxian Survey
Prototype jQuery Yahoo UI Dojo

20%

35%

21%

25%
http://ajaxian.com/archives/ajaxian-2007-survey-results
 Google Trends

Prototype
jQuery
Dojo
Yahoo UI

http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
The Libraries
Prototype
 Prototype: Overview

• Started early 2005 by Sam Stephenson

• Incredibly popular, tied with Ruby on Rails’
popularity
• Development backed by 37 Signals
 Prototype: Focus

• Improving the usability of the JavaScript

language
• Big emphasis on adding in ‘missing’
JavaScript features
• Clean structure, clean objects and ‘classes’
 Prototype: Details

• Code quality is fantastic, great features

• All animations (and interactions) are in
Scriptaculous
• Updated frequently
• Looking at Prototype 1.6.0
jQuery
 jQuery: Overview

• Released January 2006 by John Resig

• Rapid rise in popularity
• Many developers across the globe
 jQuery: Focus

• Improving the interaction between

JavaScript and HTML
• Finding elements then performing actions
• Highly-effective, short, code
 jQuery: Details

• Core features are limited to DOM, Events,

Effects, Ajax
• Other features can be added in via plugins
• Looking at jQuery 1.2.1
Yahoo! UI
 YUI: Overview

• Released Feb 2006 by Yahoo!

• Maintained and financed internally
• Attempt to standardize internal JavaScript
 YUI: Focus

• Exposing, and solving, common

methodologies
• Looking for common idioms (Drag-and-
Drop, Calendar, Auto-Complete)
• Looking at Yahoo UI 2.3.1
Dojo
 Dojo: Overview

• Started early 2005 by Alex Russell + Co.

• Large development community
• Lots of corporate backing (IBM, AOL)
• Big code base, tons of features
 Dojo: Focus
• Building complete web applications
• A package heirarchy, e.g.:
dojo.addClass( ... )
• Focus has transcended into widgets (Dijit)
• Huge number of features
• Today we’re looking at Dojo 0.9
What should a library have?
 Code Base
• Core Functionality
• DOM
• Events
• Ajax
• Animations
• User Interface Widgets
 Development

• Good Architecture
• Open Licensing
• Wide Browser Support
• Small File Size
 Project

• Development Team (Open, Funded)

• Code in SVN / Bug Tracker
• Good Unit Test Coverage
 Documentation

• Full API Coverage

• Plenty of Tutorials
• Some Books
• Wide variety of Demos
 Community

• Active Mailing List / Forum

• Support and Training
• Popularity
 Code Base
• Core Functionality
• DOM
• Events
• Ajax
• Animations
• User Interface Widgets
 Core Functionality
• Bare minimum needed to make a dynamic
“Ajax” web site:
• DOM (Traversal and Manipulation)
• Events
• Ajax
• Animations
 DOM

• Traversal
• Using CSS selectors to locate elements
• Modification
• Create/remove/modify elements
• Having a DOM builder is important
 DOM Traversal

• Prototype:
$$(“table > tr”)

• jQuery:
$(“div > p:nth-child(odd)”)

• Dojo:
dojo.query(“table tr:nth-child(even)”)

• Yahoo UI:
No querying support
 DOM Modification

• Prototype:
Insertion.Bottom(“list”,”<li>Another item</li>”);

• jQuery:
$(“#li”).append(“<li>An item</li>”);

• Dojo and Yahoo UI have weak support - no DOM

building capabilities, basic property modification
 Events
• Support for simple event binding/removal
• Support for custom events is essential
• Prototype:
Event.observe(“button”,”click”, function(){
alert(“Thanks for the click!”);
});
• jQuery:
$(“div”).click(function(){
alert(“div clicked”);
});
 Events (cont.)

• Yahoo UI:
YAHOO.util.Event.addEventListener(“list”, “click”, function(){
alert(“List Clicked”);
});

• Dojo:
dojo.connect(dojo.byId("mylink"), "click", function(){
alert(“Link clicked”);
});
 Custom Events

• $(“#list”).bind(“drag”, function(){
$(this).addClass(“dragged”);
});
• $(“#test”).trigger(“drag”);
 Ajax
• Request and load remote documents

• Prototype:
new Ajax.Request(“test.html”, {
method: “GET”,
onComplete: function(res){
$(‘results’).innerHTML = res.responseText;
}
});

• jQuery:
$(“#results”).load(“test.html”);
 Ajax (cont.)
• Yahoo UI
YAHOO.util.Connect.asyncRequest(
'GET', “test.html”, function(data){
YAHOO.util.Dom.id(“results”).innerHTML = data;
}
);

• Dojo
dojo.io.bind({
url: "test.html",
method: "get",
mimetype: "text/html",
load: function(type, data) {
dojo.byId(“results”).innerHTML = data;
}
});
 Ajax (cont.)
• jQuery is only one capable of doing DOM
traversing over XML
• jQuery.get(“test.xml”, function(xml){
$(“user”, xml).each(function(){
$(“<li/>”).text( $(this).text() )
.appendTo(“#userlist”);
});
});
 Animations
• Simple animations (hide/show/toggle)
• Provide elegant transitions
• No animations in Prototype Core (see
Scriptaculous, instead)
• jQuery:
$(“#menu”).slideDown(“slow”);
 Animations (cont.)

• Yahoo UI:
new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1,
YAHOO.util.Easing.easeOut
);

• Dojo:
dojo.fadeOut({ node: dojo.byId(“list”), duration: 500 });
 Core Feature Summary
DOM Events Anim. Ajax

Prototype X X - X

jQuery X X X X

Yahoo UI / X X X

Dojo / X X X
User Interface Widgets
• ejohn.org <-- slides
• Difficult to implement components, made
easy
• Commonly used, save duplication
• Some common components:
Drag & Drop, Tree, Grid, Modal Dialog,
Tabbed Pane, Menu / Toolbar, Datepicker,
Slider
User Interface Packages

• Only looking at officially-supported code:

• Prototype has Scriptaculous
• jQuery has jQuery UI
• Dojo has Dijit
• Included in Yahoo UI
 Drag & Drop

• Drag an item from one location and drop in

an other
• Supported by all libraries
 Tree

• A navigable hierarchy
(like a folder/file
explorer)

• In Dojo and Yahoo UI

 Grid

• An advanced table (resizable, editable, easily

navigable)
• In Dojo and Yahoo UI
 Modal Dialog

• Display confined content (usually drag &

droppable) and confirmation dialogs
• In Dojo,Yahoo UI, and jQuery
 Tabbed Pane

• Multiple panes of content navigable by a

series of tabs
• In Dojo,Yahoo UI, and jQuery
 Menu / Toolbar

• A list of navigable items (with sub-menus)

• In Dojo and Yahoo UI
 Datepicker

• An input for selecting a

date (or a range of
dates)

• In Dojo,Yahoo UI, and

jQuery
 Slider

• A draggable input for entering a general,

numerical, value
• In all libraries
 Tons More!
• Color Picker (Dojo,YUI)
• Layout (Dojo,YUI)
• Auto Complete (Dojo, Proto,YUI)
• Selectables (Proto, jQuery)
• Accordion (Dojo, jQuery)
• WYSIWYG (Dojo,YUI)
 Themeing

• A consistent look-and-feel for widgets

• jQuery,Yahoo UI, and Dojo provide
themeing capabilities
• jQuery’s and Yahoo UI’s are documented
 Accessibility

• Taking in to consideration points from

ARIA (Accessible Rich Internet
Applications)
• Dojo is taking a solid lead, here
 Development

• Good Architecture
• Open Licensing
• Wide Browser Support
• Small File Size
 Architecture
• Bottom Up (Prototype, jQuery)
vs. Top Down (Dojo,Yahoo UI)
• jQuery, Dojo, and Yahoo UI all use a single
namespace
• Prototype extends native objects (high
likelihood of inter-library conflict)
• jQuery is extensible with plugins
 Licensing

• All use liberal licenses (“Keep my name on

the file, don’t sue me.”)
• MIT:
Prototype, jQuery
• BSD:
Yahoo UI, Dojo
 Browser Support

• Everyone supports:
IE 6+, Firefox 2+, Safari 2+, Opera 9+
• Except:
• Prototype doesn’t support Opera
• Dojo is dropping support for Safari 2
 File Size
• Serving your JavaScript minified + Gzipped
• Optimal level of compression and speed
•35.00Core file size (in KB):
26.25

17.50

8.75

0
Prototype jQuery Yahoo UI Dojo
 Project

• Development Team (Open, Funded)

• Code in SVN / Bug Tracker
• Good Unit Test Coverage
 Development Team

• Prototype, jQuery, and Dojo all have open

development (anyone can contribute)
• jQuery,Yahoo UI, and Dojo all have paid,
full-time, developers working on the code
• All have paid, part-time, developers
 SVN / Bug Tracker

• Prototype, jQuery, and Dojo all have code

in a public SVN repositor
• Yahoo UI’s development is private and is
limited to Yahoo employees
• All libraries have a public bug tracker
 Unit Tests

• All libraries have some automated unit

tests
• jQuery,Yahoo UI, and Dojo all have public
unit tests
• jQuery and Dojo have tests that can run in
Rhino
 Documentation

• Full API Coverage

• Plenty of Tutorials
• Some Books
• Wide variety of Demos
 API Documentation

• Prototype, jQuery, and Yahoo UI all have full

coverage
• jQuery provides runnable examples with
each API item
• Dojo’s coverage is spotty - work in
progress
 Tutorials
• All libraries provide some tutorials
• jQuery and Yahoo UI have screencasts
• Prototype: 6
• jQuery: 68 (English)
• Yahoo UI: 32
• Dojo: 5
 Books
• Prototype:
• Prototype and Scriptaculous in Action (Manning)

• Prototype and Scriptaculous (Pragmatic)

• jQuery:
• Learning jQuery (Packt)

• jQuery Reference Guide (Packt)

• Yahoo UI: None

• Dojo: A short online book
 Demos

• Yahoo UI provides a considerable number

of live demos and examples for all features
• jQuery provides live examples and a few
demo applications
• Dojo provides demo applications for their
widgets
 Community

• Active Mailing List / Forum

• Support and Training
• Popularity
 Mailing List / Forum
• Prototype, jQuery, and Yahoo UI have
mailing lists
• Prototype: 23 posts/day
• jQuery: 108 posts/day
• Yahoo UI: 36 posts/day
• Dojo has an active forum
 Support and Training

• Dojo provides paid support and training

(via Sitepen)
 Popularity

• Who uses what:

• Prototype: Apple, ESPN, CNN, Fox News
• jQuery: Google, Amazon, Digg, NBC, Intel
• Yahoo:Yahoo, LinkedIn, Target, Slashdot
• Dojo: IBM, AOL, Mapquest, Bloglines
 More Information
• Prototype:
http://prototypejs.org/
• jQuery:
http://jquery.com/
• Yahoo UI:
http://developer.yahoo.com/yui/
• Dojo:
http://dojotoolkit.org/
 Ajax Experience
Presentations
• Presentations on:
• Dojo (2)
• Prototype (2) & Scriptaculous (1)
• jQuery (3)
• Go to one that sounds interesting and
enjoy!