I remember seeing Dojo for the first time and I was hooked on the flashy gizmo’s and widgets from the off. The awkward learning curve was cast aside as I went about reading and listening to everything I could lay my hands on. After a while of using Dojo on many of my work projects one of Dojo’s most common complaints became apparent – Speed!
Now this wasn’t because of using excessive amounts of Ajax in inappropriate places. One page in particular just had two dialogs but was very slow to load and would struggle to run on anything at standard ‘business level’ workstations.After some digging I found a number of different ways in which you can improve the speed of Dojo so I set about each one with varying degrees of success.

Implement Using Javascript – Most people when they hit Dojo and get onto all the fancy widgets go straight for the parsed widgets where Dojo simply parses the document for any Dojo tags and generates the corresponding widget for it. This makes the whole process incredibly simple and quick to develop but ultimately it slows everything down when Dojo is having to re-read the page each time. So using the createWidget method and turning off Dojo parsing the page

Only Include What You Need – Too often people will end up adding a lot of includes they just don’t need for all of their pages all of the time. Trim these down if they’re not needed and reduce the clutter of downloading too much.

dojo.io.bind – Any data you can save from being loaded immediately onto the page can be loaded later using bind. Doesn’t sound like it’d help but I shaved seconds off loading times by lazy loading different parts of the page rather than having large swathes hidden.

However, even after these and a few more little optimisations I was getting fed up. Dojo was SLOW! It was annoying my users and I don’t like them being pissed off if I can help it.

Needing a Fast Data Table
I needed a good data table. One that allowed for pagination, dynamic data, effective sorting, Ajax loading/updating, etc. The Dojo tables (FilteringTable and SortableTable) were miserable attempts at this. Two of mybiggest complaints were 1) Sorting across pages was poorly supported. 2) Dynamic data loading and updating was sketchy at best. 3) SPEED!
Fed up I went looked at a couple of other libraries for a solid well-rounded feel – MochiKit, Prototype/Scriptaculous, YUI, etc. The table was either non-existent or a poor after thought to the library. Considering the huge prevalence of tabled data – certainly in my industry (financial). I find it amazing that a simple, powerful, robust and fast implementation has taken so long to come about. The current libraries seem obsessed with creating fanciful widgets rather than going for something nuts & bolts useful to a huge range of people.

YUI
That was until I caught the YUI DataTable widget. Its only in beta but I’ve been so enthralled with its richness, speed and elegance I’ve begun the process of converting a variety of my table designs at work into this new table. Its stable, robust, fast, feature-packed – you really couldn’t ask for more. Oh – and as usual the Yahoo team have absolutely fantastic documentation.
Well after falling for the YUI DataTable I decided to take a peek at all the other library features I’d given a cursory glance over when I first got into Ajax. It has certainly matured and filled out a lot and after using Yahoo partially in one of my latest work projects I noticed a significant speed boost. So it got me thinking – is the Yahoo UI library faster than Dojo. I’ve been running a few speed tests and looking at the Javascript import speed alone – YUI is streets ahead.

In function calls my Firebug window is filled and scrolled massively from Dojo function calls across multiple files from including simply a DropDownDatePicker into the page. If I do the same with YUI (Calendar) I get a fraction of that activity.

With Dojo I’ve had to wait seconds for a page to load – in YUI its given back the users time and resulted in just as good a product.

I’m going to start shifting all of my Ajax code to YUI over the next few months – thats how good I’ve found YUI to be. I’ll still be using Dojo for some widgets not available in YUI but I’ll be predominantly using YUI from now on.

As mentioned in the previous post the way I refreshed a datatable widget after a change in the data was to reinstantiate the table. The way I did this was to simply make my widgets configuration and creation into a functin which I could then call at will whenever I needed it to take on new data.

However, a new method has sprang up that seems much better. Although slightly less intuitive. There’s a method called

myDataTable.getRecordSet().replace(newData);  // replaces the data with the newest set
myDataTable.paginateRows();  // re-paginates the table
myDataTable.showPage(0);  // shows first page

This also executes marginally faster than rebuilding the entire table.