Javascript Library Overview 1193202840830224 1

8/8/2019 Javascript Library Overview 1193202840830224 1

1/83

JavaScript LibrariesAjax Experience - October 2007John Resig (ejohn.org)


2/83

Question: How do you wantto write JavaScript?


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.


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.


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.


6/83

What weve just seen...

Widgets Libraries

Raw JavaScript


7/83

What weve just seen...

Widgets Libraries

Raw JavaScript


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


9/83

What kind of libraries exist?

Open Source Commercial

Client/Server

AjaxCFCQcodo

Atlas

Backbase forStruts

BrowserOnly

PrototypejQueryYahoo UI

Dojo

BackbaseSmartClient


10/83

What kind of libraries exist?

Open Source Commercial

Client/Server

AjaxCFCQcodo

Atlas

Backbase forStruts

BrowserOnly


Dojo

BackbaseSmartClient


11/83

Open Source Libraries

Browser Only Client/Server

TaskSpecific

Scriptaculous

moo.fxOpen Rico

AjaxCFCQcodo

GeneralPurpose


Dojo

Ruby on RailsCakePHP


12/83

Open Source Libraries

Browser Only Client/Server

TaskSpecific

Scriptaculous

moo.fxOpen Rico

AjaxCFCQcodo

GeneralPurpose


Dojo

Ruby on RailsCakePHP


13/83

Why these libraries?


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-results


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=0


16/83

The Libraries


17/83

Prototype


18/83

Prototype: Overview

Started early 2005 by Sam Stephenson Incredibly popular, tied with Ruby on Railspopularity

Development backed by 37 Signals


19/83

Prototype: Focus

Improving the usability of the JavaScriptlanguage

Big emphasis on adding in missingJavaScript features

Clean structure, clean objects and classes


20/83

Prototype: Details

Code quality is fantastic, great features All animations (and interactions) are inScriptaculous

Updated frequently Looking at Prototype 1.6.0


21/83

jQuery


22/83

jQuery: Overview

Released January 2006 by John Resig Rapid rise in popularity

Many developers across the globe


23/83

jQuery: Focus

Improving the interaction betweenJavaScript and HTML Finding elements then performing actions

Highly-effective, short, code


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


25/83

Yahoo! UI


26/83

YUI: Overview

Released Feb 2006 by Yahoo! Maintained and financed internally

Attempt to standardize internal JavaScript


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


28/83

Dojo


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


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


31/83

What should a library have?


32/83

Code Base

Core Functionality

DOM Events Ajax Animations

User Interface Widgets


33/83


34/83


35/83


36/83

Community

Active Mailing List / Forum Support and Training

Popularity


37/83

Code Base

Core Functionality

DOM Events Ajax Animations

User Interface Widgets


38/83

Core Functionality

Bare minimum needed to make a dynamicAjax web site:

DOM (Traversal and Manipulation) Events

Ajax Animations


39/83


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


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


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);});


43/83


44/83


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);


46/83


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);});});


48/83


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 });


50/83


51/83


52/83


53/83


54/83


55/83


56/83


57/83


58/83


59/83


60/83


61/83


62/83


63/83


64/83


65/83


66/83


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


68/83


69/83


70/83


71/83


72/83


73/83

Documentation

Full API Coverage Plenty of Tutorials Some Books

Wide variety of Demos


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


75/83


76/83


77/83


78/83


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


80/83


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


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/


83/83

Javascript Library Overview 1193202840830224 1

Documents

Transcript of Javascript Library Overview 1193202840830224 1