Tuesday, 28 January 2014

A lap around the "single page web app"...

What's this about then?

2014 will perhaps be the year of the "internet of things" - and the WWW will surely play a big part in that.
Front-end in WWW (HTML5 in particular) is rapidly becoming the vast majority for UI development - consider the fact that even many (most?) successful smartphone apps are running in HTML5 containers like phonegap: http://phonegap.com/ 
Having an understanding of the way the web works and what the state of the art is on the web today could save us (as in - software developers working with the WWW and their customers) a lot of time and money.
So I have written this post to help myself better understand. Perhaps you may also find it useful, dear reader!
Please just note that this post (or more accurately, links listed within) occasionally swings wildly from relatively simple to deeply technical...

The single page web app

According to @peterwayner, the JavaScript MV* framework and the single page web app are both now hot:
But web sites/applications used to have lots of HTML files, site maps, etc. So what what's happened? How does one write a web application on a single HTML page?
Basically it seems this trend is supported by HTML5, but has largely been enabled by the rise of the JavaScript async framework.
The evolution has more-or-less been like this:
[Bernard's Interpretation of the Evolution of the "Dynamic" Web Application]

In reference to the "XMLHttpRequest + JavaScript = RYO AJAX script" - if you interested in seeing some source code that does this, take a look at a previous post I made on this subject:

The JavaScript MVC

So let's take a closer look at JavaScript MVC. Basically these are frameworks that enable us to treat a web server and an appropriately designed suite of web services on that server, as an application back-end.
The following section of the (freely available) book "Backbone.js Applications" provides a more detailed overview:
These WWW client-side MVC frameworks have really taken off in popularity over the past couple of years - they are generally based on the likes of jQuery and provide beautiful functionality for UI and back-end integration development purposes.
The following article (I was referred to this compliments of @josh_robb) is what inspired me to write this post and provides an extremely interesting (IMHO!) overview of why JavaScript MVC frameworks like backbone.js' days may be numbered...
Perhaps this is the article to read if you are considering using a JavaScript MVC framework in a project currently: 

Some references

Get Backbone.js: http://backbonejs.org/
Get Knockout.js: http://knockoutjs.com/
Take a look at "Om": https://github.com/swannodette/om


Finally another interesting addition to the mix is node.js; this is not really a web development framework, but in-fact this is JavaScript turned into a server-side language. Indeed, a node.js program can initialize it's own self-hosting web server - i.e. a "node". 
Get node.js: http://nodejs.org/

The enabling substrate

And what does all of this jumble of stuff depend on for it's very existence? It is of course HTTP; currently in version 1.1, or 1.0, depending on which browser you are running. This year though, we will see HTTP 2.0 start to make inroads.
This event is a bit of a big deal and carries with it the potential to turn "conventional" web development on it's head...again. Take a look at this video for an overview:

["Making HTTP realtime with HTTP 2.0" - Source: Realtime Conf 2013]
This video referred to me via @petegoo. Here's the Wikipedia page for HTTP 2.0 also, for reference: 


Diagnostic tooling

What would an enthusiast of any genre - including web applications (or "internet of things") development - be without their tools? Probably not an enthusiast...
There are a range of diagnostic tools - that is, tools for analysing the performance/behaviour of your app, as opposed to developing it - available supporting web development. Tooling ranges from on-board (actually within the browser) to IDE integrated, to server-side diagnostics, to bits-and-bytes-over-the-wire-level. 

So here is a non-exhaustive list for your reading pleasure:

On-board: Chrome

Follow these links and update your instance of Chrome to the latest version to take a look at some of the newer tools available for this browser, including the fantastic "flame chart" for JavaScript performance analysis:

On-board: Firefox

Browser-independent: Fiddler

Bits-and-bytes: Wireshark


In summary - have fun!

No comments:

Post a Comment