Building Single Page Apps on the Microsoft Stack

Thank you everyone who came to my talk last night on Building Single Page Apps on the Microsoft Stack. I’ve attached the slides and code samples below.

Here’s a quick summary of the talk. I argued that Single Page Apps are better than traditional Server Side Apps because:

  1. Single Page Apps are Stateful – In a traditional server-side app, whenever you navigate to a new page, all of your previous state is lost. It is like rebooting your computer whenever you perform any action

  2. In a Single Page App, Your Presentation Layer is Not Miles Away – In a traditional server-side app, because everything happens on the server, your presentation layer is separated from the user by space and time. In a Single Page App, the presentation layer is in the browser and not the server (which is the right place for a presentation layer).

  3. A Single Page App Respects the Web – It is easier to take advantage of HTML5 and related standards when building a Single Page App.

Next, I recommended using the following four technologies when building a web application:

  1. Knockout – This is how you create your presentation layer.

  2. ASP.NET Web API – This is how you expose JSON data from your web server and perform server-side validation.

  3. HTML5 – This is how you implement client-side validation.

  4. Sammy – This is how you implement client-side routing and create a Single Page App with multiple virtual pages.

There are code samples in the download (look in the Samples folder) which demonstrate how all of these technologies work when building Single Page Apps.

Discussion

  1. Will T says:

    Have you taken a look at http://www.servicestack.net/? I’m currently evaluating both but seems to have a lot of advantages over the ASP.NET Web API.

  2. @Will – that is a super interesting slide deck 🙂 Thanks for sharing the link. The performance statistics and the comparison between the servicestack and the Web API are very cool.

  3. Ryan Keeter says:

    Check out Durandaljs (http://www.durandaljs.com); it is Caliburn.Micro but for Single Page Apps (it is made by the same creator of Caliburn — Rob Eisenberg). It uses Sammy/Knockout/$ to create compelling composable applications. Honestly, it makes SPA work MUCH easier.

  4. magellin says:

    How about backbone.js / jQuery instead of Knockout? Knockout seemed to me as more of a replacement for JQuery rather than supplementing it. Lots of developers with jQuery skills.

    • @magellin — I don’t think of Knockout as a replacement for jQuery — you still need jQuery as the foundation for everything (making Ajax calls, doing simple animations, DOM manipulation, event handling, and so on). But I think Backbone, Ember, Angular, SproutCore all address the same issues as Knockout of building rich single page apps.

      I am spending today getting familiar with Durandal — like what I see so far. I’d like to compare it with Angular, Ember, and Backbone — so many frameworks, so little time 🙂

      • magellin says:

        I here ya. 😀 Perhaps it’s just the examples I’ve seen that made Knockout seem like that. And it was the DOM manipulation I was referring to.