Dojorama Introduction: Building a Dojo Single Page Application

This post kicks off a series of articles demonstrating the construction of a single page application using the Dojo Toolkit. Dojo is an amazingly powerful, stable and well designed framework covering most basic infrastructure requirements. Of course there are many other frameworks assisting you in getting the job done but check out David Walsh's excellent 10 reasons why your projects should use the Dojo Toolkit.

Live Demo

You can check out the demo application right now and get the code from Github

Dojo - The Good Parts

Dojo is a huge project, thus before we dive in, let's take a closer look. For several of my projects, I've been using much of the stuff in the dojo namespace, the build tool and the testing framework (DOH). I'm not too taken by the dijit library, with one big exception - mijit/_WidgetBase and mijit/_TemplatedMixin which are essential in the construction of small and large applications.

The dijit widget library is nice as you stick with the bundled themes but any customizations other than simple cosmetics are just too hard (at least for me). Looking at the Javascript parts, DRY has been implemented consequently, which quite significantly augments complexity when extending existing components.

The current marketing kind of suggests, that Dojo and Dijit is one and the same thing. To some degree, I could even imagine, that this is what stands in the way of a more widespread adoption of the Dojo Toolkit.

I really consider dijit/_WidgetBase and dijit/_TemplatedMixin being essential core components and I would love to see them move into the dojo namespace for version 2 of the toolkit. For the purposes of this tutorial I created a fork of the dijit project, removing everything but the widget stuff which we'll use extensively in this application. Let's call it mijit (Micro Dijit) for now...

Getting started

If you're new to Dojo, I recommend you to check out the many tutorials on the Dojo website and on the Sitepen blog. During this tutorial I'll also provide many links to those tutorials, articles and documentation.

As more logic is moved from the server to the browser, a client-side application can get arbitrarily complicated. This situation makes it essential to come up with an intuitive decomposition of the problem into smaller and understandable pieces matching your mental model of application architecture. The aim of this demonstration is to hopefully filling you up with some useful ideas and help smoothen the path in your own development efforts.

Requirements

The resulting application should satisfy the follwing requirements:

  • Single page application with nice urls (History API)
  • Fallback for browsers without History support
  • Search engine friendly and fallback for browsers with disabled JavaScript
  • Loosely coupled, well structured and maintainable codebase
  • Layered architecture with testable components
  • Rich view component hierarchy
  • Solution for basic form input elements while not using Dijit widgets and bundled themes
  • Server-backed CRUD functionality to read, add, update and delete items
  • Data bindings - automatic updates between view components and underlying data models
  • Internationalization (i18n) with localized content in resource bundles
  • Active frontend development while the server-side API potentially does not yet exist and without any server-side requirements but a webserver
  • Playing nicely with others - smooth integration with third party libraries
  • Creation of an optimized production build using minification and concatenation
  • Future proof - transition from current Dojo 1.9 to 2.0 and onward

Ouchhh, that's a handful but we're not afraid

The thing shall be named Dojorama and it's all about music! We will be building a backend application for the website owners to manage their music. It will need an input form to create and update releases. We'll also want a page providing a listing of all the music - dgrid seems to be the right candidate in this discipline. Ah, and one more thing: we are doing it all programmatically thus not using the declarative methods offered by Dojo.

Ingredients

Dojorama is built on top of these fine libraries:

Currently, the resulting application including all scripts, CSS, graphics and Google Analytics totals at less than 150K (gziped).

Table Of Contents

  1. Introduction
  2. Getting started
  3. Turning it into a single page application
  4. Defining a RESTful server-side API and integrating dgrid
  5. Input form, input validation, data model and data bindings
  6. Dependency injection container and configuration
  7. Visual inspection and unit testing
  8. CSS loading & theming
  9. Baking the production build

The final application, it's structure and dependencies ideally serve as a boilerplate and starting point for your own application. Let's get started!