Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Which AJAX Library Is Right for Me? : Page 2

Free AJAX libraries are multiplying like bunnies in the spring. Here's some guidance to help you sift through the dozens of options and choose the one—or ones—that best suite your environment and objective.

Pure JavaScript Libraries
In the world of normal programming, syntax is consistent but the APIs change. In the strange prototype-based world of JavaScript, each major library seems to change the basic syntax structure of JavaScript, which for me is a major turn-off. It's hard enough switching between a server language and JavaScript without having to switch to a different syntax within JavaScript to make some library calls.

In any case, you'll find literally thousands of freely available JavaScript libraries on the Internet. Most are open source (being script, they have little choice), and they provide various ranges of rich functionality. In terms of core remote scripting, all of the major JavaScript libraries do a very capable job, the differentiation being primarily in the syntax.

Dojo, Yahoo! User Interface (YUI) Library, and Prototype are the big three of the pure JavaScript library world according to the Ajaxian.com 2006 Survey results. Although this survey isn't scientific (random sampling), it does provide a summary of the popular libraries. To help you determine which is right for you, this article highlights each one's strengths and weaknesses and shows how it handles a "Hello World" equivalent in AJAX code that passes a couple of parameters to devx.com and downloads the homepage. Although this isn't technically useful, it will give you a feel for the syntax the library uses to make AJAX calls.

Dojo is clearly the most comprehensive library of the three. In addition to the AJAX and Animation offered by all three of the reviewed libraries, Dojo provides an abstraction for every page widget in a manner that you would expect from a server-side language: making every page widget a type of component that goes into abstract container objects. That said, the comprehensiveness comes at a price of 130KB+. Despite the file size, however, its execution speed once downloaded is quite impressive, and it includes functionality ranging from AJAX to complex graphics capabilities.

Dojo is also a major abstraction layer between normal DOM calls and Dojo calls. Developers who know DOM inside and out will find this abstraction unwelcome, while those who are not so deep into the DOM will appreciate it. For sheer geeky coolness, it's worth checking out for the client-side SVG (Scalable Vector Graphics) capabilities alone; they can generate rich interactive charts on the client side.

Dojo uses a declarative syntax that is fairly similar to Python, only slightly more concise. The following "Hello World" equivalent code example shows a simple Dojo AJAX call that passes the parameters "key=value" to the devx.com URL:

dojo.io.bind({ url: "http://www.devx.com?key=value", load: function(type, data, evt) { alert('Responded:'+ data); }, error: function(type, error) { alert('Error:'+ error); }, mimetype: "text/html" });

Yahoo! User Interface Library
In addition to the core AJAX capabilities, YUI includes animation capabilities as well as a few page widgets like a TreeView and a fully internationalized calendar. Most of YUI's CSS alteration calls are a simple pass-through directly to the DOM via alternate APIs that are YUI-specific. In this way, YUI lives in an odd limbo between embracing the underlying DOM and abstracting the programmer from it. The component/container architecture in YUI is very similar in nature to Dojo's.

To make AJAX calls, YUI uses a declarative model that is quite powerful but verbose. The following is the same code as the previously shown Dojo example but using the YUI libraries:

YAHOO.util.Connect.asyncRequest( 'GET', 'http://www.devx.com/?key=value', callback ); var callback = { success:responseSuccess, failure:responseFailure }; function responseSuccess(r) { alert('Responded:'+ r.responseXML); } function responseFailure(r) { alert('Error:'+ r.statusText); }

Prototype leans toward Ruby's syntax, and you have to love it if only for the $ function, which shortens document.getElementById down to $. Prototype also has a few offshoot libraries such as script.aculo.us, Rico, and Behaviour that offer additional functionality. You'll also find a server-based library for Ruby on Rails that is capable of handling the server side for Prototype.

For AJAX, Prototype actually has multiple methods for making AJAX calls, such as one that just returns the data in a manner similar to the Dojo and YUI examples. The following example automatically puts the resultant HTML in the <DIV> element with the ID "DivIDToPutResultIn":

var ajaxReq = new Ajax.Updater('DivIDToPutResultIn', 'http://www.devx.com', {method: 'get', parameters:'key=value'});

This approach can be quite beneficial if you're generating HTML on the server side, as opposed to returning data to the browser to be handled by JavaScript.

Results Handling
All three of these libraries have support for handling results as XML and as JSON. In a nutshell, JSON is a much more bandwidth-friendly way to pass complex data structures from the server to the client than the fairly chunky XML. All three libraries leave you to decide how to map data types in your server language. This means you'll either need to find a library for your server language to return XML/JSON or you'll need to code it yourself. The good news is JSON's Web site has JSON serializers in many languages available for download. The bad news is you'll have to do some custom work to get these libraries to play well with your client libraries.

Rounding Up the Pure JavaScript Options
Dojo and YUI both work to abstract the programmer from the DOM. For developers who like that abstraction, I recommend Dojo hands down. Dojo beats YUI by every measure I could put on it, from performance to capability. For programmers who know the DOM and don't want to be abstracted too far from it, I recommend Prototype, which can leverage your DOM knowledge and provide some APIs that will greatly speed up common tasks. As a long-time JavaScript monkey, Prototype feels the most natural to me.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date