8/8/2019 Javascript Library Overview 1193202840830224 1
1/83
JavaScript LibrariesAjax Experience - October 2007John Resig (ejohn.org)
8/8/2019 Javascript Library Overview 1193202840830224 1
2/83
Question: How do you wantto write JavaScript?
8/8/2019 Javascript Library Overview 1193202840830224 1
3/83
1) Plug-and-Play
Drop in a calendar widget or tabbednavigation
Little, to no, JavaScript experience required.
Just customize some options and go.
No flexibility.
8/8/2019 Javascript Library Overview 1193202840830224 1
4/83
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 yourselffrom browser bugs.
Flexible, until you hit a browser bug.
8/8/2019 Javascript Library Overview 1193202840830224 1
5/83
3) Down-and-Dirty
Write all JavaScript code from scratch
Deal, directly, with browser bugs Quirksmode is your lifeline
Excessively flexible, to the point ofhinderance.
8/8/2019 Javascript Library Overview 1193202840830224 1
6/83
What weve just seen...
Widgets Libraries
Raw JavaScript
8/8/2019 Javascript Library Overview 1193202840830224 1
7/83
What weve just seen...
Widgets Libraries
Raw JavaScript
8/8/2019 Javascript Library Overview 1193202840830224 1
8/83
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 allof C by hand
8/8/2019 Javascript Library Overview 1193202840830224 1
9/83
What kind of libraries exist?
Open Source Commercial
Client/Server
AjaxCFCQcodo
Atlas
Backbase forStruts
BrowserOnly
PrototypejQueryYahoo UI
Dojo
BackbaseSmartClient
8/8/2019 Javascript Library Overview 1193202840830224 1
10/83
What kind of libraries exist?
Open Source Commercial
Client/Server
AjaxCFCQcodo
Atlas
Backbase forStruts
BrowserOnly
PrototypejQueryYahoo UI
Dojo
BackbaseSmartClient
8/8/2019 Javascript Library Overview 1193202840830224 1
11/83
Open Source Libraries
Browser Only Client/Server
TaskSpecific
Scriptaculous
moo.fxOpen Rico
AjaxCFCQcodo
GeneralPurpose
PrototypejQueryYahoo UI
Dojo
Ruby on RailsCakePHP
8/8/2019 Javascript Library Overview 1193202840830224 1
12/83
Open Source Libraries
Browser Only Client/Server
TaskSpecific
Scriptaculous
moo.fxOpen Rico
AjaxCFCQcodo
GeneralPurpose
PrototypejQueryYahoo UI
Dojo
Ruby on RailsCakePHP
8/8/2019 Javascript Library Overview 1193202840830224 1
13/83
Why these libraries?
8/8/2019 Javascript Library Overview 1193202840830224 1
14/83
Ajaxian Survey
35%
25%
21%
20%
Prototype jQuery Yahoo UI Dojo
http://ajaxian.com/archives/ajaxian-2007-survey-results
http://ajaxian.com/archives/ajaxian-2007-survey-resultshttp://ajaxian.com/archives/ajaxian-2007-survey-results8/8/2019 Javascript Library Overview 1193202840830224 1
15/83
Google Trends
jQuery
Prototype
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
http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=08/8/2019 Javascript Library Overview 1193202840830224 1
16/83
The Libraries
8/8/2019 Javascript Library Overview 1193202840830224 1
17/83
Prototype
8/8/2019 Javascript Library Overview 1193202840830224 1
18/83
Prototype: Overview
Started early 2005 by Sam Stephenson Incredibly popular, tied with Ruby on Railspopularity
Development backed by 37 Signals
8/8/2019 Javascript Library Overview 1193202840830224 1
19/83
Prototype: Focus
Improving the usability of the JavaScriptlanguage
Big emphasis on adding in missingJavaScript features
Clean structure, clean objects and classes
8/8/2019 Javascript Library Overview 1193202840830224 1
20/83
Prototype: Details
Code quality is fantastic, great features All animations (and interactions) are inScriptaculous
Updated frequently Looking at Prototype 1.6.0
8/8/2019 Javascript Library Overview 1193202840830224 1
21/83
jQuery
8/8/2019 Javascript Library Overview 1193202840830224 1
22/83
jQuery: Overview
Released January 2006 by John Resig Rapid rise in popularity
Many developers across the globe
8/8/2019 Javascript Library Overview 1193202840830224 1
23/83
jQuery: Focus
Improving the interaction betweenJavaScript and HTML Finding elements then performing actions
Highly-effective, short, code
8/8/2019 Javascript Library Overview 1193202840830224 1
24/83
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
8/8/2019 Javascript Library Overview 1193202840830224 1
25/83
Yahoo! UI
8/8/2019 Javascript Library Overview 1193202840830224 1
26/83
YUI: Overview
Released Feb 2006 by Yahoo! Maintained and financed internally
Attempt to standardize internal JavaScript
8/8/2019 Javascript Library Overview 1193202840830224 1
27/83
YUI: Focus
Exposing, and solving, commonmethodologies
Looking for common idioms (Drag-and-Drop, Calendar, Auto-Complete)
Looking at Yahoo UI 2.3.1
8/8/2019 Javascript Library Overview 1193202840830224 1
28/83
Dojo
8/8/2019 Javascript Library Overview 1193202840830224 1
29/83
Dojo: Overview
Started early 2005 by Alex Russell + Co.
Large development community Lots of corporate backing (IBM, AOL)
Big code base, tons of features
8/8/2019 Javascript Library Overview 1193202840830224 1
30/83
Dojo: Focus
Building complete web applications
A package heirarchy, e.g.:dojo.addClass( ... ) Focus has transcended into widgets (Dijit)
Huge number of features Today were looking at Dojo 0.9
8/8/2019 Javascript Library Overview 1193202840830224 1
31/83
What should a library have?
8/8/2019 Javascript Library Overview 1193202840830224 1
32/83
Code Base
Core Functionality
DOM Events Ajax Animations
User Interface Widgets
8/8/2019 Javascript Library Overview 1193202840830224 1
33/83
8/8/2019 Javascript Library Overview 1193202840830224 1
34/83
8/8/2019 Javascript Library Overview 1193202840830224 1
35/83
8/8/2019 Javascript Library Overview 1193202840830224 1
36/83
Community
Active Mailing List / Forum Support and Training
Popularity
8/8/2019 Javascript Library Overview 1193202840830224 1
37/83
Code Base
Core Functionality
DOM Events Ajax Animations
User Interface Widgets
8/8/2019 Javascript Library Overview 1193202840830224 1
38/83
Core Functionality
Bare minimum needed to make a dynamicAjax web site:
DOM (Traversal and Manipulation) Events
Ajax Animations
8/8/2019 Javascript Library Overview 1193202840830224 1
39/83
8/8/2019 Javascript Library Overview 1193202840830224 1
40/83
DOM Traversal
Prototype:$$(table > tr)
jQuery:$(div > p:nth-child(odd))
Dojo:dojo.query(table tr:nth-child(even))
Yahoo UI:No querying support
8/8/2019 Javascript Library Overview 1193202840830224 1
41/83
DOM Modification
Prototype:Insertion.Bottom(list,Another item);
jQuery:$(#li).append(An item);
Dojo and Yahoo UI have weak support - no DOMbuilding capabilities, basic property modification
8/8/2019 Javascript Library Overview 1193202840830224 1
42/83
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);});
8/8/2019 Javascript Library Overview 1193202840830224 1
43/83
8/8/2019 Javascript Library Overview 1193202840830224 1
44/83
8/8/2019 Javascript Library Overview 1193202840830224 1
45/83
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);
8/8/2019 Javascript Library Overview 1193202840830224 1
46/83
8/8/2019 Javascript Library Overview 1193202840830224 1
47/83
Ajax (cont.)
jQuery is only one capable of doing DOMtraversing over XML
jQuery.get(test.xml, function(xml){$(user, xml).each(function(){
$().text( $(this).text() )
.appendTo(#userlist);});});
8/8/2019 Javascript Library Overview 1193202840830224 1
48/83
8/8/2019 Javascript Library Overview 1193202840830224 1
49/83
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 });
8/8/2019 Javascript Library Overview 1193202840830224 1
50/83
8/8/2019 Javascript Library Overview 1193202840830224 1
51/83
8/8/2019 Javascript Library Overview 1193202840830224 1
52/83
8/8/2019 Javascript Library Overview 1193202840830224 1
53/83
8/8/2019 Javascript Library Overview 1193202840830224 1
54/83
8/8/2019 Javascript Library Overview 1193202840830224 1
55/83
8/8/2019 Javascript Library Overview 1193202840830224 1
56/83
8/8/2019 Javascript Library Overview 1193202840830224 1
57/83
8/8/2019 Javascript Library Overview 1193202840830224 1
58/83
8/8/2019 Javascript Library Overview 1193202840830224 1
59/83
8/8/2019 Javascript Library Overview 1193202840830224 1
60/83
8/8/2019 Javascript Library Overview 1193202840830224 1
61/83
8/8/2019 Javascript Library Overview 1193202840830224 1
62/83
8/8/2019 Javascript Library Overview 1193202840830224 1
63/83
8/8/2019 Javascript Library Overview 1193202840830224 1
64/83
8/8/2019 Javascript Library Overview 1193202840830224 1
65/83
8/8/2019 Javascript Library Overview 1193202840830224 1
66/83
8/8/2019 Javascript Library Overview 1193202840830224 1
67/83
Browser Support
Everyone supports:IE 6+, Firefox 2+, Safari 2+, Opera 9+
Except: Prototype doesnt support Opera
Dojo is dropping support for Safari 2
8/8/2019 Javascript Library Overview 1193202840830224 1
68/83
8/8/2019 Javascript Library Overview 1193202840830224 1
69/83
8/8/2019 Javascript Library Overview 1193202840830224 1
70/83
8/8/2019 Javascript Library Overview 1193202840830224 1
71/83
8/8/2019 Javascript Library Overview 1193202840830224 1
72/83
8/8/2019 Javascript Library Overview 1193202840830224 1
73/83
Documentation
Full API Coverage Plenty of Tutorials Some Books
Wide variety of Demos
8/8/2019 Javascript Library Overview 1193202840830224 1
74/83
API Documentation
Prototype, jQuery, and Yahoo UI all have fullcoverage
jQuery provides runnable examples witheach API item
Dojos coverage is spotty - work inprogress
8/8/2019 Javascript Library Overview 1193202840830224 1
75/83
8/8/2019 Javascript Library Overview 1193202840830224 1
76/83
8/8/2019 Javascript Library Overview 1193202840830224 1
77/83
8/8/2019 Javascript Library Overview 1193202840830224 1
78/83
8/8/2019 Javascript Library Overview 1193202840830224 1
79/83
Mailing List / Forum
Prototype, jQuery, and Yahoo UI havemailing lists
Prototype: 23 posts/day jQuery: 108 posts/day
Yahoo UI: 36 posts/day Dojo has an active forum
8/8/2019 Javascript Library Overview 1193202840830224 1
80/83
8/8/2019 Javascript Library Overview 1193202840830224 1
81/83
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
8/8/2019 Javascript Library Overview 1193202840830224 1
82/83
More Information
Prototype:http://prototypejs.org/
jQuery:http://jquery.com/ Yahoo UI:
http://developer.yahoo.com/yui/
Dojo:http://dojotoolkit.org/
http://dojotoolkit.org/http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/http://jquery.com/http://jquery.com/http://prototype.conio/http://dojotoolkit.org/http://dojotoolkit.org/http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/http://jquery.com/http://jquery.com/http://prototype.conio/http://prototype.conio/8/8/2019 Javascript Library Overview 1193202840830224 1
83/83
Top Related