Durandal — your new favourite client-side framework

by Patryk Borowa on 9th July 2014

durandalSo 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.

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

durandal-solutionAnd 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.

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1648

  • nilphilus

    sadly Rob plan to move to Angular, and give Durandal to community (which might be good)… ok. not that sadly, Angular 2.0 will combine best solutions from Angular 1 and Durandal :-)

  • Patryk Borowa

    Well, we have to wait until the merge is done but I think it may be good for both of them. At this point I am not missing any features in Durandal so if it stays like this with some minor contributions from time to time I am happy with that. And as for Angular let’s hope it will get simplified a bit, perhaps modularized so that we can pick and choose what we want in our solutions. Time will tell but I am excited either way ;-)

  • nilphilus

    there will be ‘modularized’, Rob mentioned it when announce he will work with guys from angular