Surveying open-source AJAX toolkits

Packages from Dojo, Zimbra, Yahoo, Microsoft, Google, and OpenRico/Prototype showcase the variety of libraries available to AJAX developers

If you want to add AJAX to the magic collection of buzzwords supported by your Web site (and who can resist the siren call of the latest buzzword?), then you have two major options: purchase a proprietary package or experiment with open source libraries.

InfoWorld has covered a number of excellent proprietary AJAX toolkits in the past, and now we’re turning our attention to some of their open source rivals. Are they worth exploring for enterprise use?

[Watch AJAX screencasts: Dojo, Google, Microsoft Atlas, Rico, Yahoo, Zimbra]

The open source toolkits I examined span a wide range of what might be covered by the term AJAX, an acronym for Asynchronous JavaScript and XML that began appearing little more than a year ago. The idea of using JavaScript with or without XML to add intelligence and interactivity to a Web page dates from the earliest days of the Web, and AJAX is now one of the best ways to distribute client applications with a minimal amount of fuss. (See more on the intricacies of AJAX.)

If you’re interested in whether these open source packages compete with the best commercial tools, the simple answer is: not in general but sometimes in specific details.

The best-known proprietary packages, such as Backbase, JackBe, and Tibco's General Interface, all offer complete development environments with full toolkits, sophisticated event models, and debuggers. With them, you can write applications that run in the limited environment of a Web browser but offer almost all of the features of native code. (See more on proprietary AJAX tools we've reviewed.) None of the open source packages I looked at come close to the range, depth, and support of these commercial packages.

But that doesn’t mean that there isn’t plenty that’s worthwhile in these open-source AJAX projects — there’s an explosion of interest in the area right now.

Selecting the six
Passing over dozens of excellent packages and thousands of perfectly adequate solutions, I selected high-profile toolkits supported by the most stable organizations: Dojo, Google Web Toolkit, Microsoft Atlas, Open Rico and Prototype, Yahoo AJAX Library, and Zimbra’s Kabuki AJAX Toolkit. Microsoft’s Atlas may not be open source — the license includes terms that would rankle a devotee — but the code you create with the system is yours to license as you like, and you’ll be able to create Atlas apps with few practical restrictions.

The six packages I examined all offer a number of extremely useful user interface widgets and background tools for simplifying the process of building an AJAX application. They will be most interesting to developers with running applications who only want to add a new part or update a page. If you want to add an animated panel or a live table, for example, you can usually cut and paste them into place; the examples are generally good enough to help you accomplish the basic routines.

Still, there’s often a need to fidget and fuss with the code if you want to do things that are even slightly different from the established framework. It’s a feeling that will be familiar to most programmers who have used open source: The code is often quite nice, but the developers seem more interested in getting it out the door than re-engineering it until it’s even easier to use.

For instance, with some of these tools it took me just a few minutes to add a table of data that could be sorted on the client — if I imitated the example code as closely as humanly possible. But if I tried to improvise or do something differently, the code would break, and the documentation was often quite unhelpful.

img80480.gif
For instance, with some of these tools it took me just a few minutes to add a table of data that could be sorted on the client — if I imitated the example code as closely as humanly possible. But if I tried to improvise or do something differently, the code would break, and the documentation was often quite unhelpful.

This rough surface means that any development team should think about its environment before putting open source AJAX tools into action. If you have seasoned programmers and the ability and time to use the freedom and flexibility provided by the source code, these toolkits are great deals. If you’re a newer programmer or someone without the time to wade into a project, you should think twice about the costs and consider the more professional packages.

Dojo
If there is one open source AJAX project that is leading the pack these days, it might be
Dojo. It’s not necessarily better in any particular way than the others, but it is both broad and deep with a big selection of very customizable widgets. These traits may explain why both IBM and Sun have recently signed on to support the Dojo Foundation and its work.

The project Web site and the code have the flavor of an exceptionally fertile open source project run by a neutral team of enthusiastic developers. The management is clearly aiming to encourage a wide range of contributions — as long as they fit Dojo’s basic philosophy demanding simplicity and clarity.

Dojo has an excellent editing package, a wide selection of animating boxes, some drag-and-drop tools, and much more. A tool for providing maps from Google and Yahoo just appeared in the latest 0.3.1 version.

I feel, however, that Dojo suffers a bit from the kitchen-sink-like quality of popular open source projects. Some parts of the library are well-documented and illustrated by a set of good demo pages. Other parts have little documentation, leaving developers on their own — the manual as well as the book describing the project have large holes typical of volunteer-built documentation.

Adding a bit of the Dojo toolkit to your Web application is pretty easy. The source code is modular, so your application only needs to load the necessary pieces using Dojo’s loading mechanism. In many cases, all you need to add is an extra attribute, dojoType, to your working HTML, and the code will do the work when it loads the page.

Dojo continues to improve as it attracts more developers with more ideas and code from other projects. The leaders are doing a good job of keeping these contributions in order, and there’s every reason to expect more sophistication in the future.

img80484.gif
Zimbra

Although the entire suite of tools is available under a community source license, Zimbra chose to spin off its Ajax toolkit in a separate package called Kabuki that’s licensed under either Apache or Mozilla. The toolkit includes some of the practical tools and widgets but not all of the pieces found in the larger package.

That doesn’t mean Zimbra’s toolkit comes up short, though: Kabuki has an excellent editor, a nice tree package, and a layout mechanism that can be used to build sophisticated user interfaces.

Zimbra’s system doesn’t have the same polish or sophisticated animations as Dojo or Yahoo’s AJAX package. The widgets are quite functional, but they’re also fairly basic; there’s no sign of the sophisticated eye candy some people expect to see when they start using JavaScript to drive the UI.

You can fix some of this with the right style sheets and some good design, but it’s going to take some extra programming effort. If you’re willing to take that on, the Zimbra AJAX mechanism is still filled with largely practical tools.

The oddest toolkit in the batch may be Google's. Whereas the others are written in JavaScript and meant to be integrated into your own JavaScript code, Google’s Web Toolkit is written in Java itself and translated into JavaScript. When you write your code, you write Java and watch it get translated into JavaScript.

img80481.gif
Google Web Toolkit

This isn’t as magical as it sounds because JavaScript is pretty close to a superset of Java, at least in a cosmetic sense. It’s not complicated to strip away some typing information from the Java code and end up with something that resembles JavaScript.

The translation is, however, a fascinating solution and one that Java programmers will both like and worry about. I found myself fretting over questions about when JavaScript will behave a bit differently than Java — something that I don’t do very often.

The breadth of the toolkit is solid. Google has built in many of the standard widgets but hasn’t included some of the flashier mechanisms for animation.

I found Google’s system surprisingly easy to use — it ended up being close to working with a fancy version of the AWT (Abstract Window Toolkit) or a simpler version of Swing. The package is designed to build a full application that runs inside the browser, not just add a bit of zip to your flat pages.

img80482.gif
Open Rico and Prototype

It’s anyone’s guess whether this loose bond is better or worse politically, but the results are just as impressive as those of the other libraries.

Rico and Prototype share more of an emphasis on animated effects and less on some of the pragmatic tools. For example, there’s no tree and no emphasis on collecting data from a form, but the animated effects and the larger tools — like a set of accordion panels — are all there.

The Prototype library is a set of basic, low-level tools aimed at programmers. It has clean, simple functions, all given single-letter names to speed downloading. It’s more of a shorthand for the common functions, and one you might want to adopt for your own code regardless of whether you use the larger mechanisms because it’s a disciplined approach to writing smoother, simpler code.

Rico is a collection of some of the popular Ajax widgets and animations built on top of Prototype. You don’t need to use Rico with Prototype, but it does make building AJAX apps simpler if you want the effects they offer.

I especially liked Rico’s LiveGrid, a set of routines that enhance an HTML table by fetching data in the background as you scroll through the rows. It simplifies displaying a large volume of data in a small set of rows without forcing the user to load page after page. I often think of Rico as a smaller, simpler version of Dojo that does a few things better than Dojo, such as enabling drag-and-drop support.

The software world is often divided into two groups: Microsoft and everyone else. This is almost accurate when it comes to JavaScript and AJAX. Microsoft helped legitimize the space by creating some highly sophisticated AJAX features, and it continues to innovate with Atlas.

img80479.gif
Microsoft Atlas

The Microsoft Atlas library may be free, but getting the package is not simple for people who aren’t using Microsoft’s Visual Studio. Microsoft is much happier if you download hundreds of megabytes of development tools before installing the Atlas JavaScript libraries that handle the bulk of the work. You can’t really get at the .js libraries without jumping through the hoops — I got nowhere with my Mac.

The libraries themselves are a bit less demanding. They offer good cross-browser support for Firefox and Safari users, something that may surprise Microsoft haters. But there are limits to even this commitment: I saw the phrase “Due to a known issue with Atlas on Safari” several times in the documentation, and there were similar notes for Firefox users.

These notes, however, concerned relatively minor details such as whether a popup box vanished when someone clicked outside it. The very fact that the notes are there is more of a testament to Microsoft’s commitment than an indication of its failures.

Atlas’ collection of widgets is a bit sparse, at least compared with the other offerings; there are no big editors and only a few animation tools. Much of the work is instead devoted to integrating the AJAX with the server, in this case the .Net Web services. The documentation and the examples in these cases are excellent.

There are a number of mechanisms for taking information from the database and formatting it at the client. All of them rely heavily on C# on the server, and all of them integrate well with the JavaScript on the client.

The code is clearly meant more as an extension of the .Net platform, not a tool for doing slick things on the client. If you’re heavily invested in .Net and you want to leverage the system’s Web service infrastructure, Atlas is a good way to add some life to your Web pages by consuming services there.

Yahoo AJAX Library
Yahoo’s AJAX library is not only a
solid collection of functions but also a good illustration of how to publish open source software. The code for adding a core group of widgets to your Web application comes in a zip file, and Yahoo offers a wide variety of examples and design suggestions. Many of the routines come with six to 10 different examples, all with sample code and demonstration pages.

This approach is markedly different from the other packages because Yahoo is just as intent on pushing a clear design philosophy as it is on delivering a piece of code. This tactic is more important than it may seem because the general user still needs a great deal of education about how AJAX applications behave. The designers at Yahoo want to push a stable, consistent behavior for the AJAX widgets, and their very complete documentation encourages this.

img80483.gif
The collection of features in the Yahoo library is solid but not as large as Dojo’s. It has many of the standard tools, such as an animation library and a tree collection, but there are few of the larger, more substantial tools such as an editor or a live table.
1 2 Page
Mobile Security Insider: iOS vs. Android vs. BlackBerry vs. Windows Phone
Join the discussion
Be the first to comment on this article. Our Commenting Policies