javascript death match: jquery v. prototype v. ext-js v. spry
TRANSCRIPT
Fight Schedule• Rounds• Rules of the ring• Meet the boxers• Blow by blow breakdown• The bloody aftermath
2
Rounds1.Library download size 2.AJAX features including JSON support3.DOM Manipulation4.Event support5.Form validation6.UI Components7.Documentation / Community Support
3
Rules of the Ring
• Must support IE 6 (do we have to?)• Must be free to be used in my app (thank
you CF 8 for Ext-JS)• No throwing chairs! (Yes that means you
Steve Balmer!)4
IN THIS CORNER…
5
JQuery
• First released early 2006 by John Resig• Currently has a lot of buzz• Recently backed by Microsoft• Focused on improving the interaction
between JavaScript and HTML (DOM)
6
IN THIS CORNER…
7
Prototype
• Started in 2005 by Sam Stephenson • Created as the JS library for Ruby on
Rails• Development backed by 37 Signals• Big emphasis on adding in ‘missing’
JavaScript features• All animations (and interactions) are in
Scriptaculous
8
IN THIS CORNER…
9
Spry• Created by Adobe and integrated with
Dreamweaver• Created to help designers provide more data
and interactivity to their pages• Three parts: Spry Data, Spry Widgets and
Spry Effects. They can be used together or independently of one another.
10
AND IN THIS CORNER…
11
Ext-JS• Jack Slocum created it from extensions to
YUI• Ext-JS 1.1 powers most of the built in UI
widgets in CF 8• Recently changed to a GPL license with
release of 2.0• Focused on providing powerful UI widgets
12
Lets Get Ready To Rumble!
13
Round 1: Download Size
14
Download Size
JQuery
Ext-JS*
Prototype
Spry
0 150 300 450 600
87
100
560
56
Size (KB)
15
Round 2: AJAX
16
JQuery $.ajax(
{ type: "get", url: "../api/Contacts.cfc", data: { method: "GetContacts" },
dataType: "json", success: function( objResponse ){
if (objResponse.SUCCESS) { objSelf.ShowContacts( objResponse.DATA );
} else { objSelf.ShowErrors( objResponse.ERRORS ); } }, error: function( objRequest, strError ){ objSelf.ShowErrors(
[ "An unknown connection error occurred." ] ); } }
);
17
Prototype
new Ajax.Request("../api/Contacts.cfc", { method: "get", parameters: { method: "GetContacts" }, onSuccess: function( transport ) { var json = transport.responseText.evalJSON(); if (json.SUCCESS){ ShowContacts( json.DATA ); } else { objSelf.ShowErrors( json.ERRORS ); } } });
18
Spryvar dsContacts = new Spry.Data.JSONDataSet(
"../api/Contacts.cfc?method=getContacts", { path:"DATA" }
);
<div spry:region="dsContacts"> <table id="contact-list" cellspacing="2" cellpadding="5" border="1"> <thead> <tr> <th>Name</th> <th>Hair</th> <th>Actions</th> </tr> </thead> <tbody id="table-content"> <tr spry:repeat="dsContacts"> <td>{NAME}</td> <td>{HAIR}</td> <td><a href="#">Delete</a></td> </tr> </tbody> </table> </div>
19
Round 3: DOM Manipulation
20
Examples• jQuery
–$(“#bodyText”)• Prototype
–$(“bodyText”)–$$(“.classname”)
• Spry–Spry.$$("#bodyText")
21
Round 4: Event Support
22
JQuery• $( "#contact-form" ).submit(function() {});• $( document ).trigger( "contactsUpdated" );
23
Prototype• $(“id”).observe(“customEvent”,
function() { alert(“customEvent handled”) } );
• $(“id”).fire(“customEvent”);
24
Spry
Spry.Utils.addLoadListener(function(){ Spry.Utils.addEventListener("openLink", "click", function(e)
{ cp.open(); return false; }, false); Spry.Utils.addEventListener("closeLink", "click", function(e)
{ cp.close(); return false; }, false);
cp = new Spry.Widget.CollapsiblePanel('cp', { contentIsOpen: false });});
25
Round 5: Form validation
26
Prototype• Extension: Really Easy Form Validation• Uses CSS class names to indicate validation
rules• Use title attribute for the error message
27
JQuery• Plugin: Validation• Uses CSS class names for the validation
rules
28
Spry• Has widgets for the different form elements• Widgets have different states based if the
content is valid• The different states correspond to different
CSS classes for display of messages
29
Round 6: UI Components
30
UI Components• jQuery has jQuery UI• Prototype has Scriptaculous• Spry has built-in widgets• Ext-JS has components
31
Components Compared
Tree Grid Tabs Datepicker Sortable Effects
Spry X X XExt-JS X X X X X X
Scriptaculous P X XjQuery UI X X X X
32
Round 7: Documentation
33
JQuery• Several books• Documentation section on their website• AIR app with docs and samples
34
Prototype• Book from Manning• Scriptaculous and Prototype have API
documentation• Lacks a “getting started” guide• Limited examples on Prototype’s site
35
Spry• Support built into Dreamweaver• Large amount of documentation with
examples on their site• No books• Still in “pre-release” so the API may change
36
Ext-JS• Used the CF documentation as a guide• For advanced stuff use the 1.1 docs on
ExtJS’s site
37
The Bloody Aftermath
38
Questions?
39