Popular JavaScript Framework Libraries: Dojo, Rialto and Spry

[next]

In part one of the series, we looked at the Prototype, script.aculo.us and MooTools Frameworks. Last week, we turned our attention to three strong contenders for the title of Framework supremacy: JQuery, the Yahoo! UI Library (YUI) and MochiKit. This week we continue our overview of the twelve most popular JavaScript Frameworks with the Dojo, Rialto and Spry Frameworks.

Dojo Toolkit

URL: https://dojotoolkit.org/
Docs: https://dojotoolkit.org/docs
Demos: https://dojotoolkit.org/demos

Developers have been talking about the mojo of Dojo. From dealing with strings as quickly as possible, to efficient iterations, to built-in support for the back button in Ajax, Dojo has a lot to offer! The Dojo Toolkit's core implementation includes DOM utilities, Ajax (including JSON support), event handling and animation features. There are several optional modules available to add support for encryption, unit testing, debugging and more. Extension libraries Digit and DojoX offer many advanced controls and features for creating widgets, data display and manipulation and theming, among others.

DOM Utilities

Dojo provides the dojo.query object for manipulating the DOM. Like jQuery, most functions can be chained together. Alternatively, many chains have standalone functions to achieve the same goals. For instance, dojo.query("#testHeading").addClass("testClass") and dojo.addClass("testHeading," "testClass") yield identical results. The following code example displays some of Dojo's main features. It references the element with the ID of "testHeading," adds the testClass CSS class to it and then fades it out after 500 milliseconds using a Dojo effect:

One of Dojo's features is a package system to load the code you need, using the dojo.require() method. This function allows us to pull in parts of the Dojo Toolkit not provided for in the Core dojo.js, such as drag and drop, additional animations, Dijit widgets, DojoX projects or even your own code. Having the ability to download code at runtime helps keep the file size to a minimum.

Event Handling

Events can be added to HTML elements using the dojo.connect() method. This powerful utility can be applied to multiple elements by chaining it to the dojo.query() function. The following example does exactly that by turning off all the links in a page in one line of code (formatted for readability):

Animations

The dojo.js file includes the fadeIn(), fadeOut() and animateProperty() effects. dojo.animateProperty() is very powerful, and is the foundation for most advanced animations and other animations in Dojo core. In the following example, the dojo.animateProperty() function is used to fade an element back in via its opacity property and simultaneously make the text larger:

dojo.addOnLoad( function()
                {
                    dojo.style("testHeading","opacity","0"); // hide it
                    var anim1 = dojo.fadeOut({ node: "testHeading", duration:700 });
                    var anim2 = dojo.animateProperty({
                                                        node: "testHeading", delay: 1000
                                                        ,
                                                        properties: {
                                                                        // fade back in and make text bigger
                                                                        opacity: { end: 1 }
                                                                        ,
                                                                        fontSize: { end:19, unit:"pt"}
                                                                    }
                                                    });
    anim1.play();
    anim2.play();
});

Much can be done visually with the base animations, especially animateProperty(). The dojo.fx module can be optionally called in via dojo.require() for even more effects. Adding the module to your code provides several additional animation methods including dojo.fx.combine(), dojo.fx.chain(), dojo.fx.wipeIn(), dojo.fx.wipeOut() and dojo.fx.slideTo().

Ajax Support

The Dojo Toolkit doesn't store its Ajax functionality in a separate module, but presents a collection of functions that all start with the "xhr" identifier, which is short for the Ajax XmlHttpRequest object. GET and POST calls are performed using the dojo.xhrGet() and dojo.xhrPost() functions. All the Ajax methods share several common parameters. Most important are the url (the destination) and handleAs (the data type to treat the returned data as). Once the data arrives, it's passed to the load() function. Errors are handled by the error() function.

It's also possible to supply name/value pairs using a JSON object named content or by passing in form fields. In the case of the latter, all you need to do is supply the ID of the form:

Any JavaScript Framework worth its salt should be able to handle JSON objects, and the Dojo Toolkit is up to the task. For instance, say that you wanted to download a JSON object containing some data and a function to run. To accomplish this in Dojo, you would set the url to the file, the handleAs to "json," and then you can access the object within the load() function:

Dijit

Dijit offers an array of form controls that can be added to a Web page with minimal effort. Controls include date pickers, currency validators, menus, layout panes, trees, calendars, as well as layout containers such as tab containers and splitters. Digit controls can also be extended and customized using the Dijit architecture.

DojoX

DojoX specializes in slightly more esoteric applications such as data grids, charts, graphics and even cryptography. Nonetheless, they do offer many popular widget choices that compliment dijit's selection, including the Iterator, FileInput and ColorPicker controls. Others, like the Lightbox, Gallery and SlideShow widgets, are great for adding visual flair to your Web page.