Single Page Application (SPA) - Overview

For those of you haven't got chance to work on Single Page Application (SPA), I will be discussing few of my learning in series of post, including how to perform CRUD operation using both Breeze and Web Api.

What is Single Page Application (SPA)?
(From Asp.net Site) ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.

In my own words:

• SPA application doesn't requires page postback.
• SPA application works very well with web api and it can be used for good user experience (UX).
• SPA application doesn't mean that, their will be only single page in your application.  It will be multipage application which doesn't requires postback 
• From developers point of view, SPA is javascript way of doing MVC, when working with VS.Net and asp.net mvc.
• SPA technology is not new but with KnockoutJS and other javascript framework now making SPA application will be much more easier than few years back.

Example of SPA 

• GMAIL is best example of SPA.
• John Papa's CodeCamper Demo

Before you start any further reading, I would highly recommend to go over John Papa's introductory training video about SPA on Pluralsight.

VS.Net comes with default SPA template when you install VS.Net 2012.2 update.  However I will highly recommend using John papa's Hot Towel SPA template since it comes up with initial plumbing work for you so that you are get, set, go to develop SPA application.

Since John is stressing more on using breeze to make DB call, which "I believe" is not good, since it is very hard to implement "Repository Pattern" and I don't like javascript files spreading across multiple project is good.  Instead "I believe" the best way to go with SPA is make use of Hot towel SPA and take out breeze related stuff from project and hook up web api related plumbing.  Since Web api calls are not javascript dependent we can easily spread our code across multiple solution without including javascript file and can do whatever we like.  (Specially it is very easy to implement repository pattern in SPA using Web api rather than using Breeze.)

My views on Breeze Vs Web Api

• I personally find it is very easy and fast to develop SPA application using Breeze and it is easy to do client side caching of data.
• Web api is best way to work with SPA since you are not dependent on javascript plumbing to do DB call.
• If you are not sure about which route to go, I would recommend you to try implementing Repository Pattern with both Breeze and Web Api and it will make your decision simple.

In my whole series I will be making use of Hot Towel SPA Template to create all application.

Hot Towel SPA Template is combination of 

ASP.NET MVC 

ASP.NET Web API  

Breeze.js - rich data management   

ASP.NET Web Optimization - bundling and minification 

Durandal.js - navigation and view composition 

Knockout.js - data bindings 

Require.js - Modularity with AMD and optimization 

Toastr.js - pop-up messages 

Twitter Bootstrap - robust CSS styling

Teched Video Tutorial for SPA

• http://channel9.msdn.com/Events/TechEd/NorthAmerica/2013/DEV-B350#fbid=O761U3B4crC
•  http://channel9.msdn.com/Events/TechEd/NorthAmerica/2013/DEV-B338#fbid=O761U3B4crC
• http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV361

Few dev tips while working on SPA

• Most of the time when you are working on SPA, if you run into problem.  Search appropriately to get quicker solution:  For example: If you are facing problem in data binding then search for "Knockout" rather than "Hot towel spa" or "SPA".  Similarly if you run into problem for navigation then search for "Durandal", If you are running into problem for CSS search for "Bootstrap" and so on.
• Have F12 (Developers tool open while working on SPA)
• If something is not displaying on screen as expected, check "Console Log" for browser - Shortcut - Cntrl + Shift + J
• Always "Disable cache" 
• In chrome go to settings at the right end corner and select Disable cache (while Dev Tools is open)
• Make use of "Internet Explorer (IE) while working with VS.Net" if you are facing trouble while debugging javascript file. Javascript debugging works very well when we are working with IE and VS.Net
• Master concept of Knockout.Js and Web Api.  On High level SPA is all about using Knockout.Js and Web api (Please note: I am assuming here that user will be using Hot Towel SPA template and using all combination as describe above)

In next post we will create our first SPA application using Hot towel spa template.