Tuesday, January 29, 2013
Posted by Luke Baughan at 2:04 pm
Introduction and BreakdownFirstly 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 SPAWith 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 & SPAIf 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.
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.
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