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 Client/ Server AjaxCFC Qcodo Prototype jQuery Yahoo UI Dojo Commercial Atlas Backbase for Struts Backbase SmartClient

Browser Only

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

Browser Only

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

General Purpose

Ruby on Rails CakePHP

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

General Purpose

Ruby on Rails CakePHP

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-andDrop, 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 Prototype jQuery Yahoo UI Dojo X X / / X X X X Anim. X X X Ajax X 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)
namespace vs. Top Down (Dojo,Yahoo UI)

• jQuery, Dojo, and Yahoo UI all use a single • 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.”) Prototype, jQuery Yahoo UI, Dojo

• MIT:

• BSD:

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 • Core file size (in KB): 35.00
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, • All have paid, part-time, developers

full-time, developers working on the code

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 Rhino

• jQuery and Dojo have tests that can run in

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 progress

• Dojo’s coverage is spotty - work in

Tutorials
• All libraries provide some tutorials • jQuery and Yahoo UI have screencasts • Prototype: 6 • jQuery: 68 (English) • Yahoo UI: 32 • Dojo: 5

Books
• Prototype: • jQuery: • Yahoo UI: None • Dojo: A short online book
• •
Learning jQuery (Packt) jQuery Reference Guide (Packt)

• •

Prototype and Scriptaculous in Action (Manning) Prototype and Scriptaculous (Pragmatic)

Demos
• Yahoo UI provides a considerable number • jQuery provides live examples and a few
demo applications widgets of live demos and examples for all features

• Dojo provides demo applications for their

Community
• Active Mailing List / Forum • Support and Training • Popularity

Mailing List / Forum
• Prototype, jQuery, and Yahoo UI have
mailing lists

• Dojo has an active forum

• Prototype: 23 posts/day • jQuery: 108 posts/day • Yahoo UI: 36 posts/day

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: • jQuery: • Dojo: • Yahoo UI:
http://prototypejs.org/ http://jquery.com/ http://developer.yahoo.com/yui/ http://dojotoolkit.org/

Ajax Experience Presentations
• Presentations on: • Dojo (2) • Prototype (2) & Scriptaculous (1) • jQuery (3) • Go to one that sounds interesting and
enjoy!

Sign up to vote on this title
UsefulNot useful