Single-page Applications: Building Modern, responsive Web applications with asp.net

A single-page application (SPA) is a WEB application that loads a single HTML page and dynamically updates the page when the user interacts with the application.

SPA uses AJAX and HTML5 to create fluent and responsive Web applications that do not frequently page overload. However, this means that a lot of work is done in the client's JavaScript. Traditional asp.net developers may struggle to adapt to this upheaval. Fortunately, many open source JavaScript frameworks can be used to simplify the task of creating a SPA.

In this article, I'll show you how to create a simple SPA application. In this process, I'll cover some of the basic concepts of building SPA, including model-view-controller (MVC) and model-view-view model (MVVM) mode, data binding, and routing.

About the sample application

The sample application I created is a simple movie database, as shown in Figure 1 . The leftmost column of the page displays a list of movie types. Click a type to display a list of movies of that type. Click the Edit button next to an entry to change the entry. After editing, you can click Save to submit the update to the server, or click Cancel to undo the change.

Figure 1. Single-page application Movie Database application

I created two different versions of the application, one version uses the Knockout.js library, and the other uses the Ember.js library. The two libraries have different methods, so it is instructive to compare them. In both cases, the client application has fewer than 150 JavaScript rows. On the server side, I use the asp.net Web API to provide JSON to the client. You can find the source code for both versions of the application on Github.com/mikewasson/moviesspa.

(Note: I use the candidate release [RC] version of Visual Studio 2013 to create an application.) Some content may differ from the delivery vendor [RTM] version, but it should not affect the code. ）

Background

In a traditional WEB application, the server renders a new HTML page each time the application calls the server. This will trigger the page refresh in the browser. If you've ever written a Web forms application or a PHP application, the page lifecycle should seem familiar to you.

At SPA, after the first page is loaded, all interactions with the server are made through AJAX calls. These AJAX calls typically return data in JSON format (rather than markup). The application uses JSON data to dynamically update the page without overloading the page. Figure 2 illustrates the difference between the two methods.

Figure 2 Traditional page life cycle and SPA lifecycle