Tech Corner: It's time for the SPA

Tags: Tech corner, software development, Nova, Hot Towel, Single Page Applications

Welcome to the next Tech Corner installment.  As much as I'm a fan of a 'spa day' it turns out a different kind of SPA is also very interesting....Toby Crawford, Senior Developer at Nova shares his thoughts on his favourite TechEd conference session.

Blog by Nova Senior Developer, Toby Crawford

I was fortunate enough to visit New Orleans this year to attend TechEd.  If you are not aware of TechEd, it is Microsoft's annual developer conference.  A colleague and I attended many presentations, breakout sessions and labs during the course of the week.  One which particularly stood out was John Papa's presentation on 'Hot Towel'.  Hot Towel is not a new technology as such, rather a VSIX (Visual Studio Extension) offering a project template for ASP.NET MVC applications.  The template is aimed at projects which intend to be developed as SPAs or Single Page Applications.  A SPA is an approach to web design which offers content to the browser asynchronously and in-situ as opposed to round tripping to a server to have content prepared in response to a user's actions - think GMail or the new Hotmail/Outlook.  It works like this: a user navigates to your website and is delivered a shell of html, css and JavaScript.  As the user navigates around the site the JavaScript requests more content in the background from the webserver and injects the new content into the existing DOM of the original shell HTML.  This provides a UX more akin to tradition thick clients, like a WPF application for example.  The benefits are clear.  No page reloads, quicker navigation and less data transfer as HTML is largely generated on the client side.

The VSIX John Papa refers to as Hot Towel configures an MVC app with a number of scripts and folders already in place (In the interest of the one ASP.NET goal, I should point out that John Papa also created a Nuget package called Hot Towelette which is a cut down version which, I believe, can also be used in a Web Forms project).

The scripts Hot Towel pulls in include KnockoutJS, DurandalJS, RequireJS and Breeze. Each of these plays a part in the SPA ecosystem and makes the development experience very much like WPF with MVVM & Prism.  KnockoutJS (which appears to be being championed by Microsoft as their MVVM framework of choice and you can read more about in Jamie's Tech Corner Blog) is a JavaScript MVVM framework which allows data binding of JavaScript viewmodels to HTML.  Knockout is, in my opinion, excellent, and allows a reasonable sized SPA to be feasible. It works like this, you have a viewmodel in JavaScript and you can then bind it to a view in HTML using the data-bind attribute which is recognised by KnockoutJS.  For example:

The great thing about this is the name can be observable so changes are automatically proliferated to the view.  Think INotifyPropertyChanged in WPF.  

Next up is DurandalJS.  Durandal is an application framework built on top of KnockoutJS.  If you are familiar with WPF development, I suggest Prism as an analogy.  It provides the equivalent of Prism's region manager, navigation manager and event aggregator.  i.e. you can define regions within a shell:

Then use navigation to populate views and KnockoutJS viewmodels into those regions, for example:

and build achieve loosely coupled, message orientated architecture using the in memory message bus:

Breeze, I'm a little less keen on, but still see the benefits.  Breeze provides a client side wrapper around a server side Entity Framework DbContext.  It allows LINQ-style queries to be created on the client and passed to the server:

I’d say I'm a little less keen on this because it seems to muddy the service boundary somewhat and appears to tie a client of the service into Breeze rather than exposing a well-defined API for general consumption.  I personally prefer to expose a vanilla WebAPI interface, use JQuery to make requests and then process the JSON return data using the excellent LINQ.js

The tech stack works so well together, it's clear to see why they have been grouped under a project template like this.  Indeed, after using them, it's difficult to imagine creating web applications any other way.  In fact, I'd go further than that; the applications and UX that can be created using the SPA concepts and the technologies listed above feel so native on any device and form factor that its getting increasingly difficult to justify any native, thick client, application.  It certainly seems to me that HTML5 applications will dominate the market place in the future, and that the SPA approach is the most appropriate way to work with the technology.

Add a Comment