James Thomas

Notes on JavaScript

Creating Todo MVC in Dojo - Overview

Before Christmas, Addy Osmani sent out the following tweet asking for a Dojo-version of the TodoMVC application.

Reviewing their Github page, the project aims to allow developers to compare MVC frameworks by providing implementations of a sample Todo application using different toolkit’s MVC support. They currently have over a dozen entries for toolkits, including Backbone, JavascriptMVC and Spine with more coming soon but, unfortunately, no entry for The Dojo Toolkit.

Introducing DojoX MVC

With the 1.6 release, The Dojo Toolkit introduced a new DojoX module that experimented with better MVC support, utilising recent features that provide automatic widget property monitoring. The module goes beyond simple data binding between models and views, including mapping model attributes to appropriate UI controls, model data validation, data store integration and others. Further improvements were introduced in the recent 1.7 release of The Dojo Toolkit and it is still under active development. For full details on DojoX MVC, see the reference guide.

I’ve been wanting to play with this module for a while and taking up Addy’s challenge provided an ideal opportunity. With help from Ed Chatelain and others, we created and refined our entry over the past two months, ready in time for the 0.3 release of the project.

Being a new part of the toolkit, there weren’t many examples of using the module for building non-trivial applications. Dojo’s TodoMVC entry should provide a good starting point for developers who want to explore DojoX MVC and compare its approach to other toolkits.

Walk-through series

Over the coming weeks, I’m going to walk-through building of the TodoMVC application using DojoX MVC in a series of articles. It will cover defining a model with composite attributes, generating views from the model, binding user actions to model attributes and using local storage for persisting items offline. I’ll also cover some common issues that developers might encounter when using the module.

Check back soon for the first part….

Update (26/05/12)

All articles are now available and the links are below…

Can’t wait?

If you want to dive straight in, the finished application is in my fork of the TodoMVC project, under the “todo-example/dojo” directory. The entry’s pull request has a good discussion about issues encountered, re-factoring, enhancements, etc.