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.
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|
|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|
|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.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 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 is another enterprise-level framework for AJAX based on the JSF standard featuring Direct-to-DOM rendering technology.
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.
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.
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.
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
- Real debugging
- JUnit integration
- 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.
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.
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:
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 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.
Here is the diagram of the architecture:
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.
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.
Here is a Google demo application that used JSON-RPC: http://code.google.com/webtoolkit/documentation/examples/jsonrpc/demo.html.
Spry Framework for AJAX
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 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.
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.
- wikipedia: www.wikipedia.org/
- Dojo: http://dojotoolkit.com
- Google Web Toolkit: http://code.google.com/webtoolkit/
- Google web applications:
- Gmail: www.gmail.com
- Google suggest: http://www.google.com/webhp?complete=1&hl=en
- Google finance: http://finance.google.com/finance
- Backbase: http://www.backbase.com
- SAJAX: http://www.modernmethod.com/sAJAX/
- SmartClient: http://www.isomorphic.com
- Yahoo! User Interface Library (YUI): http://developer.yahoo.com/yui/
- DWR: https://dwr.dev.java.net/
- Script.aculo.us: http://script.aculo.us
- Spry framework for AJAX: http://labs.adobe.com/technologies/spry/
- Bindows 2.0: http://bindows.net/
- IceFaces: http://www.icesoft.com/products/icefaces.html
- JSON-RPC: http://json-rpc.org/
- Fjax: http://www.fjax.net/
- Guise: http://www.guiseframework.com
- AJAX.NET: http://AJAX.schwarz-interactive.de/
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.