The document discusses various JavaScript libraries including Prototype, jQuery, Yahoo UI, and Dojo. It compares the libraries across categories like core functionality, widgets, architecture, licensing, browser support, development, and documentation. The core functionality discussed includes DOM manipulation, events, AJAX, and animations. Popular widgets provided by the libraries include drag and drop, trees, grids, modal dialogs, tabbed panes, menus/toolbars, datepickers and sliders. The document also covers considerations for the libraries like licensing, browser support, ongoing development, and quality of documentation and tutorials.
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
42. 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
43. 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”);
});
48. 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”);
});
});
49. Animations
• Simple animations (hide/show/toggle)
• Provide elegant transitions
• No animations in Prototype Core (see
Scriptaculous, instead)
• jQuery:
$(“#menu”).slideDown(“slow”);
51. 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
52. 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
53. User Interface Packages
• Only looking at officially-supported code:
• Prototype has Scriptaculous
• jQuery has jQuery UI
• Dojo has Dijit
• Included in Yahoo UI
54. Drag & Drop
• Drag an item from one location and drop in
an other
• Supported by all libraries
55. Tree
• A navigable hierarchy
(like a folder/file
explorer)
• In Dojo and Yahoo UI
56. Grid
• An advanced table (resizable, editable, easily
navigable)
• In Dojo and Yahoo UI
57. Modal Dialog
• Display confined content (usually drag &
droppable) and confirmation dialogs
• In Dojo,Yahoo UI, and jQuery
58. Tabbed Pane
• Multiple panes of content navigable by a
series of tabs
• In Dojo,Yahoo UI, and jQuery
59. Menu / Toolbar
• A list of navigable items (with sub-menus)
• In Dojo and Yahoo UI
60. Datepicker
• An input for selecting a
date (or a range of
dates)
• In Dojo,Yahoo UI, and
jQuery
61. Slider
• A draggable input for entering a general,
numerical, value
• In all libraries
63. Themeing
• A consistent look-and-feel for widgets
• jQuery,Yahoo UI, and Dojo provide
themeing capabilities
• jQuery’s and Yahoo UI’s are documented
64. 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
66. 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
67. Licensing
• All use liberal licenses (“Keep my name on
the file, don’t sue me.”)
• MIT:
Prototype, jQuery
• BSD:
Yahoo UI, Dojo
68. Browser Support
• Everyone supports:
IE 6+, Firefox 2+, Safari 2+, Opera 9+
• Note:
• Most are in the process of dropping
support for Safari 2
69. 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. 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
72. 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
73. 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
75. 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.)
76. Tutorials
• All libraries provide some tutorials
• jQuery,Yahoo UI, and Dojo have
screencasts/presentations
• Prototype: 6
• jQuery: 118 (English)
• Yahoo UI: Numerous (each component has
at least one)
• Dojo: 24
77. 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
78. 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
80. 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
81. Support and Training
• Dojo provides paid support and training
(via Sitepen)
• jQuery provides paid jQuery UI support
and training (via Liferay)