Tuesday, January 29, 2013

What are Single Page Applications (SPAs) Part 1: Explanation, Resource Round-up & Javascript Libraries

Introduction and Breakdown

Firstly let me start by saying that Single Page Applications are in their infancy. The technologies used to create then have been around for a while but with the advent of HTML and the coming of age of some core libraries they now seems to be going mainstream. By this I mean that your average developer should now have enough of the heavy lifting done that they can concentrate on business logic and plug-in syntax rather than build everything from the ground up!

Secondly a Single Page Application in this context can be thought of as:

 "A website that relies almost exclusively on Client Side technology to display and update user interface (UI) elements to provide a more fluid and context based User Experience (UX). Server side technologies tend to be used to query data (or create/update it) and returns data (usually JSON) NOT a rendered page."

Common Features of a SPA

With that sorted lets dig a bit deeper - the following list are common features used within SPAs:

  • Client based routing engine
  • Client based data-binding
  • HTML Templates 
  • Asynchronous Client-Server communication

Visual Studio & SPA

If you're lucky enough to be using Visual Studio 2012 you will be getting a starter template in a coming update details of this can be found on John Papa's blog here - I'm not going to even try and expand on this as it covers things from a Visual Studio stand point extremely well but rather I'd like to talk about SPA's and related technologies to fill in some background information which I've been scratching together over the past week or so. Incidentally John Papa's post will show you how to implement some of the technologies listed below using the SPA template - well worth a read to see how the technologies hang together even if you do not have or intend to use Visual Studio.

Technology & Frameworks

Javascript & AJAX Framework
We're going to need a good JavaScript framework for working with DOM elements & getting and receiving data. My preference (and the rest of the world it seems) is jQuery. if you've not used jQuery I strongly recommend learning it RIGHT NOW it will be your JavaScript crutch throughout this type of development.

jQuery Project Home
jQuery on NuGet
jQuery AJAX Documentation

Data Binding & Templating
When we make an AJAX request we're probably expecting our server to return data in JSON format. Once we have the data we need to BIND that data to some elements or a REUSABLE TEMPLATE. Microsoft package KnockoutJS for this purpose. In essence it allows you to declare (mark-up) your HTML using data- attributes on the HTML nodes. Knockout does this by implementing an MVVM pattern using observable objects.

What this means is that you have a JavaScript ViewModel that can be populated with JSON data returned from the server and bound to HTML to update the interface. Because knockout is bi-directional this whole process can also work in reverse and server updates can be issued from observed client-side events. This all sounds remarkably time consuming and complicated - the key thing to remember is that WHAT it is doing IS complicated but that complication is abstracted by using the library so that HOW you get it to do it is NOT complicated.

KnockoutJS Project Home
Knockout on NuGet
Learn KnockoutJS (Excellent interactive resource well worth using)
Knockout templates documentation

Client-side Request Routing
Whether you're from a Windows background or not the concept Server-side Routing has been around for a while (Common implementations include apache's mod_rewrite and the ASP.NET Routing engine).

Routing allows you to de-couple URL's from files on the webserver. In essence that means that you can navigate from a request to a resource on the server that is not necessarily located at that exact location BUT the server knows where it should go and ROUTEs it to the appropriate request handler.

So the request  http://somedomain.com/page/1/really-interesting-resource  could end up being routed by the server to a webpage or other resource that actually exists here http://somedomain.com/getPageData.aspx?id=1.

This helps us to make URL's human (and search engine) readable and can help with SEO rankings and making links more memorable.

Client-side routing takes this a stage further and uses the anchor mark # in the URL to "overload" the server-side route with client-side requests and navigation. Essentially this means you can make a request like http://somedomain.com/#/page/1 and have the client handle the request and make a server-side call for data and refresh the UI accordingly without a page refresh.

This creates create a better UI/UX in the long run as the web site appears to react very similarly to desktop applications and can update only the areas of the page that concern the request rather than redrawing the whole page.

SammyJS Project Home
Sammy on NuGet
Sammy documentation


I didn't intend this post to be quite as long as it has turned out to be, in short we've looked at the concept of Single Page Applications and the technologies that may be used to create one. In Part 2 I will be walking through some technologies and techniques that can be used to keep all these libraries under control, manage dependancies and helpers that make it easier to bring them all together. Some of these technologies include RequireJS, Microsoft TypeScript, the Durandal project (Nuget & GitHub)  and the Visual Studio Web Essentials plugin.

1 comment:

Luke Baughan said...
This comment has been removed by the author.