What is Single Page Application?
The reference for this post is http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159 from Steve Sanderson’s Techdays talk,
You can develop Single Page Applications using ASP.NET MVC\Web Forms technologies.
1. Great user experience – It means speed, when it comes to changing of display of user interface and navigate around, we want an instance response from the application which you can get from this architecture.
2. Run on any device
3. Working off-line – It is an interesting benefit which is just becoming possible now.
4. App-store deployable – It is bit advanced programming but you can deploy your applications to windows market place or Apple app-store etc. This is now possible with Phone-gap third party tool for developing apps for mobiles.
The Architecture diagram looks as below
What is different in Single Page Applications?
With single page web applications, you also tend to have an data end points on server and it is going to return JSON\XML to your application, You can use this data on client data access layer and render that data to UI.
We also want to have fast UI navigation, to done that we have Navigation API which allows you to book marking, navigate forth and back without talking to the server.
We can also make available all right hand side in the diagram offline. You can use local storage apis in HTML5 to work with the data offline.
Using the new Single Page Application project template and scaffolder
Create a new ASP.NET MVC application in Visual Studio, You can install MVC4 beta from here
It will prompt you to select the project template there you can select Single Page Application project template as shown below
To build a sample Single Page application using scaffolding, Add a controller to your solution
Choose the Single Page application template in controller dialogue box
Now run the application then you should be able to see the below output
What is different from other scaffolding applications is it follows single page application architecture and when you hit the browser back and forward it would not talk to the server. It also follows the all principles that we discussed on top.
In my next post I am going to discuss about each component in detail and how you can replace them with your own and replacing the scaffolding as well.
Each component as shown in the diagram having a specific technology which I can write in next post.