Dojo event performance tip

When working with the Dojo Ajax Toolkit and using it’s dojo.event package to listen to DOM and custom events, the two most common approaches are:

  1. Listen for an event (or function call) to be triggered on an object, and when it is to run a custom function, e.g.
    var alertFn = function() {alert(“widget is showing”);};
    dojo.event.connect(myWidget, “onShow”, alertFn);
  2. This basically says that when the “onShow” function is called on some widget, called myWidget, run a function that does a simple alert. Of course you can do whatever you like inside this function.

  3. Listen for an event (or function call) to be triggered on an object, and when it is to run a custom function defined in the scope of an object, e.g.
    var myObj = {
    alertFn: function() {alert(“widget is showing”);}
    dojo.event.connect(myWidget, “onShow”,myObj, “alertFn”);

    This is saying that I have an object called “myObj“, which has a function called “alertFn“, and when the “onShow” method on “myWidget” is called, call the “alertFn” function on “myObj“.

I’ve found that when working with Dojo version 0.4.2 and 0.4.3, using the second approach is far far quicker. It turns out that internally, if you simply pass an anonymous function to Dojo, it will add that function to an internal structure and do a brute force search on that internal structure to make sure that this function is unique. This can result in a very significant performance hit – I’ve seen it take up over 50% of the startup time of a page on one of our more JavaScript heavy applications.

So, the conclusion is that if you are dojo.event.connect, which is one of the most useful functions in the toolkit, make sure to use four arguments to the function (approach #2 above), rather than just three (approach #1 above). If necessary, place a simple wrapper around the function as I have shown.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Dojo 0.9 released

The latest version of the Dojo Ajax Toolkit has just been released into the wild. Version 0.9 is a very streamlined progression of the toolkit, with many of the less essential features pushed out to another project, DojoX, and the Dojo widgets given their own project, Dijit.

Another big change is the the main JavaScript file in Dojo, dojo.js, is no longer customisable. It now contains the most common features required by most web developers, and nothing more. As a result, it is far smaller than previous incarnations, down to ~24k when gzipped.

Some resources:

James Burke has written up a very informative post about what exactly is baked into the default build of dojo.js, which you can find at . Well worth a read.

Bill Keese wrote up a guided tour of 0.9 at

The Dojo book for version 0.9 can be found at It’s almost finished (almost!) as of today, Aug 22 2007.

The Ajaxian post on Dojo 0.9 can be read at

Download the toolkit from This page gives some information on how you can use Dojo from AOL’s hosting servers, so you never have to download it at all.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Dojo theme browser shows off Dijit widgets

The Dojo/Dijit (Dojo’s widget project) toolkit has created a page where you can view many of their widgets using the four CSS themes written so far for Dojo. This is cool for a couple of reasons.

Firstly, it showcases the excellent work the Dijit developers have put into new themeing skins. There are three themes completed so far, and changing the look of Dojo is now as simple as including a different CSS file on your web page. All Dijit widgets now run off a single CSS file, rather than each having their own CSS file.

Secondly, it shows the usage of many of Dijit’s widgets (say that five times in a row! 🙂 ). Many of the demos from the 0.4.* days are gone now, and this is about as comprehensive a demo of Dojo’s widgets as you’re likely to see for a while. And yes, they are very nice indeed.

Go to to see the default theme (tundra) in use. Click on the “Alternate Themes” tab at the bottom of the page to switch themes to one of the alternate themes.


Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt