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.
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 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 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.
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!