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