In this article we describe Step by Step How to
Build Single Page Applications (SPA) for mobile and tablets using MVC 4. We'll use Visual Studio 2012 templates and scaffolding in order to create a fully functional SPA web application in just 10 minutes. Later, you could adapt this SPA application to your necessities. The server side will be a Web API using REST , while the client side will be a SPA app . Our SPA web page will look like this:
From time now, everything has been moving undoubtedly from desktop applications to the Web World Apps. However, nowadays web applications are facing several problems like bad user experience due to web page re-rendering, poor performance because of page reloads and constant re-transmission of data on user interactions, and lack of offline support (meaning that no server connection implies no client alive).
Single-page applications (SPA), or single-page interfaces (SPI), are web applications built on a single one web page, with the intention of provide the user with a desktop application experience, replicating a desktop environment in the web browser. That means that all SPA code is rendered in a single web page load, and can be run on different devices like smartphones, tablets and of course desktops. SPAs are written in JavaScript , do not require page reloading, and use specialized frameworks like AngularJS, Knockout and more.
Some examples of SPAs are Google Maps, Gmail, iCloud, GitHub, Google Drive, Hotmail, and Soundcloud . The term "SPA" was first used by
Steve Yen in 2005, but the first known experiments on SPA Apps are the 2002 Stuart Morris self-contained website at
slashdotslash (works only on IE6) , and the US patent by Lucas Birdeau, Kevin Hakman, Michael Peachey and Evan Yeh , describing a single page application implementation.
SPA apps have therefore several important features like:
1) SPA apps respond like native applications : with minimal response time gained by moving data and processing from the server to the client, and moving business logic to the client : this way, only data validation and permanent storage are located on server side.
2) SPA's bandwidth is minimal : communication with the server Ajax's done , usually in very small JSON requests.
3)
SPA render like desktop applications : essentially without server round-trips to retrieve HTML.
4) SPAs are accessible applications : users can use SPAs from smartphones, tablets, laptops etc.
5) SPAs can keep working offline : a SPA can go offline if the server connection falls, and synchronize the local data with the server afterwards.
6) No need to download updates : all users need to do is to reload the browser to load the latest version.
7) Navigation between "different" pages is smooth : no page reloading is necessary, since new pages are generated on the fly, without calling the server.
8) SPAs are cross-platform: a SPA works on any operating system .
Asp.Net MVC4 comes with the Knockout.js framework, built upon the MVVM two-way data binding software pattern, which goal is to isolate the UI from the business logic, making the data flow between a ViewModel and Binder in the middle, to synchronize data between the changes made on the View and the Model layer. The ViewModel code replaces the Controller, and makes automatically that synchronization, without knowing neither which View is being exposed, nor where is the data coming from.
Schematically, MVVM can be put this way:
View: holds the user interface UI with declarative bindings
ViewModel: is a representation of the data, more a Model than a View, holds unsaved data, and handles the application/presentation logic : as for MSDN, the ViewModel
"decouples the View from the Model, and consolidates the business logic into the ViewModel and the Model where it can be tested"(MSDN)
The difference between presentation and business logic is, Business logic manages data, while presentation logic manages users behavior.
Model: data validation & business logic:
Build Single Page Applications (SPA) for mobile and tablets using MVC 4
First, open Visual Studio 2012 and create a new Asp.Net MVC 4 Web Application project :
Next, choose the "Single Page Application" option :
After creation, take a look at the new folders & files added to the project:
As you can see, several important files have been added: a CSS stylesheet , 2 Controllers, some .js script files, and most important, the Knockout.js framework.
As for the data Model, the files added are C# classes representing the entities that we'll be using:
The "ToDo" entity has only two properties , besides the ID index : "Title" and "IsDone" :
It also has a foreign key which represents the Many-To-One relationship between a "Todo" object and the "TodoList" to which the object belongs. That means, every Todo object can belong to one and only one TodoList, and every TodoList can have one or many Todo objects in it.
