Talk I gave at Ajax Experience '08.

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

2. Question: How do you want
to write JavaScript?

3. 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.

4. 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.

5. 3) Down-and-Dirty
• Write all JavaScript code from scratch
• Deal, directly, with browser bugs
• Quirksmode.org is your lifeline
• Excessively flexible, to the point of
hinderance.

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

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

8. 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

9. 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

10. 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

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

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

13. Why these libraries?

14. 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

15. 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

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

17. The Libraries

18. Prototype

19. Prototype: Overview
• Started March 2005 by Sam Stephenson
• Incredibly popular, tied with Ruby on Rails’
popularity
• Development backed by 37 Signals

20. Prototype: Focus
• Improving the usability of the JavaScript
language
• Big emphasis on adding in ‘missing’
JavaScript features
• Clean structure, clean objects and ‘classes’

21. 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

22. jQuery

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

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

25. Yahoo! UI

26. YUI: Overview
• Released Feb 2006 by Yahoo!
• Maintained and financed internally
• Attempt to standardize internal JavaScript

27. 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)

28. Dojo

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

30. 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

31. Mootools

32. 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

33. 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

34. What should a library have?

35. Code Base
• Core Functionality
• DOM
• Events
• Ajax
• Animations
• User Interface Widgets

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

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

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

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

40. 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.

41. Code Base
• Core Functionality
• DOM
• Events
• Ajax
• Animations
• User Interface Widgets

42. Core Functionality
• Bare minimum needed to make a dynamic
“Ajax” web site:
• DOM (Traversal and Manipulation)
• Events
• Ajax
• Animations

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

44. 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')

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

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

47. 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”);
});

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

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

50. 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: quot;test.htmlquot;,
load: function(type, data) {
dojo.query(“#results”).empty().addContent( data );
}
});

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

52. 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”);
});
});

53. Animations
• Simple animations (hide/show/toggle)
• Provide elegant transitions
• Prototype, using Scriptaculous:
$(‘menu’).appear({duration: 0.6});
• jQuery:
$(“#menu”).animate({opacity: 1}, 600);

54. 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);

55. 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

56. User Interface Widgets
• 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

57. User Interface Packages
• Only looking at officially-supported code:
• Prototype has Scriptaculous
• jQuery has jQuery UI
• Dojo has Dijit
• Mootools includes some in Core
• Included in Yahoo UI

58. Drag & Drop
• Drag an item from one location and drop in
an other
• Supported by all libraries

59. Tree
• A navigable hierarchy
(like a folder/file
explorer)
• In Dojo and Yahoo UI

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

61. Modal Dialog
• Display confined content (usually drag &
droppable) and confirmation dialogs
• In Dojo,Yahoo UI, and jQuery

62. Tabbed Pane
• Multiple panes of content navigable by a
series of tabs
• In Dojo,Yahoo UI, and jQuery

63. Menu / Toolbar
• A list of navigable items (with sub-menus)
• In Dojo and Yahoo UI

64. Datepicker
• An input for selecting a
date (or a range of
dates)
• In Dojo,Yahoo UI, and
jQuery

65. Slider
• A draggable input for entering a general,
numerical, value
• In all libraries

66. 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)

67. Themeing
• A consistent look-and-feel for widgets
• jQuery,Yahoo UI, and Dojo provide
themeing capabilities
• jQuery’s and Yahoo UI’s are documented

68. 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

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

70. 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
• Dojo uses a package system

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

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

73. 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 Mootools

74. 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 Modification, Events completely un-
compared

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

76. 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

77. 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 fix this!
• All have a public bug tracker

78. 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

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

80. 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

81. 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

82. 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)

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

84. 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

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

86. 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

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

88. 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

89. Common Questions

90. Why don’t the libraries
merge?
• It’s really hard to have a unified backend
• Everyone fixes different bugs
• Everyone implements *slightly* different
features
• A combined library would be massive

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

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

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

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