Single page applications

Single Page Applications, a term that gets more and more attention on the web, but which is already there for a couple of times now. A single page application is a web app, which is retrieved with a single page load at the beginning. The underlaying data is fetched during the use by requesting the data from an RESTful API. Using HTML, CSS and Javascript, the web application provides a fluid user experience, similar to a native application. There are already tons of examples out there. Google Docs, Gmail, Artsy, Square, Trello or Seat Geek.

Already with simple DOM – Manipulation library à la jQuery, one can create a web app. Having better code structure and the advantages of a MVC, MVP or MV-whatever approach, the use of a framework or library like Knockout, Backbone or Ember makes sense and simplifies the development in a team.

Some of these libraries use a declarative binding together with observability (see Example), others use String based Templating Engines (Handlebars.js). The builders of AngularJS, a team of Googlers, actually state that they think of their framework as a polyfill between what browsers can do now and what they will do natively in a few years. Apparently there is a chance that declarative binding and observability are going to be implemented natively in the browser at one point.

A short example using declarative binding in Knockout.js:

<p><code lang="js"><input data-bind="event: {keyup: changeName}" type="text" /></code></p>

<div data-bind="text: firstname" id="name-field">&nbsp;</div>

<p><code lang="js"><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script><br />
<script type="text/javascript">
  var viewModel = {</p>
<p>    firstname: ko.observable('Type in your name!'), // Observe firstname and set default value</p>
<p>      changeName: function(data, event) {
        var name = event.target.value; // get value from keyup event source
        var string = name+", we from Antistatique wish you a happy advent!"; // compose string
        this.firstname(string); // set string to firstname
      },
    };</p>
<p>    ko.applyBindings(viewModel); // apply model
</script></code></p>

firstname: ko.observable('Type in your name!'), // Observe firstname and set default value

changeName: function(data, event) { var name = event.target.value; // get value from keyup event source var string = name+", we from Antistatique wish you a happy advent!"; // compose string this.firstname(string); // set string to firstname }, };

ko.applyBindings(viewModel); // apply model

Building web applications means letting the time of old internet explorer versions behind us. Some of these frameworks only support IE8+ (Ember, AngularJS), others still support IE7. Progressive enhancement is something that does not work with web applications. You need client-side rendering and proper data models.

The frameworks and libraries provide out-of-the box support for RESTful APIs in that models can be mapped to RESTful endpoints. Once the specifications for the RESTful API is finished, the development of the server side and client side can start at the same time and be independent.

When should you use which framework? There is a great article on Smashing Magazine about this question. It takes you 30 Minutes to understand and create a first application with Knockout. Other frameworks like Backbone take you more time to fully understand the core concepts.

Which frameworks are your favourites? Which ones are you using in production?