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.
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.
The Durandal starter kit's home/welcome page in Chrome.
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" />
<script src="lib/require/require.js" data-main="app/main"></script>
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.
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.
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.