Durandal's modular framework provides a clean approach to coding

 Image: iStock

The number of JavaScript frameworks available can be overwhelming, with everything from Ember.js to AngularJS and many in between. I got a late start with Angular during a recent project, and further research led me to Durandal, as its creator worked on the Angular team.

Durandal is billed as a cross-device, cross-platform (Android, iPhone, Windows, Mac, etc.) lightweight framework for building Single Page Applications (SPAs). The SPA is a popular approach to building applications, especially mobile interfaces where reloading and paging are not desired. Durandal is built using existing, popular JavaScript libraries RequireJS, Knockout, and jQuery, so there is familiarity along with plenty of web resources for getting up to speed.

Getting started

Durandal is purely JavaScript, and it is not dependent on any platform so run it wherever you like. The latest version (2.1.0 for this article) is freely available from the Durandal download page. It is contained in a compressed zip file, so download and extract the contents, and you are ready to go (note: Durandal requires the installation of RequireJS, Knockout, and jQuery). The Durandal site offers samples and a starter kit that can speed up your usage.

The starter kit is the fastest way to learn how Durandal works. Figure A shows the starter kit installed on an Apache instance on my Mac OS X development laptop. It has the following three main directories:

• app: This directory contains application-specific view and view model code.

• css: This directory contains application-specific style sheets.

• lib: The lib directory contains the source files (JavaScript, CSS, images, etc.) for the libraries used by the site. For the starter kit, this includes the base libraries (Knockout, RequireJS, and Angular) along with Bootstrap and Font Awesome. The Durandal source files are included as well.

Figure A

The Durandal starter kit's directory structure.

Figure B shows the starter kit home page open in Chrome, with the second tab open in Figure C. The starter kit demonstrates many Durandal features, including routing, modal dialogs (click on a picture on the Flickr page), data binding, navigation, and much more.

Figure B

The Durandal starter kit's home/welcome page in Chrome.

Figure C

The Durandal starter kit's Flickr tab/page in Chrome.

The source code for the home page (welcome.html) is shown opened via Atom in Figure A. A quick examination of it reveals some of the details of working with Durandal. First, the link elements make the necessary resources available. In the starter kit example, the link elements reference the CSS files for the libraries used (Bootstrap, Font Awesome, and Durandal) along with a specific file for the project (starterkit.css).

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="css/ie10mobile.css" /> <link rel="stylesheet" href="lib/durandal/css/durandal.css" /> <link rel="stylesheet" href="css/starterkit.css" />

The JavaScript used by the page is referenced at the bottom of the index.html file with the following SCRIPT tag that points to the RequireJS library. The SCRIPT tag's data-main attribute specifies the entry point for the application, which is app/main in the starter kit example.

<script src="lib/require/require.js" data-main="app/main"></script>

The app/main value points it to the main.js file within the app directory with it shown in Figure D. The first part of the source code shown in Figure D is configuration (requirejs.config) -- it points to the various JavaScript libraries used, including jQuery, Knockout, Durandal, and Bootstrap.

Figure D

The main.js JavaScript file is the entry point for the starter kit application.

The next chunk of code defines the main module with application attributes (like app.title) declared and app.start actually starting the application and setting up routing. The shell.js file located in the app/viewmodels directory (Figure E) handles routing. Notice there is a shell.html file within the views directory that handles presentation. The output of the routing is displayed within the main DIV element defined in the application's main page (index.html). If you want to add another page to the application then another route is added to the previously covered shell.js file -- this requires a JavaScript file in the viewmodels directory as well as a corresponding HTML file in the views directory.

Figure E

Starter kit routing is defined in the viewmodels/shell.js file.

For Visual Studio users, the SideWaffle extension adds a Durandal template (Figure F) that provides a shortcut for starting Durandal-based solutions.

Figure F

Create a new Durandal project in Visual Studio with SideWaffle.

Modularity is key

Modules are a core feature of the Durandal framework; this is no surprise, since it was built with RequireJS as its base. The modularity provides a cleaner approach to coding.

For example, the starter kit home page covered earlier shows the pared down approach where there is only one DIV element on the home page. The code for the actual content (or pages) is contained in individual view files with routing used to reference them. This allows you to break an application into components or modules, which theoretically, should make it easier to maintain.

A simple to use framework

Durandal provides everything needed to build SPAs, with a modular approach that lends itself to good code organization and cleaner coding. I am glad Durandal is pushing toward a new version, as it provides a great framework for building applications.

Also, staying tuned into the Durandal world can be entertaining. Durandal's lead developer, Rob Eisenberg, apparently quit the project to join Google's efforts on Angular 2.0, but returned to Durandal when he did not agree with AngularJS's direction (one change that is causing pains is AngularJS 2.0 not being backward compatible with previous versions).

Note: After I wrote and submitted this article, Eisenberg announced Aurelia, a new framework that builds on his Durandal work. You can choose to upgrade from Durandal to Aurelia or continue using Durandal.