Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Putting AJAX Frameworks to the Test : Page 2

Get a developer's assessment of how well the most popular non-commercial AJAX frameworks performed during the development of a dynamic application.


advertisement
Prototype's JavaScript Nature
Prototype is one of the most popular AJAX frameworks around. Looking at the results of the Ajaxian.com 2006 Survey on the popularity of AJAX frameworks, one cannot help but wonder why such a small framework is leading other far more developed AJAX frameworks such as Yahoo! User Interface, Google Web Toolkit, and Atlas.

The answer is simple: Prototype feels like a natural, object-oriented extension to JavaScript itself. After working with this framework, I am almost convinced that Prototype should be integrated into the JavaScript language.

For the scenario at hand, Prototype's small yet powerful and well designed framework proved to be a good match. I completed the first challenge, establishing two simultaneous calls to server resources (for PBX and account lookups), using the Ajax.Request object. The Ajax.Request object is a cross-browser abstraction over the XMLHTTPRequest object. It allows for default as well as asynchronous calls to the server. Furthermore, Ajax.Request accepts the name of the callback function that will be used as the call completes.



So I accomplished the two calls to the PBX system using the following two consecutive calls:

function getInfo() { //load params from form var callerNum = $F('callerNum'); var url = 'http://<server>/ServiceProvider/pbxService'; var pars = 'callerNum=' + callerNum; //asynchronous calls are used as default var response = new Ajax.Request( url, { method: 'get', parameters: pars onComplete: showPBXResponse }); var callerName = response.responseText ; var url = 'http://<server>/ServiceProvider/acctService'; var pars = 'callerName=' + callerName; var acctResponse = new Ajax.Request( url, { method: 'get', parameters: pars onComplete: showAcctResponse }); } //callback functions function showPBXResponse(requestResults) { //show returned value in the PBX area $('pbxResult').value = requestResults.responseText ; } function showAcctResponse(requestResults) ...

I completed the rest of the scenario using regular JavaScript. Prototype did not play a very significant role in custom rendering of presentation elements. I used it as an event-based addition to regular XHTML/CSS-based UI design.

Dojo—The Wonderful World of Widgets
Dojo is a popular, complete open source framework with broad support not only for Web widgets but also other important aspects of Web application development such as interaction with backend systems. Within its hierarchy of widgets, some (such as Layouts and Containers) were useful out of the box for rendering the callers list (although documentation on many of these is missing from the Dojo manual), while others (such as the multi-select list that makes asynchronous calls) had to be customized.

The customization process exposed me to the world of Dojo widget customization, which required some work with and learning of Dojo internals. While Dojo is very flexible in terms of customization, you need to be very well versed with JavaScript and knowledgeable about the many details of the framework itself. The customization possibilities are limitless; it just takes a while to get up to speed with Dojo.

For the implementation of multiple asynchronous calls to the backend, I used Dojo's Bind object (dojo.io.bind). The Bind object allows for asynchronous invocation of backend resources and feeding of results into a callback object. For example, the following code accomplishes a call to the PBX exchange:

var getURL = 'http://<server>/ServiceProvider/acctService?callerName=' + callerName; dojo.io.bind({ url: getURL, /* URL to be called */ load: function(type, data, evt){ /* normal callback code here */ }, error: function(type, error){ /* error handling callback defined here */ }, mimetype: "text/plain" });

While I found navigating Dojo's widget classes and extension model somewhat involved, its Bind and Callback object models were very natural, easy to work with, and performed well.



Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap