Creating a Single Page Application (SPA)
Visual Studio supports development of an application that leverages HTML5 and rich client-side JavaScript known as a SPA. Like MVC, a SPA allows you to write web applications using the open standards of HTML, CSS, and JavaScript. However, the key tenant of a SPA application is that it leverages the ubiquity of JavaScript to build highly interactive, desktop-like applications that run in browsers on any device type and operating system. JavaScript is what makes it work. A SPA loads a single page and then uses JavaScript to talk to the server and update portions of the page. Your site is not bound to a single page, however. It is just that a lot happens in a single before you might transition to another page (and set of features).
Writing all that JavaScript is a huge task. Thankfully, SPA applications are built using common JavaScript frameworks that make development easier and more consistent. These frameworks help with styling and page-to-server asynchronous communication.
The Visual Studio default SPA template includes support for MVC and Web API. The MVC support allows you to write your web page views and server-side code using a familiar model. Web API is about building services that can support the asynchronous JavaScript to server communication from the client. Figure 1.11 shows creating a new project using the SPA template and the core references for MVC and Web API.
The default SPA template in Visual Studio is configured by default to support a few JavaScript frameworks. These include Bootstrap, Knockout, and jQuery. Together, these frameworks allow developers to create a SPA application using ASP.NET standards (MVC and Web API) and established JavaScript frameworks. These frameworks are described as follows:
Bootstrap—Bootstrap (also called Twitter Bootstrap) is used for building responsive, mobile-first web applications using HTML, CSS, and JavaScript. This enables your web application to render correctly on various device sizes like phones, tablets, and desktops without a ton of extra work.
Knockout—Knockout (also called knockout.js) is used to bind data from your model to your DOM elements (views) and get an automatic refresh from client to server. It leverages the Model-View-View Model (MVVM) design pattern to make development a familiar experience.
jQuery—The jQuery library is the basis for handling JavaScript and client HTML manipulation. It allows developers to create events, do server-side communication, and animate the user interface.
Note
Visual Studio supports SPA templates that go far beyond the default template. This includes support for building with the even more popular SPA frameworks of Ember.js and AngularJS. In fact, there are community-created and supported SPA templates available for download. These templates simplify using these JavaScript frameworks and combination of frameworks. Of course, you can always skip the template and start with an empty project. In that case, you could use NuGet to add components as you need them.