• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Durandal - Finally a SPA Framework that Works!
 

Durandal - Finally a SPA Framework that Works!

on

  • 3,359 views

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

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.

Statistics

Views

Total Views
3,359
Views on SlideShare
3,291
Embed Views
68

Actions

Likes
1
Downloads
24
Comments
0

2 Embeds 68

http://provenstyle.com 53
http://localhost 15

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Durandal - Finally a SPA Framework that Works! Durandal - Finally a SPA Framework that Works! Presentation Transcript

    • ProvenStyle.com Michael . Dudley @ ImprovingEnterprises.com GitHub.com/ProvenStyle Thursday, August 1, 13
    • Durandal - Finally a SPA Framework that Works! Thursday, August 1, 13
    • DurandalJS.com Durandal What problems does it solve? Written by Rob Eisenberg Thursday, August 1, 13
    • 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
    • Durandal KnockoutJs Twitter Bootstrap jQuery RequireJs Sammy Thursday, August 1, 13
    • • 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
    • Demo FlashCards.ProvenStyle.com Thursday, August 1, 13
    • RequireJS Written by James Burke RequireJS.org Thursday, August 1, 13
    • 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
    • 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
    • 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
    • KnockoutJS KnockoutJs.com Written by Steve Sanderson Thursday, August 1, 13
    • html AMD AMD MVVM View View Model Model AMD AMD AMD AMD AMD AMD AMD Thursday, August 1, 13
    • 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
    • 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
    • ProvenStyle.com Michael . Dudley @ ImprovingEnterprises.com GitHub.com/ProvenStyle Thursday, August 1, 13