javascript death match: jquery v. prototype v. ext-js v. spry

JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY

Kurt Wiersmakwiersma@mac.com

1

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