Create Single Page Applications with ASP.NET and Visual Studio 2012.2

The evolution of JavaScript, CSS, and HTML makes Single Page Applications (SPAs) much more powerful ways to build an application. Give the latest Visual Studio 2012 SPA templates a try. 

Every time you work with Gmail, you're using a Single Page Application (SPA), which offers a rich user experience within a single page. Navigation techniques and AJAX provide necessary functionality without a page reload. A recent Visual Studio update includes templates for building SPAs with ASP.NET.

The basics about SPAs

Before we dive into the ASP.NET offerings, let's take a quick tour of the key ingredients of a SPA, along with more examples that thoroughly embrace the concept.

While the SPA approach has been with us for a long time, it has only recently taken off due to the maturation of web standard technology threesome JavaScript, CSS, and HTML. All of these can be used to build full-featured user interfaces consisting of one web page -- navigate to different content within the page using one or more of the technologies.

You may be thinking that you know of all of this, but why would you ever build an application consisting of only one page? One of the main reasons is the rise of mobile platforms -- nobody likes to navigate multiple pages on their mobile device. Another benefit is performance (if designed correctly), as a rich user experience is provided while reducing the number of server round-trips. There will still be a lot of resources (CSS, images, JavaScript, etc.) to load, so a key is to load most everything (or what is immediately needed) up front to minimize wait time. Also, the SPA approach lends itself to creating silos within a Web application -- that is, creating different areas within a site as SPA.

While SPA is described as "single page," it doesn't mean there is only one page or content screen; you can utilize multiple data views within a page -- show/hide as needed, load data via AJAX, etc.

An excellent example of the SPA concept is FreeTheChicken.org, which uses scrolling to deliver multiple screens of content all contained within one page request. The Hungree site is another good example (although I cannot read it without a translator) -- I love the simple design.

SPA via ASP.NET

The SPA concept uses core web technologies and standards, so it is easily accomplished via ASP.NET. You can build everything from scratch, but ASP.NET and Web Tools 2012.2download provides SPA templates (and many more updates), so you don't have to reinvent the wheel when tackling a project. There are four templates available.

• ASP.NET SPA template: A basic SPA application with one view. It uses standard ASP.NET along with the Knockout JavaScript library. It is a good starting point for learning SPA.
• BreezeJS SPA template: This template extends the standard ASP.NET SPA template by using the Breeze open source JavaScript library, which provides an easy way to manage rich data.
• Durandal SPA template: This template utilizes Durandal, an open source JavaScript libraryfor building rich client applications. This template proves the basics for navigation-style SPA.
• Hot Towel SPA template: This is a more comprehensive template that provides the foundation for building an SPA with rich client features. It is styled using Bootstrap, and it uses a number of JavaScript libraries, including Breeze, Durandal, Knockout, andRequireJS.

These templates are easily accessed in Visual Studio 2012 (with ASP.NET and Web Tools 2012.2 installed). If you don't have the templates installed, you can still create a simple SPA by creating a new MVC 4 Web Application and choosing Single Page Application. However, the templates provide much more functionality. Each template has a Scripts folder that contains all of the necessary JavaScript files (your custom code goes in the app subdirectory). You'll notice the Scripts folder is full of files for frameworks like jQuery, Knockout, and Modernizr and the other libraries used (depending on the selected template).

The templates are an excellent SPA starting point. We'll take a closer look at some of these templates and their technologies in future articles.

Go for a test drive

One of the great (and often irritating) aspects of web development is its fluidity -- things are always changing. Years ago, table-based page layouts were seen as good solutions to layout problems, and now the SPA concept is big with developers building applications for multiple platforms. Who knows what the next new thing will be, but for now, we embrace the trend and use the available technologies.

SPAs allow you to create a dynamic user experience with a (hopefully) smaller number of server round-trips. Take the latest Visual Studio 2012 SPA templates for a test drive to gain a better understanding of how to build such applications using ASP.NET.