Durandal — your new favourite client-side framework

So you were researching JavaScript frameworks to host your new single page application? Was angular too much or perhaps you don’t have time to learn its relatively complex structure? If answers to both of these questions is “Yes”, then you are probably looking for Durandal, let me introduce it to you.

Building blocks

Durandal is a client side MV* framework which means it will give your application structure to keep everything neatly organized with views, models etc. It is also an SPA oriented framework and what this means is that you get routing, application state management and easy to maintain and compose layout of your choice. Another strong point of this particular framework is the fact that it does not reinvent the wheel, meaning that it utilizes popular libraries you are likely to already know and love:

• Knockout for its awesome bindings
• RequireJS for the AMD (Asynchronous Module Definition) for loading JavaScript files only when they are needed and in the right order considering dependencies
• Bootstrap as the default UI/CSS framework
• It also provides seamless async programing using “Promises”

All this and more makes learning Durandal quick and painless as you probably already know most of the building blocks. What Durandal adds is a thin framework that wraps mentioned libraries and a few additional/optional things to aid your application in areas of maintainability and extendibility.

Simplicity

I think it’s time for some code now so a simple view model straight from the Hot Towel template should demonstrate the elegance and simplicity you can see throughout the Durandal framework.

define(function (require) {
 
    // Use require.js to load data operations handling module for companies
    var companiesService = require('services/companies');
 
    // Declare view model, activate method is the one durandal executres on page load
    var vm = {
        activate: activate,
        companies: null
    };
 
    function activate() {
        // use service to execute a server call to get our data
        vm.companies = companiesService.getAll();
    };
 
    return vm;
});

As you can see we have a basic revealing modules pattern here. VM is the object which can be referenced in other modules and will be backing an HTML view. The “active” function is going to be called by the framework whenever a user activates/accesses the “Company” view so it’s a great place for loading your data or do any other kind of initialization logic for the views. Notice that in line 4 we are requesting the companies module/service (it doesn’t matter how you call it as it is basically shaped the same as the view model but obviously provides different functionality). Durandal with the help of RequireJS promotes this modularity which so many applications these days are lacking.

Templates and resources

And what about the back-end? Well, it could be anything which JavaScript can communicate with – MVC, WebAPI other REST-full services, or even backbone, if lightweight is what you seek. Also, if you are a Visual Studio developer, getting started is even easier with the awesome HotTowel templates courtesy of John Pappa. There are also multiple other templates provided by Durandal team here, with the sources located on github. I recommend starting with the HotTowel though, as it is a full application. And if you are lucky to be a Pluralsight subscriber, there is a course by John Pappa where he creates a CodeCamper website using Durandal and a few other cool libraries. You can see it in action here, and for the Pluralsight course go here.

Summary

Durandal is one of those small things that really make a difference. Try out the sample, see how little there is to it and imagine how easily it could support large complex applications keeping them organized thus maintainable and a joy to code. Feel free to leave any comments or your experience with Durandal.

Tags: .NET, Software