Like This Blog 1

Added by Dan Wahlin April 26, 2013

One of the more popular acronyms being thrown around now days in the Web world is SPA which stands for Single Page Application. The acronym is a bit misleading since it infers that an application is built with only a single page. At first glance the concept sounds fairly useless since there aren’t many applications out there that only have a single page after all!

In reality, SPA means that an application has a single shell page that loads initially in the browser and that subsequent pages are loaded dynamically without leaving the initial shell page. As a result, the browser isn’t loading completely new pages but is instead replacing parts of the initial shell page as users interact with the application. This is accomplished using a combination of technologies such as Ajax, local storage, the history API, asynchronous module definition (AMD) and others and when done right leads to a reduction of bytes transferred between a client and server, a minimized number of HTTP calls and an overall better user experience that feels more fluid and responsive. SPA applications tend to feel more like traditional desktop applications since data can be accessed quickly without waiting for the browser to reload the entire page.

While the concept of SPA is great on the surface, building SPAs from scratch can be challenging and often result in an army of JavaScript files being used such as jQuery, Knockout, Q.js, Underscore.js, Sammy.js, Handlebars, Require.js and others. Building a SPA from scratch can certainly be done but having managed several development teams over the years I personally worry about the long-term maintenance issues that may crop up as script versions change and dependencies between scripts break. After all, JavaScript isn’t a compiled language so it’s not quite as simple to figure out when a new version of a script breaks an API or causes problems with other scripts (that’s where unit tests can play a big role).

So what do you do then if you want to build a SPA application? You can certainly build a SPA from scratch although I wouldn’t recommend it unless you consider yourself an expert in JavaScript and client-side technologies. If the application is being built and maintained by a team of developers then I’m even less compelled to recommend building a SPA from scratch given the different levels of technical knowledge typically found on a team and the struggles this can lead to down the road as an application is modified.  If you do decide to travel down the custom SPA road make sure you’re aware of the long-term implications of having a plethora of scripts in the application. If you want a more structured approach for building SPA applications then I highly recommend looking at some of the SPA frameworks that are available.

Here’s a quick look at some of the different SPA frameworks that I’ve been exploring recently and find compelling. Keep in mind that this is still a relatively new space and that new frameworks/libraries are coming out on a fairly frequent basis. Take the time to research the latest trends in this area.

AngularJS

AngularJS is becoming more and more popular when it comes to building SPA applications. The learning curve can be a little steep for some but once the concepts become familiar it provides an enormous amount of built-in functionality such as routing, controllers, views, navigation, dependency injection, event management, data binding, history management, and much more. AngularJS is an MVC type of framework that allows you to build views and bind them to controllers which makes it easy to maintain the application down the road. Because it has so many features built-in out of the box you don’t have to rely on the army of scripts I mentioned earlier which can simplify maintenance long-term. I’m currently working on an AngularJS application and like the power and flexibility that the framework offers for building SPAs.

Durandal

Durandal is an MVVM type of framework that also provides a rich set of features and a lot of flexibility for building SPA applications. It relies on a few core scripts such as jQuery, Knockout and Require.js for some of its features and provides navigation and screen management, modularity, history management, data binding, eventing, app bundling/optimization and a simple app lifecycle that makes it easy to get started with. By using Durandal you can significantly minimize the amount of code you have to write to build a SPA application because it handles the majority of SPA technologies for you.

Meteor 

Meteor provides a unique approach to building SPA applications and Web applications in general. It provides a framework that allows JavaScript code to be written on both the client and server. With this approach, data changes in the database or on the server are automatically pushed down to the client and bound into views without having to write polling or other Ajax-style code. It uses a mustache/handlerbars type of data binding approach (you’ll also find this in other frameworks) which is quite common when binding data to client-side templates. One of the key principles touted by Meteor is “data on the wire” meaning that only data is sent back and forth after the initial HTML content has been loaded. This allows the client to determine how to render the data and results in fluid and reactive applications in the browser and on mobile.

Conclusion

Additional libraries such as Backbone.js, Ember.js, Sammy.js (to name a few – I can’t list all of them here so sorry if your favorite isn’t mentioned) can be used to help build SPA applications as well. If you’re going to build a Single Page Application (SPA) then I highly recommend spending the necessary time to research the options out there and find a framework or library that fits well with your application’s requirements. As with any technology, there’s not one framework that fits every scenario so research is key.

We’re considering building a SPA course that’ll be offered at Interface Technical Training through our classroom and Remote Live offerings. If that’s of interest to you or your company let us know!

Enjoy!
Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training