Durandal - Finally a SPA Framework that Works!


Published on

I have tried several different ways to build single-page web applications over the last 3 years. I started with iUI. The concept was cool but I quickly ran into road blocks. I tried jQTouch and got a little farther but again ran into road blocks. jQueryMobile had just come out and I though finally jQuery will get it right, but I spent all of my time fighting the framework. Then Knockout was released and it made things a lot better, but there were still issues like url routing. I started using a library called SammyJS and that solved the routing issue. My app was better, but I still wasn’t happy with my view models. They were way too big. It seemed like everything was happening in the view model. When I was finally able to get my app working I started having trouble managing all of the JavaScript dependencies and getting them loaded in the right order! It was all just a big pain! Then along came Durandal.

Durandal has solved all these problems and many more that I didn’t even realize were going to be issues like JavaScript packaging and minification, and application messaging just to name a couple. Durandal accomplishes all of this and it is fun to use. In this talk we will dive into Durandal and the libraries that it sits on top of: jQuery, RequireJS, Knockout, and SammyJS. At the end of this session you will walk away with the tools you need to build an enterprise quality single-page web application.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Durandal - Finally a SPA Framework that Works!

  1. 1. ProvenStyle.com Michael . Dudley @ ImprovingEnterprises.com GitHub.com/ProvenStyle Thursday, August 1, 13
  2. 2. Durandal - Finally a SPA Framework that Works! Thursday, August 1, 13
  3. 3. DurandalJS.com Durandal What problems does it solve? Written by Rob Eisenberg Thursday, August 1, 13
  4. 4. 1. SPA applications are complex! 2. Good architecture with javaScript is hard! 3. There are so many javaScript frameworks! Single Page Applications Thursday, August 1, 13
  5. 5. Durandal KnockoutJs Twitter Bootstrap jQuery RequireJs Sammy Thursday, August 1, 13
  6. 6. • Clean MV* architecture • Modular code • Simple App Lifecycle • Application wide eventing • Modals and Message Boxes • Bundling and Minification Durandal’s Features Demo Thursday, August 1, 13
  7. 7. Demo FlashCards.ProvenStyle.com Thursday, August 1, 13
  8. 8. RequireJS Written by James Burke RequireJS.org Thursday, August 1, 13
  9. 9. Its a JavaScript module loader. Orders the loading of the JavaScript on the page Encourages good JavaScript Architecture Single Responsibility Principle Dependency Injection Keeps your JavaScript out of the global namespace Thursday, August 1, 13
  10. 10. define(['services/config'], function(config){ var log = function(message){ if(config.enableLogging){ console.log(message); } }; return{ log:log }; }); AMD Pattern Asynchronous Module Definition Thursday, August 1, 13
  11. 11. Demo Its kinda like having a but it is JavaScript! <script src="scripts/require.js" data-main="app/main"></script> static void Main() Referencing RequireJS on you web page Thursday, August 1, 13
  12. 12. KnockoutJS KnockoutJs.com Written by Steve Sanderson Thursday, August 1, 13
  13. 13. html AMD AMD MVVM View View Model Model AMD AMD AMD AMD AMD AMD AMD Thursday, August 1, 13
  14. 14. Bindings <span data-bind="text: firstName"> <!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko --> foreach click visibility text enable css options attr value checked event Thursday, August 1, 13
  15. 15. Observables var first = ko.observable('Richard'); var last = ko.observable('Castle'); var fullName = ko.computed(function() { return first() + " " + last(); }, this); Demo Thursday, August 1, 13
  16. 16. ProvenStyle.com Michael . Dudley @ ImprovingEnterprises.com GitHub.com/ProvenStyle Thursday, August 1, 13