In case anyone cares, here is the URL to recreate slide 15: http://www.google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
5 years ago
Are you sure you want to
jeresig@handcoding: We've been talking about it - we'd like to get some support landed into jQuery UI (where it would be most appropriate). So, yes, we're thinking and talking about it!
5 years ago
Are you sure you want to
handcodingAre there any plans, by chance, for some accessibility / ARIA additions to jQuery? :)
5 years ago
Are you sure you want to
jeresig@guest Thanks! I've given this presentation a couple times now - but this one was a complete overhaul of the talks that I've done before. I'm pleased to see that the Ajax Experience people have asked me to give this talk 3 times now - I think that helps to speak to my attempted impartiality ;-)
JavaScript Libraries
Ajax 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
Atlas
Client/ AjaxCFC
Backbase for
Server Qcodo
Struts
Prototype
Browser jQuery Backbase
Only Yahoo UI SmartClient
Dojo
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
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
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
Google Trends
Prototype
jQuery
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
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”);
});
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”);
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
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):
35.00
26.25
17.50
8.75
0
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)
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!
L.O.V.E.
http://kumatte.com/ 4 years ago
(updates slide #40)
thanks for posting these. great stuff.
Thanks,
Nate
YUI Team, Yahoo!. 5 years ago
(updates sllide #40)
thanks for posting these. great stuff.
Thanks,
Nate
YUI Team, Yahoo!. 5 years ago
5 years ago
In case anyone cares, here is the URL to recreate slide 15:
http://www.google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
5 years ago
5 years ago
5 years ago
5 years ago