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.
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/_TemplatedMixin which are essential in the construction of small and large applications.
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/_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...
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.
The resulting application should satisfy the follwing requirements:
- Single page application with nice urls (History API)
- Fallback for browsers without History support
- 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.
Dojorama is built on top of these fine libraries:
- dojo/dojo - The Dojo Toolkit
- dojo/utils - Dojo build tool and unit testing (DOH)
- SitePen/dgrid - Dojo grid widget
- kriszyp/put-selector - DOM manipulation (dependency of dgrid)
- kriszyp/xstyle - CSS loader (dependency of dgrid)
- twbs/bootstrap - Frontend framework (CSS only)
- scottjehl/Respond - Media query polyfill
- aFarkas/html5shiv - Enable use of HTML5 sectioning elements in legacy IE
- sirprize/mijit - Essential Dijit stuff (
- sirprize/dojomat - Application controller
- sirprize/routed - Routing
- sirprize/dojo-data-model - Data model for Dojo Applications
- sirprize/dojo-form-controls - Dojo widgets for native form controls
- sirprize/dojo-local-storage - LocalStorage wrapper providing dojo/store interface
- sirprize/dojo-sm2-playlist - Dojo/SoundManager2 playlist
Currently, the resulting application including all scripts, CSS, graphics and Google Analytics totals at less than 150K (gziped).
Table Of Contents
- Getting started
- Turning it into a single page application
- Defining a RESTful server-side API and integrating dgrid
- Input form, input validation, data model and data bindings
- Dependency injection container and configuration
- Visual inspection and unit testing
- CSS loading & theming
- 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!