JavaScript Libraries (Ajax Exp 2006)

JavaScript Libraries Ajax Experience - Oct 2006 John Resig (ejohn.org)

Question: How do you want to write JavaScript?

1) Plug-and-Play • Drop in a “calendar widget” or “tabbed navigation” • Little, to no, JavaScript experience required. • Just customize some options and go. • No ﬂexibility.

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 yourself from browser bugs. • Flexible, until you hit a browser bug.

3) Down-and-Dirty • Write all JavaScript code from scratch • Deal, directly, with browser bugs • Quirksmode is your lifeline • Excessively ﬂexible, to the point of hinderance.

What we’ve just seen... • Widgets • Libraries • Raw JavaScript

Why use a library? • Makes JavaScript bearable • Gets the job done fast • Simpliﬁes cross-browser support • Sort of like C stdlib - no one just codes C by hand

What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Dojo Browser Backbase jQuery Only SmartClient Mochikit Yahoo UI

Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Speciﬁc Qcodo Open Rico Prototype Dojo General Ruby on Rails jQuery Purpose CakePHP Mochikit Yahoo UI

What should a library have? • DOM Traversing/Manipulation • Event binding • Ajax Support • Basic Animations

What should a library have? • Some want complex controls • Drag-and-drop • Auto-complete search • Others want language enhancements • Object.extend() • Array.each() • DOM, Event, Effects, Ajax is a good middle- ground

Secondary Features • Documentation • Community Support • File Size • Popularity

Secondary Features (Practical) • Documentation • Community Support • File Size • Popularity (Esoteric)

Dojo: Overview • Started early 2005 by Alex Russell • Large development community • Lots of corporate backing (IBM, AOL, Google) • Big code base, tons of features

Dojo: Focus • Building complete web applications • A package heirarchy, e.g.: dojo.html.addClass( ... ) • Focus has transcended into widgets • Huge number of features

Dojo: DOM Support • Good DOM Modiﬁcation support - handles many cross-browser issues • DOM Traversal could be spruced up to handle selectors var each = dojo.lang.forEach; var tables = document.getElementsByTagName("table"); each(tables, function(table){ each(table.getElementsByTagName("tr"), function(row,i){ if ( i % 2 == 1 ) dojo.html.addClass( row, "odd" ); }); });

Dojo: Events and Effects • Events support is complete and cross browser • Good selection of generic animations var link = dojo.byId("mylink"); dojo.event.connect(link, "onclick", myHandler); function myHandler(evt) { dojo.lfx.html.fadeHide( link, 500 ); }

Dojo: Ajax • Its crown jewel • Supports virtually any form of Ajax communication that you can think of • XMLHTTPRequest, IFrame, Flash • Has excellent backwards compatability • Built-in back button support

Dojo: Docs & Community • Documentation: Not much. In the middle of a major documentation overhaul for 0.4. • Community: Lively Over 60+ mailing list posts/day.

Dojo: File Size & Popularity • File Size: Large (100Kb compressed) It’s highly recommended that you remove unused modules. • Popularity: Substantial Backing from many corporate sponsors (IBM).

Prototype: Overview • Started early 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals

Prototype: Focus • Improving the usability of the JavaScript language • Big emphasis on adding in ‘missing’ JavaScript features • Clean structure, clean objects and ‘classes’

Prototype: DOM Support • DOM Modiﬁcation works quite well: Insertion.Bottom(“list”,”<li>Another item</li>”); • So does >DOM Traversing: $$(“table tr”).invoke(“addClassName”,”row”);

Prototype: Events & Ajax • Event binding just works: function(){ Event.observe(“button”,”click”, alert(“Thanks for the click!”); }); • So does Ajax: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ alert( res.responseText ); } });

Prototype: Details • Code quality is fantastic, great features • No support for animations • moo.fx • Script.aculo.us • Updates are very infrequent (most recent release is over a year old)

Prototype: Docs & Community • Documentation: None Some 3rd party web sites document some versions, no ofﬁcial documentation. • Community: Distributed Many bloggers love Prototype, little centralized discussion (16 posts/day).

Prototype: File Size & Popularity • File Size: Moderate (40KB) Unfortunately, not easily compressible. • Popularity: Strong Constantly in use at major web sites - tied to popularity of Ruby on Rails.

jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe

jQuery: Focus • Improving the interaction between JavaScript and HTML • Finding elements then performing actions • Highly-effective, short, code

jQuery: DOM Support • DOM Traversing is great - CSS1-3 support and basic XPath: $(“div > p:nth-child(odd)”) • DOM Manipulation too: $(“#li”).append(“<li>An item</li>”);

jQuery: Events, Effects, and Ajax • Events are fully functional: $(“div”).click( showItem ); • And effects: $(“#menu”).slideDown(“slow”); • And Ajax! $(“form”).submit(function(){ $(“#results”).load(“test.html”); });

jQuery: Details • Core features are limited to DOM, Events, Effects, Ajax • Other features can be added in via plugins • Relatively new, compared to other libraries

jQuery: Docs & Community • Documentation: Complete Fully documented, complete API. • Community: Vibrant 91+ Mailing List Posts/Day

jQuery: File Size & Popularity • File Size: Small About 16KB with everything. • Popularity: Growing Little corporate backing. Lots of sites switching: Drupal, MSNBC, Technorati, FeedBurner.

Mochikit: Overview • Released July 2005 by Bob Ippolito • Managed and sponsored by MochiMedia • Developed to power their Mochibot web site

Mochikit: Focus • Designed to fulﬁll common activities (All the way from low-level iteration to high- level Drag-and-Drop) • Hierarchical structure: Mochikit.DOM.addElementClass(...)

Mochikit: DOM Support • Only a couple DOM Traversal functions - no selectors (possibly coming in 1.4): $(“body”) • Plenty of helper functions for DOM modiﬁcation: A({href: "test.html"}, "Test Page"); removeElementClass(“item”, “hilite”);

Mochikit: Events and Effects • Event structure uses signals & slots terminology: connect(“list”,”click”, function(){ alert(“List Clicked”); }); • Plenty of visual effects too: blindDown(“list”, { duration: 0.5 });

Mochikit: Ajax • Ajax support is fully functional: doSimpleXMLHttpRequest("http://example.com", {bar: "baz"});

Mochikit: Details • Lots of features (Rounded corners, drag- and-drop) - much like Dojo • Been a while since the last ofﬁcial update (April 2006)

Mochikit: Docs & Community • Documentation: Mixed Everything is physically documented, but the quality is mixed (e.g: blindDown: Blind an element down, restoring its vertical size) • Community: Small About 6 mailing list posts/day

Mochikit: File Size & Popularity • File Size: Large (100KB, compressed) It is recommended that you remove unused components and re-compress the code. • Popularity: Stagnant After almost a year and a half of existence, popularity has yet to surge.

YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and ﬁnanced internally • Attempt to standardize internal JavaScript

YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete)

YUI: DOM Support • DOM Traversal is minimal, no selectors: YAHOO.util.Dom.get(“list”) • DOM Modiﬁcation is also minimal, modiﬁcation only (no DOM creation): YAHOO.util.Dom.addClass(“list”,”hover”)

YUI: Events and Effects • Full Event support: YAHOO.util.Event.addEventListener( “list”, “click”, function(){ alert(“List Clicked”); }); • Animations are also customizable: new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut );

YUI: Ajax • Ajax connections are simple to setup: YAHOO.util.Connect.asyncRequest( 'GET', “test.html”, function(){ alert(“File loaded”); }, null );

YUI: Details • Namespaces can become quite verbose. It is recommended that you copy namespaces to other variables. var dom = YAHOO.util.Dom; • Closed development (Yahoo employees only, no subversion repository)

YUI: Docs & Community • Documentation: Excellent Everything is thoroughly documented. Lots of explanations, plenty of demos. • Community: Moderate Mailing List hovering around 28 posts/day.

YUI: File Size & Popularity • File Size: 40KB (Compressed) Code is quite modular, you can remove unused code easily. • Popularity: Moderate Many good bloggers talking about it.

Feature Summary DOM Events Effects Ajax Dojo / X / X Prototype X X - X jQuery X X X X Mochikit / X X X Yahoo UI / X X X

More Information • Dojo: http://dojotoolkit.org/ • Prototype: http://prototype.conio.net/ • jQuery: http://jquery.com/ • Mochikit: http://mochikit.com/ • Yahoo! UI: http://developer.yahoo.com/yui/

Ajax Experience Presentations • Presentations on: • Dojo • Prototype & Scriptaculous • jQuery • Yahoo UI • Go to one that sounds interesting and enjoy!

JavaScript Libraries (Ajax Exp 2006)

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Libraries (Ajax Exp 2006)

More from jeresig

Recently uploaded

JavaScript Libraries (Ajax Exp 2006)