April 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

The Twelve Days of AJAX

  • November 27, 2006
  • By Vlad Kofman
  • Send Email »
  • More Articles »

AJAX is the one of the latest buzz acronyms. It stands for "Asynchronous JavaScript and XML" and actually does not define a single new technology, but a group of mature technologies used in conjunction with one another.

Another similar acronym, which also defines a combination of established technologies, is DHTML. DHTML, or Dynamic HTML, is a client-side scripting of the Document Object Model (DOM), and the manipulation of Cascading Style Sheets (CSS) to achieve new functionality or effects in the UI. AJAX is much more in the spotlight right now than DHTML, and greatly overlaps with the DHTML in its functionality, with the exception of one feature that separates it from the DHTML and rightfully makes it a separate entity. This feature is a nice and easy way to make asynchronous requests back to the server, in the background and without interrupting the current UI on the screen.

Notice that I said a "nice and easy" way, because the ability to make asynchronous requests (or "hack" a way to make asynchronous requests) existed long before Jesse James Garrett coined the term AJAX in February 2005* (wikipedia) or before modern AJAX methods existed. What is relatively new is a widespread support in the modem browsers of a new XMLHttpRequest scripting object, which acts as a getaway for the behind-the-scenes communication with the server and that is the cornerstone for this unique feature that makes AJAX work.

The evolution of the Internet browser applications—Internet Explorer, Netscape, Mozilla, and now Firefox—and not the enhancements of the current web technology standards for the HTML, CSS, or XML fueled the development of AJAX technology. As developers of web applications tried to hack a way to emulate desktop UI behavior, such as automatic updates based on the user's actions, the clear need for this functionality resulted in the introduction and support of the XMLHttpRequest JavaScript object in browsers.

AJAX also picked up a lot of momentum because of the whole Web 2.0 movement and a few very clever web applications developed by the good folks at Google—such as Google Maps, Google Suggest, Google Gmail, and so forth—that served as a fantastic advertisement of how much richer the UI can now be inside of the old browser. (Who said you can't teach an old dog new tricks?)

The fact that very clever user interface effects can be done without a page refresh even created a new methodology, or a way of thinking, and designing entire web applications within one page. Numerous articles, books, and frameworks sprang up around AJAX and its methodology. In this article, I will look at AJAX and the most popular frameworks for AJAX currently on the market, from the ten-thousand foot view.

As we approach the holiday season, I thought of listing the AJAX frameworks and technologies I will look at in this article, with a holiday twist. The full version was too long to write, but here is the ending:

On the twelfth day of AJAX,
my browser sent to me
Twelve Dojo samples,
Eleven Google Web Toolkits,
Ten Backbase widgets,
Nine SAJAX functions,
Eight SmartClient pages,
Seven Yahoo! YUIs,
Six DWR methods,
Five Script.aculo.us interfaces,
Four Spry effects,
Three Bindows windows,
Two IceFaces faces,
And a partridge encoded in a JSON-RPC!

There are many more frameworks and I will mention some of them at the end of the article, but these have the most momentum to gain market share. All of the frameworks, toolkits, or SDKs are based on the asynchronous communication methodology, and many also offer extra features to make them more marketable.

Framework Server Language Commercial, Open Source, or Other Special Features
Dojo   Open source Charting engine, custom widgets
Backbase Java Commercial Custom widgets
IceFaces Java Commercial Direct-to-DOM rendering technology, server push, JSF tags
Google Web Toolkit Java Open source Browser history management and the auto Browser compatibility
Script.aculo.us   Open source DHTML effects
Bindows 2.0   Commercial Windows look and feel
DWR Java Open source RPC emulation in Java and JavaScript over HTTP
SmartClient   Commercial Works with XML and has declarative binding to WSDL
JSON-RPC   Protocol Standard XML protocol
Spry framework for AJAX   Open source Custom controls and look and feel, HTML-centric design
Yahoo! User Interface Library (YUI)   Open source Event class, custom widgets, CSS recourses

Dojo

Dojo does not call itself a framework, but a JavaScript toolkit. At the time of this writing, Dojo is at version 0.4; it is not yet ready for enterprise use, but it shows a lot of potential. It is open source and free license under AFL and BSD, so development and support can either accelerate or decelerate very rapidly, but it already features a complete set of UI effects, charting engine, drag-and-drop, extensive set of widgets, including date picket (see picture), progress bar, and even a text editor. Dojo is compatible with major browsers and is server technology-agnostic. If you are looking for a free AJAX toolkit with emphasis on the UI, you should consider Dojo.

Here is a list of some of Dojo's packages for JavaScript and sample widgets.

  • dojo.lang: Utility routines to make JavaScript easier to use
  • dojo.string: String manipulation routines
  • dojo.dom: DOM manipulation routines
  • dojo.style: CSS-style manipulation routines
  • dojo.html: HTML-specific operations
  • dojo.event: The Aspect Oriented Programming-inspired event system
  • dojo.reflect: Reflection API (undocumented)
  • dojo.date: Date manipulation (undocumented)
  • dojo.logging.Logger: Logging library (undocumented)
  • dojo.profile: JS Profiler (undocumented)
  • dojo.regexp: Regular Expression generators (undocumented)

      

Backbase

Backbase is claiming to be the #1 enterprise AJAX framework. It is a commercial product, but a free (scaled down) community edition is available. Backbase comes in three versions, with tight integration to the Java server side technologies such as JSF or Struts, and looks like a very polished framework. Java developers can use Eclipse integration, and there is a large list of widgets to develop Backbase applications.

Similar to other AJAX frameworks, Backbase has emphasis on the UI components and has very professional-looking UI elements.

      

The server-side development is targeted at Java developers. Developers can use Backbase to add individual AJAX widgets quickly, without major code changes or design large AJAX based applications from the ground up.

The web UI based on Backbase can be coded to have all of the desktop application's functionalities, but in my testing it appeared some what sluggish from time to time. It was a reminder that I was still using a browser and that AJAX is still in its very early evolution stages. The breadth of the UI's widgets is one of the bigger selling points of the framework. Check out the demos and see wheteher Backspace is right for you.

IceFaces

IceFaces is another enterprise-level framework for AJAX based on the JSF standard featuring Direct-to-DOM rendering technology.

"The primary goal behind the ICEfaces architecture is to provide the application developers with a familiar Java Enterprise development model, and completely shelter them from the complexities of low-level AJAX development in JavaScript"

The framework gives developers a set of JSF tags that produce AJAX-enabled UI components without having to write JavaScript. This sounds similar to the GWT, which also generates JavaScript, but is different because ICEfaces APIs are declarative tags that look like fancy HTML and are based on the JSF standard. IceFaces has an extensive library of very polished, enterprise-grade UI components. The company actually created all the standard JSF components as well as an extensive set of extra components.

The two unique features of this framework are Direct-to-DOM rendering and server push. Direct-to-DOM rendering is the ability to render a JSF component tree directly into a DOM data structure (see the following diagram). The framework can synchronize changes on its server-side DOM (yes, it keeps one) and client-side DOM via the AJAX Bridge. The AJAX Bridge controls the presentation of the application in the browser.



Click here for a larger image.

The second unique feature, built into the framework, is the advanced server push technology. The server push is working fairly well in the current release, and provides an advantage over the other frameworks that do not have it. Events can be emulated, client UI dynamically changed based on sever state, and so on. By using this technology, all sorts of appealing applications become possible, and it will be interesting to see which other AJAX frameworks will introduce this feature.

Here are some of the IceFaces UI components.



Click here for a larger image.





Page 1 of 3



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel