Understanding Flow of control for Hot Towel SPA Template

Like any other application HTS is not following default route of having Global.asax as starting point.  "I believe" this is not good and there are few other things which "I believe" you won't do it for your production code which we will be going to customize in upcoming blog post.

Flow of process for Hot Towel SPA template

• App_Start/BreezeWebApiConfig.cs/RegisterBreezePreStart()
• App_Start/HotTowelRouteConfig.cs/RegisterHotTowelPreStart()
• Root/Global.asax/Application_Start()
• App_Start/FilterConfig.cs/RegisterGlobalFilters()
• App_Start/RouteConfig.cs/RegisterRoutes()
• App_Start/HotTowelConfig.cs/PreStart()
• Controllers/HotTowelController.cs/Index()
• Views/HotTowel/Index.cshtml
• App/Main.js/boot()
• App/Shell.js/boot()
• App/Home.js/activate()

Understanding of above process will be very helpful in customizing Hot Towel SPA template to suits your needs.

Situation where above process flow is very helpful

• Customizing Application specific settings
• Remove breeze and adding support for web api
• Adding any more JS support.

In next post we will understand how to customize hot towel spa to suits your custom needs.

First Single Page App (SPA) using Hot Towel SPA Template

In this post, I will be creating our first SPA application using Hot towel SPA template.

If you haven't installed VS.Net 2012.2 Update, then please do it now before reading further.

Step 1: Open VS.Net and start creating asp.net mvc application

Step 2: There are 2 default template available for creating SPA application, choose "Hot Towel SPA" template

Step 3: Ones your solution is ready, you will notice all SPA related files in App folder.  You will also notice that Hot Towel SPA (HTS) has taken care of initial plumbing of installing durandal.js, require.js, bootstrap, breeze, etc.

App Folder Stucture

• Views Folder - Contains HTML files, it will have plain html code which is used for presentation.
• ViewModels Folder - Contains Javascript files, it will have logic regarding how you are going to access model, jquery web api calls and databind related logic (Knockout)
• Services Folder - Can be used for storing global SPA code which can be shared among all SPA pages.

Special SPA Files

• Main.js File - It will contain logic for applying SPA application related settings and starting SPA application.
• Shell.js File - It will contain navigation related logic

SPA Convention

• In order to create new page in HTS, you will have to create html file in view and javascript file with same name in viewmodel.
• Example: details.html and details.js files 
• You can then write navigation logic in shell.js file.

Now lets run the application to view how it looks :)

In next post we will understand, how to perform basic customization to default HTS template.

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.