ASP.NET SPA Templates Released | John Papa

John Papa

Evangelist on the loose

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.

2-17-2013 11-49-15 PM

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) {
    /// <field name="todoLists" value="[new datacontext.todoList()]"></field>
    var todoLists = ko.observableArray(),

This provides intellisense when inside a foreach binding.

2-18-2013 12-09-28 AM

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.

Download the VSIX for the Ember SPA template here

tags: asp.net breeze durandal ember hottowel javascript SPA visual studio 2012
  • http://timfalkins.blogspot.com Tim

    John – are there occasions where you’d still consider the traditional ASP.NET MVC, non-SPA variety app over a SPA?

    Regarding your SPA Jump Start PS course: the sooner the better!

    • John

      Tim, sure. Some of it is preference. But mvc still rocks.

  • Pingback: ASP.NET SPA Templates Released | WebDevStuff | Scoop.it

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1298

  • http://asifmushta.com Asif Mushtaq

    Its great to see so many templates for ASP.net MVC SPA, but I am wondering that why backbone .js is missing in the list of javascript frameworks used.

    Is Backback.js is not good engount to make a SPA?

    • John

      asif – th vsix are created by community. I am confident someone will crest one with backbone.

      • http://asifmushtaq.com Asif Mushtaq

        Thanks John Papa.

        My question was intented to get some of your expert opinion about backbock. As i recently explore the framework and liked it very much becuase of its lightness.

        Please share your opinion regrading using Backbone.js for SPA?

  • http://www.rixsoft.co.uk Rik

    Looking forward to reviewing these. I have a huge existing asp.net forms application that I am recreating in MVC which is huge. How would you suggest splitting this up into several SPAs i.e. structure/libraries? At the moment I have a dataAccess and model script for every page (similar to the ToDo app) and I’m wondering if I could have done it better.

    • John

      Rik – That’s a bit more than I can handle in a comment :) I have a course coming out soon that will explain more on how to get started. Or you can start with my intermediate level course on SPA’s which is at Pluralsight at http://jpapa.me/spaps

      • http://www.rixsoft.co.uk Rik

        Sorry was a bit of a detailed question for a comment. Thanks, will the new course include going through HotTowel? Just been looking through it and might be the answer I was looking for anyway it’s great!

        • John

          Rik – The new course will show the templates and HotTowel. But then i will demonstrate each piece of HotTowel separately and build it up slowly with you. Think of it as me sitting with you and building he app together :)

  • http://www.unit4.com Rolf de Vries

    Dear co-developers,

    Is there any framework (out of the box) thats support customer CSS-Themes and resource text files?

    We have multiple customers and some of them would like to pay for their inhouse design, others need support multiple cultures…
    How can we do this with SPA? Is it mature enough? Are there third party frameworks? Or any other thoughs…
    Will there be a template to get an example application to demonstrate this?

    Greatings from the Netherlands!

    Rolf de Vries

  • Pingback: ASP.NET SPA Templates Released | Web Dev 2.0 | Scoop.it

  • Ash

    Going through your Pluralsight SPA with HTML5, Web API, Knockout and jQuery course, great course. I’m wondering what software you use to create the architecture/block diagrams? Is that Visio?

    Thanks.

  • Randhir

    When used breeze.js file then all the logic in client side so in this case user can see all the js files on browser .I think user can break the logic and may be security issue..am right ot wrong?

  • http://www.breezejs.com Ward Bell

    Randhir – Your question about security is very important. The developer must take responsibility for the data and logic that appear on the client. But the developer is also responsible for delivering an effective, responsive user experience. Fortunately, a SPA can be both effective and secure.

    JavaScript itself does not make an application more or less secure. It’s what you put in the JavaScript that matters.

    The rule is simple: don’t put secrets or sensitive logic in your JavaScript.

    BreezeJS does nothing to compromise this rule. It describes the data that you have decided to present to the user: their data properties, their data types, their relationships to other data, and simple validation rules (e.g., required and max length). Where is the risk in that?

    Breeze makes it easy for you to query and save those data. Easy is good. Doing it the hard way, perhaps with raw AJAX, doesn’t make it more secure. It just makes it harder.

    Suppose you have a type “Foo” with a “companySecret” property. The risk isn’t knowing that “companySecret” is a required string with a max length of 30 characters. The risk is that you send the company secret itself.

    Is the data too sensitive? Don’t let your server send it! Is the user not authorized to see it? Don’t let your server send it! Does your app perform some secret, proprietary business processing? Do that on the server, not in your client-side JavaScript. The situation calls for prudence on YOUR part.

    Breeze … and Knockout and Sammy and Durandal … the key components of HotTowel … are infrastructure libraries to help you build the best user experience possible. They are tools. Use them wisely.

  • Pingback: SPA JumpStart – Beginning SPA – Part 1 | John Papa

  • Pingback: SPA Questions | John Papa

  • Pingback: Michael Niethammer | Microsoft veröffentlicht Breeze-Templates zusammen mit ASP.NET 2012.2 RTM für Visual-Studio

  • Pingback: Template SPA per Visual Studio | Moretto Carlo

  • Pingback: SPA JumpStart – Beginning SPA – Part 1 | the pluralsight blog

%d bloggers like this: