javascript libraries (@media)
DESCRIPTION
@Media (June 2008).TRANSCRIPT
JavaScript LibrariesJohn Resig - May 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 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
Client/ Server
AjaxCFCQcodo
AtlasBackbase for
Struts
Browser Only
PrototypejQuery
Yahoo UIDojo
BackbaseSmartClient
What kind of libraries exist?Open Source Commercial
Client/ Server
AjaxCFCQcodo
AtlasBackbase for
Struts
Browser Only
PrototypejQuery
Yahoo UIDojo
BackbaseSmartClient
Open Source LibrariesBrowser Only Client/Server
Task Specific
Scriptaculousmoo.fx
Open Rico
AjaxCFCQcodo
General Purpose
PrototypejQuery
Yahoo UIDojo
Ruby on RailsCakePHP
Open Source LibrariesBrowser Only Client/Server
Task Specific
Scriptaculousmoo.fx
Open Rico
AjaxCFCQcodo
General Purpose
PrototypejQuery
Yahoo UIDojo
Ruby on RailsCakePHP
Why these libraries?
Developer Survey
32%
32%
22%
14%
jQuery Prototype Yahoo UI Dojo
http://ajaxian.com/archives/nitobi-survey-results-on-ajax-development
Google Trends
jQueryPrototype
DojoYahoo 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
Others
• Only so much time in a day!
• MooTools
• ExtJS
• Ajax.NET
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.2
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.6
Yahoo! UI
YUI: Overview
• Released Feb 2006 by Yahoo!
• Maintained and financed internally
• Attempt to standardize internal JavaScript
• Say ‘hi’ to Nate Koechley!
YUI: Focus
• Exposing, and solving, common methodologies
• Looking for common idioms (Drag-and-Drop, Calendar, Auto-Complete)
• Looking at Yahoo UI 2.5.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 1.1.1
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
• 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:YAHOO.util.Selector.query('div p')
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”);});
Events (cont.)
• Yahoo UI:YAHOO.util.Event.addEventListener(“list”, “click”, function(){ alert(“List Clicked”);});
• Dojo:dojo.connect(dojo.byId("mylink"), "click", function(){ alert(“Link clicked”);});
Custom Events
• $(“#list”).bind(“drag”, function(){ $(this).addClass(“dragged”);});
• $(“#test”).trigger(“drag”);
Ajax• Request and load remote documents
• Prototype:new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $(‘results’).innerHTML = res.responseText; }});
• jQuery:$(“#results”).load(“test.html”);
Ajax (cont.)• Yahoo UI
YAHOO.util.Connect.asyncRequest( 'GET', “test.html”, function(data){ YAHOO.util.Dom.id(“results”).innerHTML = data; });
• Dojodojo.io.bind({ url: "test.html", method: "get", mimetype: "text/html", load: function(type, data) { dojo.byId(“results”).innerHTML = data; }});
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”);
Animations (cont.)
• Yahoo UI:new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut);
• Dojo:dojo.fadeOut({ node: dojo.byId(“list”), duration: 500 });
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
• 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
Tons More!
• Color Picker (Dojo, YUI)
• Layout (Dojo, YUI)
• Auto Complete (Dojo, Proto, YUI)
• Selectables (Proto, jQuery)
• Accordion (Dojo, jQuery)
• 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 conflict)
• jQuery is extensible with plugins
• Dojo uses a package system
Licensing
• All use liberal licenses
• MIT: (“Keep my name on the file”)Prototype, jQuery
• BSD: (“...and please don’t sue me.”)Yahoo UI, Dojo
Browser Support
• Everyone supports:IE 6+, Firefox 2+, Safari 2+, Opera 9+
• Note:
• Most are in the process of dropping support for Safari 2
File Size
• Serving your JavaScript minified + Gzipped
• Optimal level of compression and speed
• Core file size (in KB):
0
8.75
17.50
26.25
35.00
Prototype jQuery Yahoo UI Dojo
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
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 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
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
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 improving - work in progress (dojocampus.org, etc.)
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)
• Dojo: 3 books coming in 2008
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: 76 posts/day
• Yahoo UI: 56 posts/day
• Dojo has an active 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, Amazon, Digg, NBC, Intel
• Yahoo: Yahoo, LinkedIn, Target, Slashdot
• Dojo: IBM, AOL, Mapquest, Bloglines
Common Questions
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
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.
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
More Information... questions?
• Prototype:http://prototypejs.org/
• jQuery:http://jquery.com/
• Yahoo UI:http://developer.yahoo.com/yui/
• Dojo:http://dojotoolkit.org/