AJAX TOOLS

If you want to add AJAX to the magic collection of buzzwords sup-ported by your Web site (and who can resist the siren call of the latest buzz-word?), 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?

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 appear-ing little more than a year ago. The idea of using JavaScript with or without XML to add

A close look at six high-profile toolkits reveals a wide variety of app-dev options — if you have the knowledge and time to take advantage of them

Taking theMeasure of Open Source

AJAX TOOLSB Y P E T E R WAY N E R

I N F OWO R L D . C O M 0 7 . 3 1 . 0 6 25

26 I N F OWO R L D . C O M 0 7 . 3 1 . 0 6

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. (For more on the intricacies of AJAX, check out infoworld.com/2911.)

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

The best-known proprietary pack-ages, 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 fea-tures of native code. 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 explo-sion of interest in the area right now.

Selecting the Six Passing over dozens of excellent pack-ages and thousands of perfectly ade-quate solutions, I selected high-profile toolkits supported by the most stable organizations: Dojo, Google Web Tool-kit, Microsoft Atlas, Open Rico and Prototype, Yahoo AJAX Library, and Zimbra’s Kabuki AJAX Toolkit. Micro-soft’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 back-ground tools for simplifying the pro-cess of building an AJAX application. (To view screencast demonstrations of the six products, go to infoworld .com/4338.) They will be most inter-esting 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 usu-

ally 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 differ-ent 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

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.

Dojopros: a�Broad collection of flashy and sophisticated

widgets

aHierarchical package system speeds loading aCorporate support from IBM, Sun, and others

cons: aSpotty documentation with large holes

BoTToM LInE: Dojo has an excellent editing package, a wide selection of animating boxes, some drag-and-drop tools, and a slew of customizable widgets. It’s a broad and well-packaged open source AJAX project with many features that are often, but not always, documented.

Google Web Toolkitpros: a�Fascinating translation mechanism makes

integration with Java simpleaIncludes a wide collection of basic widgets a�Builds a full, Swing-style application in Java that

runs in JavaScriptcons: a�Working in Java makes it complicated to

integrate with other JavaScript apps

BoTToM LInE: Google’s AJAX toolkit is an amazing tool for turning Swing-like Java code into a Web application that runs in JavaScript alone. The Java/JavaScript translation may cause some integration concern for developers, but the Google system is surprisingly easy to use.

Microsoft Atlaspros: a�Deep integration with .Net makes it simple to

work with .Net servers

aExcellent documentation

aLibraries are generally cross-browser compatible

cons: a�A bit too integrated with Microsoft’s

development toolsaMany small glitches for Safari, Firefox users BoTToM LInE: Atlas is a collection of routines that makes it simpler to interact with your .Net server. Much of the work is devoted to integrating the AJAX with the server, not doing slick things on the client. If you’re invested in .Net, Atlas is a good way to leverage its Web services infrastructure.

I N F OWO R L D . C O M 0 7 . 3 1 . 0 6 27

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 some-one without the time to wade into a project, you should think twice about the costs and consider the more pro-fessional packages.

DojoIf there is one open source AJAX proj-ect 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 customiz-able widgets. These traits may explain why both IBM and Sun have recently signed on to support the Dojo Founda-tion 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 devel-opers. 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 animat-ing 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 docu-mentation, 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 load-

ing 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 sophistica-tion in the future.

Open Rico and Prototypepros: aClean, crisp code a�Many sophisticated widgets with true AJAX

integration

cons: aNo package management

BoTToM LInE: Rico and Prototype share more of an emphasis on animated effects and less on some of the pragmatic tools. The Prototype library is a set of basic, low-level tools aimed at programmers. Rico is a collection of some of the most popular widgets and animations built atop Prototype.

Yahoo AJAX Librarypros: a�Wonderful documentation concentrates on

examples for code and designa Tools have interface that’s easier for beginning

programmers and HTML designers to understandaSophisticated animationcons: a�Lack of larger widgets, such as an editor or a

live table

BoTToM LInE: Yahoo’s AJAX toolkit is a well-documented collection of tools and widgets that handle many of the simpler tasks. It has many of the standard tools, such as an animation library and a tree collection, but few of the bigger, more substantial tools such as an editor or a live table.

Zimbra Kabuki AJAX Toolkitpros: aCrisp, efficient widgets and clean examples a�Complete source code to a large office

application is also available

cons: aNo simple package management system aDocumentation is shorter than ideal

BoTToM LInE: A basic collection of some of the crucial tools for building client-based applications, Zimbra’s Kabuki doesn’t have the sophisticated animations of some of the other AJAX toolkits in this evaluation, but it does have an excellent editor and nice tree package.

Dojo’s HTML table tracks the mouse and allows you to sort the columns by clicking on the header.

28 I N F OWO R L D . C O M 0 7 . 3 1 . 0 6

Zimbra Kabuki AJAX ToolkitWhen Zimbra appeared as a com-plete solution for offering e-mail and calendar management to an office, many were impressed by the pack-age’s sophisticated use of AJAX at all levels (infoworld.com/4009). 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 pack-age, and a layout mechanism that can be used to build sophisticated user interfaces.

Zimbra’s system doesn’t have the same polish or sophisticated ani-mations as Dojo or Yahoo’s AJAX package. The widgets are quite func-tional, 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.

Google Web ToolkitThe oddest toolkit in the batch may be Google’s. Whereas the others are writ-ten in JavaScript and meant to be inte-grated 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.

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 typ-ing information from the Java code and end up with something that resembles JavaScript.

The translation is, however, a fas-cinating solution and one that Java programmers will both like and worry about. I found myself fretting over ques-tions 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 stan-dard widgets but hasn’t included some of the flashier mechanisms for animation.

I found Google’s system surpris-ingly easy to use — it ended up being close to working with a fancy version of the AWT (Abstract Window Tool-kit) 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 PrototypeOne of the more prominent, pure open source AJAX projects is made up of a loosely knit coalition of projects

I found Google’s system surprisingly easy to use — it ended up being close to working with a fancy version of the AWT or a simpler version of Swing.

Zimbra’s Kabuki toolkit includes an excellent example of a multipaneled data browser that links together a smart table with a tree used for filtering the data.

Google’s AJAX toolkit not only translates Java into JavaScript, but it turns programming paradigms such as the layouts from Java’s AWT and Swing toolkits into Web pages.

32 I N F OWO R L D . C O M 0 7 . 3 1 . 0 6

Atlas’ collection of widgets is a bit sparse, at least compared with the other offerings; there are no big edi-tors 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 data-base 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 cli-

ent. 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 LibraryYahoo’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 applica-tion 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 differ-ent 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 documenta-tion encourages this.

The collection of features in the Yahoo library is solid but not as large as Dojo’s. It has many of the stan-dard tools, such as an animation library and a tree collection, but

there are few of the larger, more sub-stantial 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 assem-ble 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 FutureAs these open source AJAX packages evolve, I think we’ll see more of a dif-ference between the ones that are directly tied to one corporation and the ones that remain outside the con-trol 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.

Such generosity always comes with a price, although it may be small. Yahoo’s JavaScript libraries, for instance, will always be there to support Yahoo’s mapping business. Dojo’s libraries, on the other hand,

The reorderable list example from Microsoft Atlas allows you to build a list that can be reordered by dragging list items locally.

Yahoo’s AJAX toolkit includes a wide variety of animated widgets. In this case, the text in the grey <DIV> section grows to show how a client’s ego will explode.

Stocking Your AJAX ArsenalDownload and explore several open source toolkits to choose the best options for your projects.

aDojo: dojotoolkit.org aGoogle Web Toolkit: code.google.com/webtoolkit

aMicrosoft Atlas: atlas.asp.net

a�Open Rico and Prototype: openrico.org and prototype.conio.net

aYahoo AJAX Library: developer.yahoo.com/yui

a�Zimbra Kabuki AJAX Toolkit:

zimbra.com/community/kabuki_ajax_toolkit_download.html

For even more open source AJAX tools, check out this list from the Open Source Applications Foundation: infoworld.com/4322

30 I N F OWO R L D . C O M 0 7 . 3 1 . 0 6

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 pro-grammers. It has clean, simple func-tions, 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 anima-tions built on top of Prototype. You don’t need to use Rico with Proto-type, 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.

Microsoft AtlasThe 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 fea-tures, and it continues to innovate with 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 install-ing 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 rel-atively 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 testa-ment to Microsoft’s commitment than an indication of its failures.

Rico’s LiveGrid allows you to create an HTML table that will act like a window on a large database. It will download only the data that will fit on the page, waiting until you scroll to download the next rows.

34 I N F OWO R L D . C O M 0 7 . 3 1 . 0 6

can work with either Google Maps or Yahoo Maps.

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 pre-diction. 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 rea-son 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 assem-ble the Web application you want. For example, I eliminated Dojo’s edi-tor 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 particu-

lar 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 match-ing the libraries. After all, there are few practical reasons why you can’t use code from Atlas and Dojo on the same page. i

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.

i’ve looked at a number of proprietary AJAX frame-works during the past year with a mixture of surprise and admi-ration. It may be a measure of how much I’m mired in the past, but I’m still amazed when a complete client application runs in a browser. Yet, that’s what some of the proprietary toolkits have been offering for more than a year.

There are some major differences between the proprietary and open source toolkits, and whether these differences matter to you will likely be based on your level of app dev expertise and available resources — both time and money.

First, the professional AJAX tools often come with built-in, drag-and-drop development environments. Tibco’s General Interface (infoworld.com/3552) and JackBe (infoworld.com/3234), for example, include complete IDEs that run in the browser.

The open source tools don’t have anything this polished, but they can come close — Microsoft Atlas is designed to be integrated with its IDE, and Google’s Java-to-JavaScript tool effectively lives in Java IDEs like Eclipse.

Integrated data formats unify the proprietary toolkits. Backbase (infoworld.com/3208) stores all of its layout and event passing information in its own XML format; JackBe uses JavaScript to store data. The open source toolkits have some amount of unification, but they are often more open and

cacophonous. True cohesion isn’t common except perhaps in the case of Google; its format is fairly inscrutible because it was translated from Java.

The proprietary toolkits also come with sophisticated debuggers. Backbase, for instance, has a built-in debugger that launches right from the user’s Web site when you click on a tiny icon. It’s bundled with the distribution during testing and is stripped out later.

Debugging the open source AJAX toolkits is not as fancy. Dojo and Yahoo can log messages to a console, whereas Google has a complete environment that runs on your local develop-ment machine.

If you have a niche application, though, the propri-etary toolkits can be your savior. IceSoft and Nexaweb (infoworld.com/2257) offer rich client tools that allow you embed a Web-savvy component in your client software. This inverts the AJAX paradigm and allows you to leverage all of your knowledge of HTML and JavaScript to build your client applica-tion. Kapow (infoworld.com/4035) also offers a sophisticated screenscraper with an embedded JavaScript engine.

It’s possible to do some of the same things with the various open source tools, but it will take more work — a number of developers are using JavaScript interpreters to offer scripting, for example.— P.W.

Proprietary AJAX Toolkits: Leveling the Playing Field

To view screencast demonstrations of the six AJAX toolkits in action, visit infoworld.com/4338.