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 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
Browser jQuery Backbase
Only Yahoo UI SmartClient
Dojo
10. 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
11. 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
12. 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
19. Prototype: Overview
• Started early 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
• Updated frequently
• Looking at Prototype 1.6.0.2
27. YUI: Overview
• Released Feb 2006 by Yahoo!
• Maintained and financed internally
• Attempt to standardize internal JavaScript
• Say ‘hi’ to Nate Koechley!
28. YUI: Focus
• Exposing, and solving, common
methodologies
• Looking for common idioms (Drag-and-
Drop, Calendar, Auto-Complete)
• Looking at Yahoo UI 2.5.1
30. Dojo: Overview
• Started early 2005 by Alex Russell + Co.
• Large development community
• Lots of corporate backing (IBM, AOL)
• Big code base, tons of features
31. 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 1.1.1
38. 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.
39. Code Base
• Core Functionality
• DOM
• Events
• Ajax
• Animations
• User Interface Widgets
40. Core Functionality
• Bare minimum needed to make a dynamic
“Ajax” web site:
• DOM (Traversal and Manipulation)
• Events
• Ajax
• Animations
41. DOM
• Traversal
• Using CSS selectors to locate elements
• Modification
• Create/remove/modify elements
• Having a DOM builder is important
43. 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
44. 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”);
});
49. 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”);
});
});
50. Animations
• Simple animations (hide/show/toggle)
• Provide elegant transitions
• No animations in Prototype Core (see
Scriptaculous, instead)
• jQuery:
$(“#menu”).slideDown(“slow”);
52. 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
53. 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
54. User Interface Packages
• Only looking at officially-supported code:
• Prototype has Scriptaculous
• jQuery has jQuery UI
• Dojo has Dijit
• Included in Yahoo UI
55. Drag & Drop
• Drag an item from one location and drop in
an other
• Supported by all libraries
56. Tree
• A navigable hierarchy
(like a folder/file
explorer)
• In Dojo and Yahoo UI
57. Grid
• An advanced table (resizable, editable, easily
navigable)
• In Dojo and Yahoo UI
58. Modal Dialog
• Display confined content (usually drag &
droppable) and confirmation dialogs
• In Dojo,Yahoo UI, and jQuery
59. Tabbed Pane
• Multiple panes of content navigable by a
series of tabs
• In Dojo,Yahoo UI, and jQuery
60. Menu / Toolbar
• A list of navigable items (with sub-menus)
• In Dojo and Yahoo UI
61. Datepicker
• An input for selecting a
date (or a range of
dates)
• In Dojo,Yahoo UI, and
jQuery
62. Slider
• A draggable input for entering a general,
numerical, value
• In all libraries
64. Themeing
• A consistent look-and-feel for widgets
• jQuery,Yahoo UI, and Dojo provide
themeing capabilities
• jQuery’s and Yahoo UI’s are documented
65. 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
67. 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
68. Licensing
• All use liberal licenses
• MIT: (“Keep my name on the file”)
Prototype, jQuery
• BSD: (“...and please don’t sue me.”)
Yahoo UI, Dojo
69. Browser Support
• Everyone supports:
IE 6+, Firefox 2+, Safari 2+, Opera 9+
• Note:
• Most are in the process of dropping
support for Safari 2
70. 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
71. 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
73. 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
74. SVN / Bug Tracker
• Prototype, jQuery, 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 libraries have a public bug tracker
75. 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
77. API Documentation
• Prototype, jQuery, and Yahoo UI all have full
coverage
• jQuery provides runnable examples with
each API item
• Dojo’s coverage is improving - work in
progress (dojocampus.org, etc.)
78. 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
79. 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)
• Dojo: 3 books coming in 2008
80. 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
82. Mailing List / Forum
• Prototype, jQuery, and Yahoo UI have
mailing lists
• Prototype: 23 posts/day
• jQuery: 76 posts/day
• Yahoo UI: 56 posts/day
• Dojo has an active forum
83. Support and Training
• Dojo provides paid support and training
(via Sitepen)
• jQuery provides paid jQuery UI support
and training (via Liferay)
86. 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
87. 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.
88. Why not make a unified
API?
• A library’s API helps makes it unique
• Embody different philosophies
• Combing all of them and trying to please
everyone creates a unified, boring, mess
89. More Information
... questions?
• Prototype:
http://prototypejs.org/
• jQuery:
http://jquery.com/
• Yahoo UI:
http://developer.yahoo.com/yui/
• Dojo:
http://dojotoolkit.org/