Web Development optimize

A look at Windows 8 development with HTML and JavaScript

Read about the pros and cons to working with HTML and JavaScript on Windows 8, and get a developer's perspective on how to approach the HTML/JavaScript Metro projects.

One of the more interesting developments in the Windows 8 story is the ability to write Metro applications using HTML and JavaScript. This was a smart move by Microsoft in some ways: Many developers know and have a comfort level with HTML and JavaScript; there are lots of good tools for working with HTML and JavaScript; and systems like Appcelerator's Titanium and PhoneGap have seen great success with allowing developers to write native applications with HTML and JavaScript.

There are pros and cons to working with HTML and JavaScript on Windows 8. One big drawback is that you are working with the new WindowsRT API, which means that unlike some of the other options out there, your applications will not be cross-platform compatible. On the other hand, the WindowsRT API gives you access to capabilities and functionality that is either still maturing in HTML5, does not exist, or may be harder to access. All of the nifty functionality in WindowsRT around "hubs" and "contracts" with other applications and the OS itself is a great example of things you cannot do with other systems. Another oddity is that the programming model seems similar to the XAML model.

Getting started with a Metro application in HTML is easy. Start a new Visual Studio project, expand JavaScript, and then expand Windows Metro Style to select the template you want (Figure A). When the project is created, you will see a basic application. Figure A

Picking the right template (Click the image to enlarge.)
The first thing I picked up on was a default.js file that controls the application's startup, how it interacts with the OS (like handling suspension), and so on; it is very similar to what app.xaml does. In fact, the project structure is quite similar to what I have been seeing in XAML Metro projects (Figure B). Figure B

A snapshot of the default project structure
I am a little surprised the system is not using jQuery out of the box, because Microsoft has made a lot of moves in that direction for ASP.NET MVC. Instead, what we see is a collection of functions (Figure C) that is passed to a function that maps the functions to the page's events. Figure C

Code registering itself to the page. (Click the image to enlarge.)

The end result is an HTML/JavaScript Metro project is very similar in feel to a XAML Metro application. This seems like a sensible approach, though it may be different from how many people are currently writing and managing their HTML5 + JavaScript applications.

There are three major API components: the WinRT pieces, the HTML/CSS DOM, and the LiveConnect API. The WinRT pieces are almost entirely identical to what is available to Metro XAML applications; the big differences are in UI controls, and a few things related to the XAML model. The HTML/CSS DOM available is a subset of the full HTML5 stack. LiveConnect is a system for performing logons and data saving across a variety of platforms (iOS, Android, Web, Windows 8, and Windows Phone).

When .NET first came out, Microsoft had a two-pronged strategy for capturing developer mindshare: They had VB.NET to appeal to the VB6 developers, and they had C# to draw in the Java programmers. In both cases, the similarity between what people were migrating from and the .NET offering was surface level at best. While the results were impressive, a lot of people (particularly VB6 developers) felt badly burned by the experience; they quickly learned that a mostly-shared syntax at the language level was not the same thing as a smooth transition. As long as you do not try to approach the HTML/JavaScript Metro projects as "just a Web page running off the local file system," your disappointment levels will be kept to a minimum, and you will have the right outlook on things.

J.Ja

About

Justin James is the Lead Architect for Conigent.

2 comments
Skruis
Skruis

You should update your article and change the 'Metro' references to...what is it...'Windows 8 Style UI'. Thanks for the updates. I'm getting ready to start on a 'Windows 8 Style UI' app and these articles are great primers.

stat30fbliss
stat30fbliss

Thanks for demystifying some off the more elusive concepts about HTML/JS Metro Apps. I look forward to finding the time to take a stab at one myself.