My name is Mark, I am 23 and I am the latest developer at The Technology Studio. This blog post aims to give you a basic understanding of the development of metro style applications using Microsoft's new JavaScript and html framework.

The main advantages of using the framework are immediately evident:

• Most web developers already have a strong foundation in html and JavaScript. These skills can be translated to the desktop app realm without too much trouble (arguably!).
• JavaScript already has solid support for asynchronous web requests (xmlhttprequest) which comes in handy if you want to integrate Ajax or web 2.0 mash-up features e.g. Twitter.
• If you start with one of Microsoft's project templates (for example, Grid application) the Windows 7/8 look and feel has already been set up for you. This means you can be confident the application will respond smoothly to touch and will look good on a wide variety of screen sizes.
• The framework has clearly been influenced by knockouts binding feature so if you are familiar with this then you shouldn't have too much trouble getting used to slightly different syntax:

Spot the difference!

Microsoft:

<div data-win-bind="innerHTML: trafficImage"></div>

Knockout JS:

 <div data-bind="html: trafficImage"></div>

• Furthermore, the full range of debugging tools are now supported for JavaScript within Visual Studio 2011. This thankfully means no more JavaScript alert boxes or web browser debugging is required to inspect code.

Some small quirks that I have noticed.

The following line of code DID work:

trafficImage: '<img src="' + src + '" class="resize" />'

The following line of code did NOT work:

trafficImage: '<img src="' + src + '" class="resize"></img>'

At a guess, the framework doesn't seem to appreciate strict xml structure when you write your html.

An Image Caching Issue…

I had trouble trying to stop the traffic images from being cached when I wanted to refresh the images. This might be a positive thing for another project but TFL defines rules for the public display of the traffic camera images.

One of these rules state:

'Feeds must be grabbed and displayed with the same frequency as that in the <RefreshRate> tag.'

To avoid caching I tried the following possible solutions: (all to no avail)

• TFL doesn't let you append a unique query string to the request URL.
• Attempted to access the DOM element and change it's ID to a random number when a refresh is due.
• Destroying the contents of the element and rebuilding it also did not refresh those darn images.
• <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> This also didn't help me.

Perhaps I am missing something very simple here. If any one knows a solution please leave a comment.

In conclusion, I look forward to developing less trivial applications with this new technology as there are some definite upsides, particularly, the improved debugging and intellisense support for JavaScript in VS2011 and the JS Knockout-esque data binding. However, I plan to wait until Microsoft has ironed out some of the quirks and built up more comprehensive documentation for WINJS.

Next time, I will attempt to integrate these cameras into a map.

To get started with this development go to: https://msdn.microsoft.com/en-us/windows/apps/br229516