Performant DOJO

When your rich internet applications become more complex and mature, you learn that there are some rules to obey to achieve a sucessful dojo project. What does successful mean ?

  • easy extendible
  • good client performance
  • easy maintainable, readable code
  • economical memory usage

Our rules ;)

1. Build dojo from SVN
Its seems to be disturbing to your own work that the dojo team has comitted a fix last night that breaks a api. But, these fixes don’t come from nothing, means the chance is there that you had a warning like "xy is deprecated and will be replaced by zz" when you read the console output. You read the console messages, don’t you?
All in all its much faster on the major dojo release dates to have it all there, instead of fixing it all on one day. It is much likely that this will cost You a remarkable amount of time.

2. Use dojos compression
The compression & buildsystem is a important thing that will help you to reduce the time the whole dojo system requires to load and initially execute. A important factor if you are not using a one page Ajax application model or limited ressources.

3. good XHTML matters
Dojo parses a lot of information to get all that markup transformed into CSS styled widgets that have all that magic functionality inside. So far it is important to produce correct markup, without ANY style attributes (use class and css by id), tables only where they are required and the minimum set of (X)HTML nodes.
Examples that use only 60 Nodes (XHTML) with div/span based layout perform better than the same code with table based HTML 4.01, style attribute using markup and 185 Nodes. Simply because you tell the same story with less characters.

4. (X)HTML event attributes -> NO NO NO
XHTML Attributes do not need to be noted down in the markup, they can be added programmatically. In any HTML / JS contect you can choose to add them by js code, may it be dojos event connect or the pure javascript methods that add event functionality to the dom.
Its much more likely to find all the connected and used events when you are doing that by code in ONE place and not ditributed over the whole project.

5. Dont use javascript global scope in your project

When you develop the application code using dojo and maybe a bit of DOM, avoid using variables outside your function scope. Why ?

  • The variables outside the function scope are slower to access
  • references to dom nodes are much likely not to get garbage collected and you will need more RAM to execute your application code over time.

You can use objects to create your application code and informations like the actual used browser (i know its implemented in dojo .. just say for fast accesses sake)  can be stored in a objects member variable instead of beeing globalized around. If you are generating these objects using prototype of objects you will save some more memory on you application.

So far, these are the basics i have learned to make my life in the dojo easy and effective.
Besides you are much likely to be at home in time at the evening and able to meet timelines because refactoring and changes to dojo are not that big things and cost not too much time. Hope that helps in any way.

Virtual Data Grid: becoming reality soon

TurboAjaxIf you use Dojo, have a look at the fabulous widgets called TurboWidgets from it’s available for non-commercial and commercial usage. One of the great widgets (besides Theme support where you can also create your own corporate theme look and feel) is a data grid which can be customized in a wide variety.

As I’ve discovered in the TurboWidget forums, they’re working on a virtual data grid. Imagine you want to display a list of 100,000 or more items which can be a major pita especially when working with slow internet connectivity. The solution is a real virtual data grid. They showcase a demo here. Release date will be hopefully by end of July, and I’m looking forward to it. :-)

As you can see in the screenshots, while scrolling down the grid will be empty or displaying „…“ ….

… while loading the data. After finished loading, it shows the normal grid data:

Unfortunately, we have to wait until end of July, but I hope the guys from TurboAjax will have it ready soon. :-) Combined with a XMLHttpRequest based PHP backend (which will be triggered by the Grid’s data model) this will be a very userfriendly solution for displaying large data sets.

AJAX Showcases: the good, the bad and the ugly

Found at the namics blog: the presentation of David Nuescheler, „AJAX Showcases: the good, the bad and the ugly“ from the EuroAjax conference. Very nice. The presentation is available as PDF or as Flash. David gives his opinion through showcasing the HTTP Request analysis of several AJAX based applications.