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.
I’m glad I’m not the only one obsessed with dhtml Data Tables.
I got blown away by ExtJs grids initially a while back, they were truely wicked, until its license turned me off and make me ditch a month’s effort to learn it.
And then I found YUI datagrid, and I looked no more.
My whole reason for getting hooked to YUI data table was its wicked inline cell editing.
Then I came to discover all its goodies, paging, custom formatting, sorting, replicating desktop effects like row clicking etc…
With the help of YUI data grid I managed to abstract out a library that takes in data and metadata from the server via ajax and created a crud application centered around the data table, with absolutely no extra-coding other than creating an instance of data table.
And I can drop that library in any project and it’ll give me a CRUD application instantly ( of course u have to write your code on the server to service the ajax calls for data and metadata, and which is quite easy to abstract out ).
It handles adding/editing/deleting/searching records from one single page. I use YUI’s excellent panel widget to automatically generate forms for editing records for the CRUD app.
And I wouldn’t trade that for anything
Dojo certainly has a good community following and industry backings, especially from the Java end of town, but it lacks the appeals of YUI. With YUI I don’t have to add non-standard stuffs in my markup to make it work and YUI is damn fast too.
And YUI 3.0 is looking really really mean
I had a very similar experience w/Dojo and YUI, and am in the process of doing a side-by-side comparison of YUI DataTable vs Dojo DataGrid. Just wondering … what do you use for your backend (rails, etc.)? And, are you using JSON?
I’m using the YUI grid with a JSON DataSource and have found that rails returns an array whereas the YUI datasource apparently expects a JSON response object (with a property containing the results collection). Have you experienced the same thing? If so, any words of advice?
I ran into the same issue with Dojo. It is just too slow. I wasn’t so concerned with the load time as our app is a single page app. However, rendering times are horrible. We also had many issues with Dojo memory leaks.
We use Ext JS for another app. It is amazing. We use it via a GPL license, but the commercial license is worth 10x what they charge.
this sounds fantastic, any of you guys feel like sharing your templates or a simple example; since i’m new to ajax it’s a bit confusing to put the pieces together; the basic idea of
“Select id,name,address from FriendList” or whatever with CRUD should be like one line of code. (without installing ruby, just some php libraries/templates) grin