Surveying open-source AJAX toolkits
Packages from Dojo, Zimbra, Yahoo, Microsoft, Google, and OpenRico/Prototype showcase the variety of libraries available to AJAX developers
By Peter Wayner
July 31, 2006
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?
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.
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.
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.
Zimbra Kabuki AJAX Toolkit
When Zimbra appeared as a complete solution for offering e-mail and calendar management to an office, many were impressed by the package’s sophisticated use of AJAX at all levels. Every widget was designed to have a real live feel.
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.
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.
Google Web Toolkit
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.
Open Rico and Prototype
One of the more prominent, pure open source AJAX projects is made up of a loosely knit coalition of projects including Open Rico and Prototype. Whereas Dojo is a single big, unified project, these two and a few other smaller projects are all technically independent.
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 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.
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.
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.
Yahoo does add some nice touches. The animation library, for instance, also interacts with some standard tools, such as a text scroll device that allows you to automate the behavior of some part of the HTML — say, a box filled with text. The Connection manager will automatically assemble all of the data from a form and put it into the right format for a GET or POST application.
Despite the lack of an editor, these interactions give Yahoo’s library a smoother feel, compared with the rough-and-tumble state of Open Rico or Zimbra. Whenever you dive into the code with Yahoo’s toolkit, you usually come away feeling that the company has spent a bit more time optimizing the functions and adding some real depth to the libraries.
Opening up the future
As these open source AJAX packages evolve, I think we’ll see more of a difference between the ones that are directly tied to one corporation and the ones that remain outside the control of one particular company.
I expect that Google, Microsoft, and Yahoo will continue to exert tighter control and editorial guidance over their AJAX projects, compared with the neutral packages. This control will help people who like a bit more polish and better documentation, because I expect that the vendors will include the efforts of regular staffers.
The neutral packages, meanwhile, are bound to grow more varied as they attract more contributions. Some parts of Dojo are already ports from smaller open source efforts that were rewritten to use the core parts of the Dojo packages. I expect that more people will work to add their few lines of code to these projects, if only because it will make it easier for them to leverage the libraries with their own projects. The neutral packages will likely continue to be the ones that offer the most creative ideas and the cutest widgets at the quickest rates.
This schism, however, is just a prediction. Dojo is now supervised by a foundation with support from major corporations; perhaps it will start focusing its effort and polishing its documentation. And there is no reason why the bigger companies can’t start nurturing and soliciting more contributions to their packages.
Regardless of how they evolve, the best way to use all of these open source packages is to pick and choose the parts you need to assemble the Web application you want. For example, I eliminated Dojo’s editor from one of my projects when its text editor didn’t offer access to the data in the format that made my life easiest — so I switched.
It’s difficult to suggest one particular library as best or to make blanket statements about superiority because so much of the toolkits’ usefulness depends on your programming style and needs. I recommend taking a tour of each and even mixing and matching the libraries. After all, there are few practical reasons why you can’t use code from Atlas and Dojo on the same page.