Product review: Inside open source AJAX toolkits

Dojo, Ext, Google Web Toolkit, jQuery, MooTools, Prototype, and Yahoo User Interface perform amazing tricks with JavaScript; we explore what makes each tick to help you determine which one to pick

Which is the best open source JavaScript framework? It depends, of course. The open source projects that began as an effort to smooth over the differences between browsers are now large and varied enough to make the act of choosing far from simple. In the past, the project teams were small and happy just to write code that runs in different browsers. Now, there are many different options that depend on your feelings about project group dynamics, modularity, and dozens of theories about the best way, whatever you happen to believe that way to be.

Some decisions will depend upon the scope of the project. The best choice for adding a few fancy AJAX widgets to a site is often quite different from the best choice for building a full-fledged AJAX Web application. Other decisions may be matters of taste. The best library for an ex-Java programmer may differ from, say, one for a Perl hacker.

[ See "Refining the art of enterprise Web apps" for our review of JackBe Presto and Nexaweb Enterprise Web 2.0 Suite; see also "Top AJAX tools deliver rich GUI goodness" for reviews of Backbase, Bindows, JackBe NQ Suite, and Tibco General Interface. ]

The good news is that there are now more libraries than any sane person can even consider in a lifetime. While we concentrate on the more established kits -- Dojo, Ext, Google Web Toolkit, jQuery, MooTools, Prototype and Scriptaculous, and Yahoo User Interface Library -- there are literally hundreds more that are flourishing. Some are big names that people will feel we were mistaken to exclude, but most live in small niches, such as providing slideshows for pictures downloaded from Flickr. Some are independent, but many of the most popular libraries hold entire constellations of semi-independent projects that use the core library. And there's plenty of cross-fertilization. A good idea or piece of code from one group is often adopted by others.

Many of the open source libraries are best for programmers who need to add a bit of AJAX functionality to a Web page. If you want to add a color chooser, a date chooser, and a touch of form preprocessing to a page, then many open source libraries are great for the job. They are usually collections of tools in different states of development. The library managers have smoothed over any differences and applied a common philosophy to much of the code. You get a unified approach that has been tested in a number of the major browsers.

The toolkits aren't as useful if you're thinking of building an entire Web application that lives in the browser. If you're considering rebuilding a full, multiframe client application in pure JavaScript to simplify distribution and installation, many of these libraries aren't designed to handle that task. The more commercial frameworks, including JackBe, Backbase, Bindows, and Tibco's General Interface, are heftier packages from commercial companies that aim to make it simple to write full applications that happen to live in a browser.

It should be noted that several of these commercial packages now come with many of the advantages of open source packages. They have better documentation than almost all of the open source packages and frequently come with real training engineers and full-time support personnel. You also often get full access to the source code, in part because it's kind of hard to hide JavaScript. And in some cases, you can get the source code under a traditional open source license. Tibco's General Interface, for instance, is available under the BSD license, a very generous option.

By that same token, some of the grassroots projects are growing more commercial. Full support and training for the Dojo Toolkit, for instance, can be found from companies such as SitePen, while companies such as WaveMaker are building visual design tools that revolve around Dojo. These companies typically employ people who are contributing to the Dojo project. Furthermore, Dojo is supported by a more official foundation that pays a number of people with cash from major companies such as IBM. Dojo is not a small, part-time operation any longer.

Dojo isn't the only operation growing quickly. Ext, a fast-growing toolkit, offers full commercial licenses to its code that free you from the GNU LGPL. You might begin using the code as a library but start paying once you need the greater freedom of a full license.

A more difficult question to answer may be the style of the project. While all of the projects aim to be efficient layers that smooth over the differences between browsers, there are now significant differences between the coding styles of the groups. If you've got opinionated developers on your team -- and who doesn't? -- they're going to find a way to be wildly enthusiastic about one project, while sneering at the style or technique of the others. Some groups are pushing simplicity and size, while others are adding features such as modularity. People are serious about their projects, and flame wars are common.

The widespread expansion of choice is a sign of exploration and innovation. JavaScript programmers are constantly inventing new tweaks and enhancements for their code. They are discovering new practices and debating just which one deserves to be labeled "best." While many of these details can be safely ignored by casual coders, the amount of thought and care going into these debates is wonderful. It seems like every die-hard programmer with an opinion about the right way to code for the browser layer is setting out to prove their theories by building code.

If all of this isn't complicated enough, there are now hybrid versions that mix and match several of the major projects. Both GWT-Ext and MyGWT integrate the fancier widgets from the Ext library with the larger, Java-based Google Web Toolkit (GWT). That means you can write your application in Java and make Java calls to the Ext library -- calls that will be converted into JavaScript when everything is translated. Another project, Tatami, does the same thing with GWT and Dojo.

There are also many simpler examples of cross-pollination. All of these projects watch each other carefully, and the licenses allow a great deal of mixing and matching. If one group happens to find a clever way to code a particular function, it often appears in others within a few weeks. For that reason, the problem of choosing one framework may not be as important as it seems. The good ideas and best practices will probably make their way to all of the projects, one way or another.

Dojo Toolkit 1.0.2
License: Modified BSD or Academic Free License
Support: Mailing list, forum, and commercial providers including SitePen
Nutshell: A big, broad, well-supported project with everything and the kitchen sink
The Dojo Toolkit continues to be one of the most complete and extensive collection of JavaScript libraries, all linked by a sophisticated package management system for loading and controlling the libraries. The Dojo Foundation, a nonprofit group funded by a number of big companies, including Sun and IBM, supports a kitchen-sink-complete framework that comprises both a well-structured widget mechanism and a number of experimental packages.

The size and complexity of the system is easy to see. The downloaded tarball for version 1.0.2 is 3.3MB, and that is almost all JavaScript -- albeit very readable JavaScript with the full variable names and white space still in place. The documentation comes separately as either a book or a Javadoc-like automated description of the API.

[ View a brief tour of Dojo ]

The growth over the last few months has also been substantial and impressive. A new grid tool is part of the 1.0 lineup, and there is a nice widget framework called Dijit that unifies the approach to building those little boxes and the CSS style sheets control them. There are also some newer features borrowed from the big boys, such as a testing framework known as DOH (Dojo Objective Harness) for unit tests of the Dojo Toolkit. When it fails a test, the Web page echoes Homer Simpson. Anyone will wonder whether "Web page" is really the correct term to use for such a dynamically evolving system of code.

There are still dark corners of the release. While the framework is highly rational and well structured, the documentation is empty in places. The current version is a big improvement over what programmers faced even several months ago, but the code is often expanding faster than the documentation. The core code is described well in a book-length collection of example-filled Web pages known as the Book of Dojo. The documentation quality drops off quickly, though, if you start exploring the experimental part of the code called DojoX.

The Dojo team clearly wants its collection to be used to build larger, multifunction Web applications where most of the information on the page lives under the dominion of the JavaScript interpreter. The system provides an impressive foundation for using many of the best object-oriented approaches to linking together multiple widgets in a sophisticated event-passing network.

The focus avoids some of the more traditional uses for JavaScript, such as adding flashy effects or zip. Dojo is a very practical collection.

Ext 2.0.2
License: Commercial or LGPL 3.0
Support: Ext offers its own consulting and training services
Nutshell: A commercially backed project with sophisticated tools and a professional bent 
Ext is another framework that appeared out of nowhere and began to capture developers immediately with a very rich collection of widgets and a polished collection of documentation. The project is more a commercial venture that offers a practical open source license (LGPL) in parallel with strictly commercial licenses, training, and support.

The library is also built around the same super-DOM object mechanism that wraps the DOM element up so that the semantics are much simpler. Many of the details of iterating over elements and dealing with null objects are hidden away by a well-designed collection of methods. In just a short line of code, you can select all paragraphs and attach a method, clickedHere, that fires on a click:

Ext.select('p').on('click', clickedHere);

The strongest parts may be the depth of the widget collection. The grid tool offers a deep collection of mechanisms for displaying, sorting, and filtering tabular data. There are also hybrid grid tables, live search boxes, toolbars, tabs, and trees. All are sophisticated and well-integrated.

[ View a brief tour of Ext ]

There is an active user community, although it doesn't seem to have the same depth or fervor as other groups. This may be one of the costs of a strong, centralized commercial presence that has already handled most of the heavy lifting, saving some clever programmer the need to extend the toolkit. One of the nicer features is a collection of user-contributed themes that let you quickly change the look of the widget collection.

Ext is a fast-growing community offering sophisticated widgets and tools in an attractive professional package. It is a very effective mixture of commercial sophistication and open source freedom.

Google Web Toolkit 1.4
License: Apache 2.0
Support: You can always type “gwt support” into google.com
Nutshell: A great tool for ex-Java Swing programmers and others who dig typed content
The average person may know the Google Web Toolkit by the public applications built with it (Gmail, Google Maps), but programmers know it as one of the oddest and most intriguing hybrid languages. Traditional programmers who like writing typed code will love the idea that they can write nice, pure code in the well-regulated Java world, and then have the GWT carefully translate it into something that will run in the more unstructured, untyped world of cross-browser JavaScript.

Adherents argue that the GWT compiler can be smarter than even the best programmer in structuring good code that works in all possible browser combinations. They suggest that JavaScript coding is more like assembly coding and it only makes sense to let the computer handle the grungy details.

[ View a brief tour of Google Web Toolkit ]

Skeptics can't disagree with this basic premise because the code works well, essentially offering the strongest possible proof by demonstration. But they can argue that JavaScript isn't assembly code at all, just a modernized version of Lisp with a terribly verbose set of functions for manipulating the DOM. Expressing all of the logic in type-bound Java is needlessly limiting when there are so many type-free constructions available in JavaScript. Why ignore the richness of the JavaScript world just to make it easier to code in Java?

GWT's structure is more stable and produces a GUI that feels a bit more like a classic client application, circa 2000. This is why some GWT users are merging it with some of the other toolkits, producing hybrids like GWT-Ext, a fascinating mash-up that highlights some of the advantages of working with open source software.

The best matches for the GWT will continue to be former Java programmers, particularly those who know the Swing framework well. Most of the abstractions are close to direct analogs, something that's not surprising, given that some of the initial GWT developers were Swing refugees. This is attracting some of the sophisticated ideas from the Java world. Eclipse is easy for GWT users to adopt, and a new visual layout tool from Instantiations, GWT Designer, will warm the hearts of those who use the Matisse tool to build Swing applications in NetBeans. Shoot, some GWT developers are talking about writing their unit tests in Groovy!

jQuery 1.2.3
License: MIT and GPL
Support: Online forums, blog
Nutshell: A feast of user-produced plug-ins from a vibrant community
If you're looking for the most fanatical supporters, the crowd orbiting the jQuery libraries is passionate, devoted, and very creative. The jQuery library at the core has attracted a large crowd of plug-in developers who distribute their code separately. The group is more organized than the libraries built on top of Prototype, but far from as monolithic as the Dojo group.

Much of the focus of jQuery core code is aimed first at wrapping some effects around divs. The examples show paragraphs appearing and disappearing. The core library is well-integrated with the CSS toolkit, and there are a number of simple functions for manipulating the CSS.

[ View a brief tour of jQuery ]

The attraction of jQuery may rest heavily on a smart design pattern: Every jQuery function returns an object, making it possible to chain together a string of commands in one compact line.

For example, the line $("a").filter(".clickme").hide() will select all anchor tags, keep only the ones in the class "clickme," and then hide them.

The core library offers only some tools for manipulating the DOM with some good effects. The bigger tools, such as the grids, the color pickers, and the slideshows, are relegated to plug-ins. This area is wide open, fertile, and a bit cacophonous. There can be multiple versions of the same basic device in different states and with different levels of compatibility with the current release of jQuery. The central project maintains a central list with ratings and votes, but it leaves the distribution and development up to the individual responsible for a plug-in. To make matters a bit confusing, some of the plug-ins are so large and multitalented that they start attracting their own following. Interface, for instance, is one plug-in that many jQuery programmers can't live without because it handles so many basic chores.

jQuery should appeal to the disciplined programmer who enjoys the rigor of its chained JavaScript and the power it packs into a few simple lines. It's ideal for adding a bit of zip to a Web page, but it doesn't offer any structure to support complicated, multiwidget applications. This is slowly emerging as the community starts to work on applications that require more than a few tweaks of the DOM.

MooTools 1.11
License: MIT
Support: Online community
Nutshell: A lightweight tool built by a team focused on speed and quality
MooTools is one of the lightest, fastest library packages, comprising a tightly coded set of DOM manipulation functions in a simple file. It provides most of the same core functions as either Prototype or jQuery, but it uses a different style for creating some of the JavaScript. The core library is a foundation for a number of other packages offered by developers throughout the Web.

The most fun part of the MooTools experience may be choosing the plug-ins and functions you need before the server constructs the library for you directly. You add the desired functions (say, Accordian but not Smooth Scroller). The results can be compressed and delivered in five different ways, from full renaming of variables to just removing the comments to no compression at all.

[ View a brief tour of MooTools ]

MooTools is particularly proud of its speed, offering a benchmark for manipulating DOM elements that clearly shows it to be in the lead. Some Moo developers suggest that while other frameworks create small code, they work toward building fast code. A download that's 10 percent longer is only felt once, but a DOM search that's 10 percent slower is forever, or at least until the page is closed.

Moo code tends to be more object oriented, and the framework includes a number of functions for building and extending objects. You don't need to follow these leads or even include them in your custom-rolled version of the Moo library, but they're powerful, and they add a bit of simplicity for those who naturally think of data structures using object metaphors.

Many of the most popular constructions from the other libraries are also available here. You can chain together some of the effects just like jQuery, and there's an AJAX object for making an XMLHttpRequest call just like Prototype. The differences are important to some programmers, but they aren't too large.

Prototype 1.6 (and Scriptaculous 1.8.1)
License: MIT
Support: Mailing list and IRC
Nutshell: A quick, lightweight mechanism for manipulating the DOM and making a few calls to a Web service
These two projects are smaller, simpler approaches to manipulating a Web page with few of the bigger aspirations of the other major AJAX projects, but they are still very popular. Prototype is a relatively simple and tiny layer that offers both shorthand versions for popular functions and a good amount of cross-browser abstraction. Scriptaculous is a set of special effects and simple widgets built on top of Prototype.

Many people use Prototype without Scriptaculous because they don't need the special effects and Prototype offers a nice, clean approach to JavaScript coding. Many of the most common functions are given short names, and this endows even the simplest code with a nicer look and feel. The commonly used getElementById, for instance, is replaced with a single dollar sign, $(), a function I've added to my own code even when I'm not using Prototype.

[ View a brief tour of Prototype and Scriptaculous ]

Scriptaculous continues to offer some of the more sophisticated effects for making divs puff, shake, pulsate, shrink, fold, or about a dozen other combinations. While there has not been a noticeable improvement in this collection over the last year, Scriptaculous continues to be one of the simplest and best ways to add the kind of eye candy that bosses seem to love on demonstration day. The effects can be combined to act in concert with little extra work.

The Scriptaculous library is not the only collection built on top of Prototype. Rico, for instance, offers a nice live grid and several other features. A number of slideshow applications, such as Carousel, are also available. Many of the smaller, independent widgets are often built on top of Prototype.

This pan-AJAX popularity, however, doesn't mean that all of the widgets operate well with each other. Just because two libraries from different programmers use the $() function doesn't mean that the approach to structuring the DOM tree or passing events is going to work well together.

For the near future, Prototype will continue to be very popular because its lightweight approach offers what most AJAX developers need: a few easy handles for tweaking a few DOM objects and a simple way to issue a few XMLHttpRequest calls. (One survey of popular code on AjaxPatterns.org called it the most popular library of all.) But this may change if full Web applications become more popular and AJAX developers start embracing the kind of complexity that can be found in many client applications.

Yahoo User Interface 2.5.0
License: BSD
Support: Extensive support from Yahoo in forums and well-executed examples
Nutshell: Extensively documented tools from a group devoted to good user interface design
It may be easy to forget that Yahoo's collection of JavaScript tools is out there because the brand name, unlike Dojo or Ext, encompasses so much more than AJAX. This is a big mistake because the collection is one of the best-documented batches around, with a broad and deep assemblage of tools. The tools are used throughout the Yahoo Web site, and much of the packaging may be intended to support the internal teams.

Yahoo User Interface (YUI) is a good solution for everyone. The tools are well-tested and generally more robust than many of the independent tools, and they are available for the price of a BSD license. The user groups are sophisticated, and there are plenty of good examples, something that is often missing in other documentation.

[ View a brief tour of Yahoo User Interface ]

The YUI examples clearly show a wide range of the possibilities in the code. Many of the libraries have plenty of undocumented hooks in odd places that can be found only by reading the code. Yahoo does a great job explaining how to use them. The rich text editor, something that's missing in many collections in part because of the excellent independent editors such as FCKeditor, comes with 14 different examples on how to add or limit features, change the appearance, or interact with a distant server that might want to mark up the editor contents. My favorite part is the Flickr integration, which lets you search for images inside Flickr using tags.

Envelope, please

So what should you do? Which should you choose? In the short run, a simple solution is to look for the precise widget you need. Browse the lists. Try the demos. Then just pick the one that will work for what you need to do.

That will work for a fast answer to a boss that wants something pretty slick and quick. But it's worth considering a deeper investment. When you’re ready to commit, you’ll want to look for the style and approach of the programmers. Spend a few minutes with the examples. Read the documentation. Where do you feel the most comfortable? All of these packages will solve most of the same problems. Major differences or missing widgets are usually erased quickly because the developers borrow ideas and code from one another. Cool widgets are often duplicated by other projects. The secondary issues are more important in the longer run. It's as much a choice over style as substance.

Is that too much work? Oh, just close your eyes, push your finger toward the screen and choose the name that's closest to where your finger lands. They're all good.

1 2 3 4 5 6 7 8 Page
Recommended
Join the discussion
Be the first to comment on this article. Our Commenting Policies