ASP.NET SPA Templates Released
Today the ASP.NET team released the RTM version of the ASP.NET and Web Frameworks 2012.2. This includes updates for ASP.NET MVC, ASP.NET Web API, ASP.NET Web Pages, Web Optimization, SignalR, and the ASP.NET SPA Template. The official announcement is on Scott Guthrie’s blog.
I’ll focus this post on the new SPA templates that accompany this release.
Comparing the Templates
I created a quick comparison chart of what’s inside each template. All of them have value depending on where your interests lay.
| ASP.NET SPA | Breeze | Ember | Durandal | Hot Towel | |
| Includes ToDo Sample | Yes | Yes | Yes | ||
| Includes Bare Template | Yes | Yes | |||
| Navigation and History | Yes | Yes | Yes | ||
| Uses Ember | Yes | ||||
| Uses Knockout | Yes | Yes | Yes | Yes | |
| Uses Breeze | Yes | Yes | |||
| Uses Durandal | Yes | Yes | |||
| Toastr, Moment, Twitter Bootstrap | Yes |
I'll also be discussing the various templates in my upcoming (March 2013) Pluralsight course titled "SPA Jump Start". This course is perfect for developers who want to know how to get started with SPA as I walk through creating a SPA from scratch to completion. This is a beginner level course that focuses on staying productive by leaning on some great libraries while my intermediate level SPA course shows how to create many of the features by hand.
ASP.NET SPA Template
The intent of this template is to provide a starting place and sample for building a basic SPA with 1 view. If you want to move on from here to provide other features such as multiple views and sharing of data across those views, you can do that by pulling in other libraries like Sammy.js or Breeze.js (or choose your own favorites). Once you understand the SPA fundamentals, you can move on to build your own SPA using this as a starter model or see Hot Towel for a jump-start.
I previously described the ASP.NET SPA template in my post Inside the ASP.NET SPA Template here. Only a few things have changed since then in this template since its RC in December 2012. They added camelCasing of the JavaScript variables, which are converted from PascalCase from the server. This is nice since that is a common convention.
You will also find one of the helpers for the new Knockout binding features in Visual Studio, too. Look in the todo.viewmodel.js and you will find a special comment (shown below) that helps when you are trying to get intellisense inside a foreach binding on the todoLists member.
window.todoApp.todoListViewModel = (function (ko, datacontext) {
///
var todoLists = ko.observableArray(),
This provides intellisense when inside a foreach binding.
Hot Towel SPA Template
Hot Towel: Because you don't want to go to the SPA without one!
Download the VSIX for the Hot Towel SPA template here
The Hot Towel SPA template is different from the other templates and makes use of a lot more JavaScript libraries, including Breeze, Durandal, Knockout, RequireJS and Twitter Bootstrap. It provides a more complete application from which you can build your own. There are more concepts to be aware of, but once you understand the nature of rich client and Single Page Applications, this template might just be what you are looking for. If you want to build a SPA but can’t decide where to start, use Hot Towel and in seconds you’ll have a SPA and all the tools you need to build on it! You can learn more about Hot Towel here.
BreezeJS SPA Template
Breeze is an open source library for managing rich data in a JavaScript client. It handles querying, caching, change tracking, validation and more. The BreezeJS SPA template extends the ASP.NET SPA template with Breeze, showing how easily you can build a Single Page Application with BreezeJS for data and KnockoutJS for binding. Breeze is also featured in the Hot Towel SPA template.
Download the VSIX for the Breeze SPA template here
Durandal SPA Template
Durandal is a new open source JavaScript library for rich client application development. It focuses on providing an enjoyable and productive developer experience centered around simple conventions and standard patterns like MVC, MVP and MVVM. The Durandal template provides a bare-bones starting point for a typical navigation-style application architecture, ready for your own content and features. Durandal is also featured in the Hot Towel SPA template.
Download the VSIX for the Durandal SPA template here
EmberJS SPA Template
If you prefer using the Ember JavaScript library, then try the new EmberJS SPA template. Ember is a powerful MVC JavaScript library that solves a wide array of challenges for building rich client applications. The Ember template is an implementation of the same Knockout SPA template shipped with ASP.NET and Web Tools 2012.2, but uses EmberJS and Handlebars templating.