Notes from BUILD – Day 1 – Keynote Part 3 – Antoine Leblond’s Windows 8 Platform and Tools Presentation – Building an HTML5/JavaScript Metro App

This is part of a transcription of my notes from Microsoft’s recent BUILD conference in Anaheim, CA, minus anything that might be considered Red Gate confidential. Thus, they’re somewhat unstructured, sometimes ramble off-topic, and often contain dodgy grammar. My own commentary and observations will generally be italicised so you can easily distinguish it from the reporting on what actually happened. Much has already been said about this conference, and about Windows 8, but I hope you find these useful. Please feel free to comment or ask questions and I’ll be happy to answer them as best I can.

Antoine Leblond is Senior Vice President, Windows Web Services at Microsoft Corporation.

IMG_0910_thumb.jpg

Figure 1. The marketecture diagram with which everyone’s now so familiar. What it doesn’t make clear is that managed code still runs inside the CLR and that the WinRT interfaces are exposed in the CLR just like those in any normal .NET assembly. JavaScript runs on the Chakra engine used by IE10 – in fact it seems pretty obvious to me that the whole HTML/CSS/JS story must basically run in IE10 with the WinRT interface exposed to it. (You can right-click and “Open image in new tab”, or whatever your browser’s equivalent is, for a larger view – sorry, it’s still not great, but that’s my shonky iPhone 3GS camera for you. OTOH, it’s also all over the web so you can always Google for a better version.)

Interaction with Windows in the Metro environment is via the Windows Runtime APIs, or WinRT. Microsoft provide a unified toolset for developing Metro apps that allow you to pick the languages and technologies you want to use, which means you can bring forward and develop your existing skills, rather than have to learn a whole new technology afresh.

Demoed building a Javascript web application from a blank template in Visual Studio 2011 – something that will obviously already be very familiar to web developers.

(It was at this point I suddenly realised how annoying Steven Sinofsky’s habit of interrupting other presenters must be to them. I wanted to wedgie the guy and toss him off the stage into the front row of developers to stave off the possibility of a worse rampage later on.)

Then went on to build a really simple Javascript/HTML5 Metro drawing application, using WinRT. Noticed that the event syntax in JavaScript sucks a bit because you have to use strings for the event names when you register event handlers. Oh well.

Showed that WinRT is exposed to and can be easily used from JavaScript by calling into it to bring up a file picker. JavaScript also supports asynchronous method calls using “promises”.

He also turned a primitive app into a full touch photo picker app, which he automatically integrated with Socialite by implementing the “share” contract, allowing him to share back photos via the charm – photo uploading occurs asynchronously so the app remains responsive.

Showed Expression Blend 5, which can now work with HTML 5 & CSS, as well as XAML. It works in exactly the same way for both, so it’s easy for existing Blend users to work with apps developed with HTML/CSS rather than XAML.

In the HTML version of the demo app the app bar at the bottom (swipe up or down from either bottom or top edge to bring up) is implemented as a

.

There’s a new HTML “grid” that can be used for layout to implement a tiled app – this might be a Microsoft extension since the CSS has a load of MS specific properties:

  • -ms-grid-columns
  • -ms-grid-rows
  • Etc.

There are similar properties in the code for the canvas object as well. It felt a bit like “Welcome back old Microsoft of my youth, where have you been this past decade?”

I was generally impressed: it seems like it’s possible to be very productive with the new tooling and extensions.