http://www.developer.com/

Back to article

The Twelve Days of AJAX


November 27, 2006

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.

Google Web Toolkit: Build AJAX Apps in the Java Language

Unless you have not used the web for the last couple of years, you should know that Google (whose stock at the time of this writing hovers around $500 per share) has grown into a mini universe on the web, with its own gravitational pull. It released numerous high-profile web applications (see the References section), most of them using AJAX, and created a reputation as a heavyweight AJAX guru. Google has pioneered or enhanced many uses of the AJAX technology.

Google Web Toolkit, or GWT, is a Java framework that can auto-generate AJAX-enabled JavaScript code from Java bytecode. In other words, you code in pure Java using Google API and "when you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML," the JavaScript code produced will be AJAX enabled.

The framework is very robust with solid documentation. It covers all of the basic UI components such as Frames, Layouts, Buttons, Menus, Images, Lists, Popups, Tables, Text, Trees, and Tabs.

Here are some of the GWT features and widgets:

  • Dynamic, reusable UI components
  • RPC
  • Real debugging
  • JUnit integration
  • Internationalization
  • Interoperability and fine-grained control

      

The two features that are somewhat overlooked in the AJAX applications are Browser history management and Browser compatibility. When the application is designed around one or two pages with AJAX dynamic content, the browser's back button functionality is broken. The GWT claims to add state to the browser's back button history. Also, GWT alleges its applications automatically support IE, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing.

Although the framework does not emphasize the effects or the "cool" look of its UI elements, it provides a very robust development platform with a very complete set of building blocks for your applications. If you are a Java developer who wants to learn a new UI API to generate AJAX-enabled JavaScript and HTML, take a look at the GWT. The SDK is free and the documentation is easy to follow.

Script.aculo.us

Script.aculo.us is a collection of JavaScript libraries, and is not a compete framework like Backbase or IceFaces. It is also an add-on to the Prototype framework. If you are looking for a quick way to add some interesting visual effects and AJAX-enable your existing web pages, Script.aculo.us can be a solution. It has a very small footprint of several JavaScript files (that you simply drop on your web server) and the usage is simple and straightforward. Some of the features that come with the Script.aculo.us JavaScript libraries are animation framework, drag and drop, AJAX controls, DOM utilities, and unit testing. The resulting code is cross-browser compatible and can add nice effects with little effort.

Some of the supported effects you can use are Appear, Fade, Puff, BlindDown, SlideDown, Shake, and so forth—check out their site for more demos Here is the screenshot of the slider control Script.aculo.us provides.

Script.aculo.us may not provide all the bells and whistles of the other frameworks, but it is server-technology agnostic and provides essential tools for the beginner AJAX developer.

Bindows 2.0

If you like the look and feel of MS-Windows and like to write XML, this commercial framework is for you. Bindows can make your web applications look just like your desktop applications. Bindows also claims to be THE #1 AJAX, WEB 2.0 AND RIA FRAMEWORK with Support Accessibility for AJAX and Web 2.0 Applications. Naturally, the SDK's main emphasis is on the UI that is defined with XML.

Here are some of Bindows' features:

  • Object-Oriented API with zero-footprint applications and a rich user-interface
  • Wide array of supported widgets including menus, forms, grids, sliders, and gauges
  • Native XML, SOAP, and XML-RPC support
  • Server-side agnostic
  • Most browsers are supported

Here is the screenshot:



Click here for a larger image.

Bindows needs to update the UI for the Vista Aero look when Windows Vista comes out. Otherwise, the applications may end up looking outdated.

DWR

DWR stands for Direct Web Remoting. It is an open source library that has wrappers on top of the asynchronous communication with the server, and can simplify AJAX style coding. DWR "allows code in a browser to use Java functions running on a web server just as if it was in the browser". To do so, it provides a server-side part and a client-side part that do DOM manipulations and the AJAX effects.

DWR dynamically generates JavaScript based on Java classes and uses AJAX callbacks to talk to the server "simulating" RPC mechanisms such as RMI or SOAP over the HTTP protocol.

Here is the diagram of the architecture:

It seems that DWR is designed for developers more than for designers and calls for understanding of the Java and JavaScript coding practices. It has a thorough documentation and helps developers start with it via tutorials and code examples.

SmartClient: AJAX GUI System smartclient.com

SmartClient is an enterprise-grade commercial UI framework. It has the largest amount of prepackaged UI components, with different effects, animations, interactive actions, and a distinct look and feel among other frameworks. The sheer amount of the UI components (and their flexibility) makes it easy to build desktop-"like" behavior in web applications that use SmartClient.

The framework supports modern service-oriented architectures with declarative binding to WSDL and REST web services. It also understands metadata formats, such as XML schema, allowing a rich shared client-server data model. Some of the clients for SmartClient are Philips, Intuit, and PeopleSoft.

Here are some of the many components available:

Note the subtle shadow effect, which can be customized for some components.



Click here for a larger image.

SmartClient is available for a free developer evaluation. The enterprise license is per project, but a standard license for small deployments (one CPU or 50 concurrent users) is US $4995. If you are a corporate developer who needs to design a very robust web application that mimics desktop application behavior, take a look at SmartClient.

JSON-RPC

JSON-RPC is a lightweight remote procedure call protocol similar to XML-RPC. It is not related to the JavaScript type of AJAX asynchronous calls, but some of its implantations have similar behavior. There is Python implementation and Java implications of the specification. JSON-RPC in Java allows web applications to call remote methods in a Java Application Server without the need for page reloading (also known as AJAX). The data is wrapped in XML and communication is very straightforward.

Here is a Google demo application that used JSON-RPC: http://code.google.com/webtoolkit/documentation/examples/jsonrpc/demo.html.

Spry Framework for AJAX

Whereas most of the AJAX frameworks are focused on the application development from the programming standpoint, the Spry framework for AJAX is a JavaScript library targeting web designers. At the time of this writing, it is in the prerelease state at version 1.3. The framework is designed by Adobe labs. Therefore, a lot of effort went in to making it appealing for designers and beginner developers with a basic knowledge of HTML, CSS, and JavaScript. Spry provides "a richer experience for the users," and a "HTML-centric" development style. The framework features professional-grade arresting effects, and manipulation of XML data, as well as prepackaged demos.

Here is a screenshot of some of the demos:

Spry has a lot of potential, not only because it can produce visually appealing applications, but also because many web developers nowadays are also web designers. If Spry can make them create better-looking application with less coding, they can be more productive.

Yahoo! User Interface Library (YUI)

Yahoo has always provided toolkits for developers to extend (or use) its rich set of online applications and API. In part due to the same good faith effort, in part due to the web 2.0 movement, and in part because of growing competition from Google and Adobe, Yahoo released the Yahoo! User Interface (YUI) Library as open source under a BSD license.

The YUI is a set of utilities and controls, written in JavaScript, to build richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. It has a solid set of UI controls (including sliders, calendar, tabs, trees, and the like), effects, animations, DOM Scripting utilities, and even CSS resources.

The http://developer.yahoo.com/yui/ site has lots of top-notch documentation, examples, and components cheatsheets to help developers start with the YUI.

Here is an example of the calendar UI component.

YUI also features drag-and-drop and browser Event classes. The Event class can programmatically attach an event handler to one or more elements on the page and listen for the DOM events. Some other functionality are automatic deferral of handler attachment for elements that are not yet available, automatic event scope correction, automatic listener cleanup, and so forth.

YUI has equal emphasis on the design and development sides of the web development process; at the time of this writing, it is version 0.12. It is not quite ready for the enterprise début but looks like a very solid contender in the AJAX market. Any web developer interested in the solid AJAX and DHTML library should definitely consider the YUI, and check its further evolution.

Even More Frameworks to Watch...

These are some more frameworks or toolkits that I feel need to be also motioned because they present even more options to develop with AJAX and are gaining popularity.

SAJAX is an open source AJAX Toolkit for PHP, Perl or Python. It has wrapper functions for AJAX calls. SAJAX can simplify development if you are using any of these programming languages.

Fjax (not to be confused with Adobe Flax) technology is an open, lightweight, cross-browser methodology for AJAX-style web 2.0 development: http://www.fjax.net/.

The Guise Java Web Framework for AJAX Applications addresses JSF shortcomings: www.guiseframework.com.

AJAX.NET developed in Germany by Michael Schwarz. It helps to AJAX-enable .NET applications.

The Prototype JavaScript framework http://prototype.conio.net is a toolkit for AJAX class-driven development. Script.aculo.us is based on it.

Conclusion

Currently, people trying out AJAX put little "islands" of logic on their web pages that can asynchronously do something, and perhaps that is enough in many cases. Other, more adventurous designers design entire web applications based on the fact that they can provide fancier UI and fewer pages to refresh. Time will tell which approach will prevail, but regardless of the approach, I believe that AJAX is here to stay and evolve. I have presented most of the major players in the AJAX area; now it will be up to the readers to go and try them out and decide on the frameworks' usefulness.

I will look at some these AJAX libraries in more details subsequent articles.

References

About the Author

Vlad Kofman is working on enterprise-scale projects for the major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.

Sitemap | Contact Us

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