Skip to main content

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


Notable

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: 

http://en.wikipedia.org/wiki/HTTP_2.0

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

Summary

In summary - have fun!



Comments

Popular posts from this blog

HOW-TO: Apply a “baseless merge” in Team Foundation Server 2010 (and 2012)

Another purely technical post on TFS...
The scenario We wish to migrate code between branches that do not have a branch/merge relationship, in order to expedite urgent changes being made by a project team, without disrupting on-going BAU development work. Sample branch hierachy/strategy Imagine the following branching strategy in TFS (visible by connecting to TFS via Visual Studio 2010 or 2012):

Essentially you have a "DEV" branch, which has a "QA" branch, which in turn has a "PROD" branch. DEV is the branch that you would be using for BAU development. As a piece of development matures, you move it into QA, where it is tested by your internal QA team. There may be further changes made in DEV that are moved into the QA branch as the QA team pick up issues. Once the QA team are happy with a packaged of changes, they will move them into PROD, which is essentially the hand-over to the customer. The PROD branch represents the software that the customer has.

Mo…

HOW-TO: Add/edit a field in Team Foundation Server 2012 using Visual Studio 2012

It's been a while since I made a purely technical post...

So, today I wanted to make a change to a Microsoft Team Foundation Server 2012 (TFS2012) instance that I am working with to reflect "Actual" time spent on a task - mainly for reporting purposes, and because I have found in the past that making this minor process adjustment yields a relatively useful metric over the long-term.

I am using the Microsoft Scrum 2.1 Process Template (http://msdn.microsoft.com/en-us/library/vstudio/ff731587.aspx) for a project that I am working with. So that I don't forget how to do this (again!) I will blog-post the procedure I've used to add this field to the template as a screen-shot-based tutorial, as follows...
Before Assuming you are familiar with the Scrum Process Template (2.1-ish) - open a task and take a look at the "Details" section, as follows:


 This is where I want my "Actual" field to show up.
Get the Power Tools Download and install the latest v…

Eclipse/Android error: "Multiple dex files define [...]"

Wow, I am really going nuts blogging this-evening - 2nd post in less than an hour. 


Anyway this is a particularly nasty error that I keep running into with Eclipse/Android when starting the emulator after I have not run it for a little while. Since I run the risk of permanently forgetting the solution to the problem every time I walk away from my Android project (and thus having to spend a painful hour-or-so digging up the procedure again), I will blog it here, for my benefit, and for the benefit of anyone who may also suffer the same problem.


The gist is that when you start the emulator in debug mode (that is, you hit the button in the following image), you get the following error message come out on the console and a nasty popup telling you nothing more than there is an error with your program and you need to fix it:








[2012-04-06 23:20:57 - Dex Loader] Unable to execute dex: Multiple dex files define Lcom/google/gson/ExclusionStrategy;
[2012-04-06 23:20:57 - SimpleList] Conversion to Dal…