The Holy Grail of web development aims to reduce and eliminate the shortcomings of website and web applications to make them comparable to native applications. Today, we're beginning to see browsers that are endowed with more capabilities that are comparable to native applications. This change has resulted in part of faster and more plentiful bandwidth that has reduced network latency problems, in addition to the advent of technologies such as HTML5. In addition, web services and standardized data formats such as XML and JSON provide rich communications between the client and server. The gap between web and native applications is steadily closing. For more on ASP.NET, see "HTML5 for the ASP.NET Developer" and "How to Use ASP.NET MVC 4 Display Modes in Mobile Web Apps."
But there remains one niggling problem with web applications. Although browsers can now smooth and speed up page transitions, changes, refreshes, and reloads very well, these transitions are a constant reminder to users that they are using a web application rather than a native application that's specifically built for a device. As a result, single-page applications (SPAs) are becoming more common and several development platforms are starting to provide toolsets and resources to build them.
As with many "new" web technologies, SPAs aren't really new and are built on mature, tried and true technologies. You've had the tools available for awhile now to build SPAs as long as you weren't afraid to get your hands dirty with client-side code to build server infrastructure that supports partial page and data update requests. However, SPA's growing notoriety and recognition of its usefulness has resulted in more development tool support.
Improved support is coming soon to Microsoft's ASP.NET MVC web development framework as a part of the upcoming ASP.NET and Web Tools 2012.2 update. Currently available as a Release Candidate (RC), this is the next release in the continuous flow of out-of-band updates that Microsoft has committed to providing for Visual Studio development tools. After you install the update, you will have a new SPA project template that's available once you create a new ASP.NET MVC 4 project, which is shown in Figure 1 below.
The resulting project shows one way to build a SPA in ASP.NET MVC 4 that's complete with Knockout data binding support, ViewModels and DataContexts, and Entity Framework models and data transfer objects (DTOs) on the server using a Web API. Figure 2 shows that the sample application is a basic Todo list manager. The project also includes a view that's the heart of the single page in the application.
Again, the Todo sample application demonstrates one way to create a SPA. You can also mix and match other technologies and tools that you want to use. You'll need to go beyond this example if you want things such as multiple views, navigation, more robust data update and syncing support, and other features that make for a more robust and comprehensive application. The SPA template is a worthy starting point for your first few SPA applications until you get the feel of things. Once you've have a handle on things, then you can create an empty ASP.NET MVC project and go wild by using whatever tools and technologies you desire.
A SPA is probably not appropriate for every web application, but you can certainly mix and match SPAs with other web pages to make a complete site or application. You could also use a SPA for a portion of an application that requires heavy user interaction in a single functional area in which the entire site consists of multiple SPAs and more conventional web pages. Therein is one of the truly beautiful things about the state of web development today. You can bring together content and code to accomplish nearly anything by using established standard technologies that's supported in most browsers. SPAs are just one more useful tool in your development arsenal!