JavaScript LibrariesAjax 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

Client/ Server

AjaxCFCQcodo

AtlasBackbase for

Struts

Browser Only

PrototypejQuery

Yahoo UIDojo

BackbaseSmartClient

What kind of libraries exist?Open Source Commercial

Client/ Server

AjaxCFCQcodo

AtlasBackbase for

Struts

Browser Only

PrototypejQuery

Yahoo UIDojo

BackbaseSmartClient

Open Source LibrariesBrowser Only Client/Server

Task Specific

Scriptaculousmoo.fx

Open Rico

AjaxCFCQcodo

General Purpose

PrototypejQuery

Yahoo UIDojo

Ruby on RailsCakePHP

Open Source LibrariesBrowser Only Client/Server

Task Specific

Scriptaculousmoo.fx

Open Rico

AjaxCFCQcodo

General Purpose

PrototypejQuery

Yahoo UIDojo

Ruby on RailsCakePHP

Why these libraries?

Ajaxian Survey

35%

25%

21%

20%

Prototype jQuery Yahoo UI Dojo

http://ajaxian.com/archives/ajaxian-2007-survey-results

Google Trends

jQuery

Prototype

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

• Dojodojo.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

• Core file size (in KB):

0

8.75

17.50

26.25

35.00

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!