javascript death match: jquery v. prototype v. ext-js v. spry
TRANSCRIPT
![Page 2: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/2.jpg)
Fight Schedule• Rounds• Rules of the ring• Meet the boxers• Blow by blow breakdown• The bloody aftermath
2
![Page 3: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/3.jpg)
Rounds1.Library download size 2.AJAX features including JSON support3.DOM Manipulation4.Event support5.Form validation6.UI Components7.Documentation / Community Support
3
![Page 4: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/4.jpg)
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
![Page 5: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/5.jpg)
IN THIS CORNER…
5
![Page 6: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/6.jpg)
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
![Page 7: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/7.jpg)
IN THIS CORNER…
7
![Page 8: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/8.jpg)
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
![Page 9: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/9.jpg)
IN THIS CORNER…
9
![Page 10: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/10.jpg)
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
![Page 11: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/11.jpg)
AND IN THIS CORNER…
11
![Page 12: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/12.jpg)
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
![Page 13: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/13.jpg)
Lets Get Ready To Rumble!
13
![Page 14: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/14.jpg)
Round 1: Download Size
14
![Page 15: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/15.jpg)
Download Size
JQuery
Ext-JS*
Prototype
Spry
0 150 300 450 600
87
100
560
56
Size (KB)
15
![Page 16: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/16.jpg)
Round 2: AJAX
16
![Page 17: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/17.jpg)
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
![Page 18: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/18.jpg)
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
![Page 19: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/19.jpg)
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
![Page 20: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/20.jpg)
Round 3: DOM Manipulation
20
![Page 21: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/21.jpg)
Examples• jQuery
–$(“#bodyText”)• Prototype
–$(“bodyText”)–$$(“.classname”)
• Spry–Spry.$$("#bodyText")
21
![Page 22: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/22.jpg)
Round 4: Event Support
22
![Page 23: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/23.jpg)
JQuery• $( "#contact-form" ).submit(function() {});• $( document ).trigger( "contactsUpdated" );
23
![Page 24: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/24.jpg)
Prototype• $(“id”).observe(“customEvent”,
function() { alert(“customEvent handled”) } );
• $(“id”).fire(“customEvent”);
24
![Page 25: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/25.jpg)
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
![Page 26: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/26.jpg)
Round 5: Form validation
26
![Page 27: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/27.jpg)
Prototype• Extension: Really Easy Form Validation• Uses CSS class names to indicate validation
rules• Use title attribute for the error message
27
![Page 28: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/28.jpg)
JQuery• Plugin: Validation• Uses CSS class names for the validation
rules
28
![Page 29: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/29.jpg)
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
![Page 30: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/30.jpg)
Round 6: UI Components
30
![Page 31: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/31.jpg)
UI Components• jQuery has jQuery UI• Prototype has Scriptaculous• Spry has built-in widgets• Ext-JS has components
31
![Page 32: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/32.jpg)
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
![Page 33: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/33.jpg)
Round 7: Documentation
33
![Page 34: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/34.jpg)
JQuery• Several books• Documentation section on their website• AIR app with docs and samples
34
![Page 35: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/35.jpg)
Prototype• Book from Manning• Scriptaculous and Prototype have API
documentation• Lacks a “getting started” guide• Limited examples on Prototype’s site
35
![Page 36: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/36.jpg)
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
![Page 37: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/37.jpg)
Ext-JS• Used the CF documentation as a guide• For advanced stuff use the 1.1 docs on
ExtJS’s site
37
![Page 38: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/38.jpg)
The Bloody Aftermath
38
![Page 39: JAVASCRIPT DEATH MATCH: JQUERY V. PROTOTYPE V. EXT-JS V. SPRY](https://reader035.vdocuments.site/reader035/viewer/2022081602/613d06380c37c14a830d3941/html5/thumbnails/39.jpg)
Questions?
39