JavaScript Library Overview

JavaScript Libraries John Resig - October 2008 http://ejohn.org/ http://twitter.com/jeresig/

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 ﬂexibility.

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.org is your lifeline • Excessively ﬂexible, to the point of hinderance.

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

Why use a library? • Makes JavaScript bearable • Gets the job done fast • Simpliﬁes 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, jQuery, Browser Backbase Yahoo UI, Dojo, Only SmartClient Mootools

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

Why these libraries?

March Developer Survey jQuery Prototype Yahoo UI Dojo Mootools Other 18% 34% 18% 8% 8% 13% http://ajaxian.com/archives/nitobi-survey-results-on-ajax- development

Google Trends jQuery Prototype Mootools 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

Not Included • (Besides obvious time constraints.) • ExtJS - Closed development • ASP.NET Ajax - Mostly .NET developers • GWT - Strictly limited to Java developers

The Libraries

Prototype

Prototype: Overview • Started March 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 • Looking at Prototype 1.6.0.2 • 1.6.0.3/1.6.1 release upcoming

jQuery

jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe • Corporate backing (Microsoft, Nokia)

jQuery: Focus • Improving the interaction between JavaScript and HTML • Highly-effective, short, code • Looking at jQuery 1.2.6 • 1.3 release upcoming

Yahoo! UI

YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and ﬁnanced internally • Attempt to standardize internal JavaScript

YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) • Yahoo UI 2.5.1 is current • Looking at 3.0 today (large overhaul)

Dojo

Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Corporate backing (IBM, AOL)

Dojo: Focus • Building complete web applications • A package hierarchy, e.g.: dojo.addClass( ... ) • Focus has transcended into widgets (Dijit) • Huge number of features • Today we’re looking at Dojo 1.1.1 • 1.2 coming soon

Mootools

Mootools: Overview • Released Sept 2006 by Valerio Proietti • A spiritual fork of Prototype that included animations, drag and drop, etc. • (Borrowed concepts like native prototype extension and classical object construction.) • Has evolved dramatically since then

Mootools: Focus • A clean classical structure • A more holistic approach to development • Tackle a solid core set of functionality • Include a couple core plugins • Looking at 1.2

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

Most Important Question: • Does the JavaScript library help me to write JavaScript. • The style of the library and its API is very core to this. • Can really only be determined through sitting down and playing with a library.

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 • Modiﬁcation • Create/remove/modify elements • Having a DOM builder is important

DOM Traversal • Prototype, Mootools: $$(“table > tr”) • jQuery: $(“div > p:nth-child(odd)”) • Dojo: dojo.query(“table tr:nth-child(even)”) • Yahoo UI: Y.get('div p')

DOM Modiﬁcation • Prototype: $(“list”).insert(“<li>Another item</li>”); • jQuery: $(“#li”).append(“<li>An item</li>”); • Mootools: $(“li”).append(new Element(“li”, {html: “An item”}));

DOM Manipulation • Dojo: dojo.query(“#li”).addContent(“<li>An item</li>”); • Yahoo UI: Y.get(“#li”).appendChild( Y.create(“<li>An item</li>”));

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

Events (cont.) • Yahoo UI: Y.get(“#list”).on(“click”, function(){ alert(“List Clicked”); }); • Dojo: dojo.query(\"#mylink\").connect(\"click\", function(){ alert(“Link clicked”); }); • Mootools: $$(\"#mylink\").addEvent(\"click\", function(){ alert(“Link clicked”); });

Ajax • Request and load remote documents • Prototype: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $$(‘#results’).invoke(“update”,( res.responseText ); } }); • jQuery: jQuery.get(“test.html”, function(html){ $(“#results”).html( html ); });

Ajax (cont.) • Yahoo UI Y.on(“io:complete”, function(id, data){ Y.get(“#results”).set(“innerHTML”, data.responseText); }); Y.io(“test.html”); • Dojo dojo.xhrGet({ url: \"test.html\", load: function(type, data) { dojo.query(“#results”).empty().addContent( data ); } });

Ajax (cont.) • Mootools: onComplete: function(t, e, html){ new Request.HTML({ $$(“#results”).html( html ); }}).get('myPage.html');

Ajax (cont.) • jQuery and Mootools are 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 • Prototype, using Scriptaculous: $(‘menu’).appear({duration: 0.6}); • jQuery: $(“#menu”).animate({opacity: 1}, 600);

Animations (cont.) • Yahoo UI: new Y.Anim({ node: “#list”, duration: 600, { to: {opacity: 1}}}).run(); • Dojo: dojo.query(“#list”).anim({opacity: 1}, 600); • Mootools: new Fx.Tween(“list”, {duration: 600}).start(“opacity”, 0, 1);

Core Feature Summary DOM Events Anim. Ajax Prototype X X / X jQuery X X X X Yahoo UI X X X X Dojo X X X X Mootools X X X X

User Interface Widgets • Difﬁcult 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 ofﬁcially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Mootools includes some in Core • 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/ﬁle explorer) • In Dojo and Yahoo UI

Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI

Modal Dialog • Display conﬁned content (usually drag & droppable) and conﬁrmation 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, jQuery) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI, jQuery) • Selectables (Dojo, Proto, jQuery) • Accordion (Dojo, jQuery, Mootools) • 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 • jQuery received funding and is working on ARIA integration to jQuery UI • Yahoo is investigating ARIA

Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size • Speed

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 conﬂict) • jQuery is extensible with plugins • Dojo uses a package system

Licensing • All use liberal licenses • MIT: (“Keep my name on the ﬁle”) Prototype, jQuery, Mootools • BSD: (“...and please don’t sue me.”) Yahoo UI, Dojo

Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 3+, Opera 9+ • Note: • Most are in the process of dropping support for Safari 2

File Size • Serving your JavaScript miniﬁed + Gzipped • Optimal level of compression and speed • Core ﬁle size (in KB): 35.00 26.25 17.50 8.75 0 Prototype jQuery Yahoo UI Dojo Mootools

Speed • Hard to quantify • Currently the only point of comparison is in CSS Selectors • Speed varies across browsers • Competition is strong (much faster than what they use to be) • DOM Modiﬁcation, Events completely un- compared

Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage

Development Team • Prototype, jQuery, Mootools, 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, Mootools, and Dojo all have code in a public SVN repositories • Yahoo UI’s development is private and is limited to Yahoo employees • They’re working to ﬁx this! • All have a public bug tracker

Unit Tests • All libraries have some automated unit tests • jQuery,Yahoo UI, and Dojo all have public unit test URLs • jQuery and Dojo have tests that can run in Rhino • UI Testing: Windmill,Yahoo UI, jQuery UI’s testing framework

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

API Documentation • Prototype, jQuery, Mootools, and Yahoo UI all have full coverage • Dojo’s coverage has improved dramatically • jQuery provides runnable examples with each API item

Tutorials • All libraries provide some tutorials • jQuery,Yahoo UI, and Dojo have screencasts/presentations • Prototype: 6 • jQuery: 118 (English) • Yahoo UI: 30+ (each component has at least one) • Dojo: 24

Books • Prototype: • Prototype and Scriptaculous in Action (Manning) • Prototype and Scriptaculous (Pragmatic) • jQuery: • Learning jQuery (Packt) • jQuery Reference Guide (Packt) • Yahoo UI: • Learning the Yahoo UI Library (Packt)

Books (cont.) • Dojo: • Dojo: The Deﬁnitive Guide (O’Reilly) • Mastering Dojo (Prag Prog) • Dojo (Developer’s Library) • Practical Dojo Projects (Apress) • Mootools: • Mootools Essentials (Apress)

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

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

Mailing List / Forum • Prototype, jQuery, Mootools, and Yahoo UI have mailing lists • Prototype: 32 posts/day • jQuery: 116 posts/day • Yahoo UI: 55 posts/day • Mootools: 21 posts/day • Dojo has an active forum • Mootools also has a user-built forum

Support and Training • Dojo provides paid support and training (via Sitepen) • jQuery provides paid jQuery UI support and training (via Liferay)

Popularity • Who uses what: • Prototype: Apple, ESPN, CNN, Fox News • jQuery: Google, IBM, Microsoft, Nokia • Yahoo:Yahoo, LinkedIn, Target, Slashdot • Dojo: IBM, AOL, Mapquest, Bloglines • Mootools: W3C, CNet,Vimeo, Jeep

Common Questions

Why don’t the libraries merge? • It’s really hard to have a uniﬁed backend • Everyone ﬁxes different bugs • Everyone implements *slightly* different features • A combined library would be massive

Can common components be made? • Possibly. • Again hit the problem of ﬁnding the correct mix of features and bugs. • Component would have to be very special.

Sizzle • Build common features • A common selector engine • Being integrated into: jQuery, Prototype, and MochiKit

Why not make a uniﬁed API? • A library’s API helps makes it unique • Embody different philosophies • Combining all of them and trying to please everyone creates a uniﬁed, boring, mess

More Information ... questions? • Prototype: http://prototypejs.org/ • jQuery: http://jquery.com/ • Yahoo UI: http://developer.yahoo.com/yui/ • Dojo: http://dojotoolkit.org/

JavaScript Library Overview

2 comments

Notes on slide 1

50 Favorites & 1 Group