Metro and HTML5, CSS, & JavaScript

[dilettante]

The BUILD 2011 conference covered a broad range of information, from lengthy press release level material to very technical sessions.

Confusion seems to be common about how Web technologies play into the new Metro style applications, and Microsoft's shorthand speech uses the term "Web" quite a bit to help distinguish between JavaScript development, managed (.Net) development, and native (C++) development of Metro applications. I suppose people aren't sure where to jump in to figure out how this comes together.

Starting at square 1 they had the session Anatomy of HTML5 sites and Metro style apps using HTML5 (canned video).

Begin the journey of building beautiful, connected, and fast sites and apps for Windows 8 by learning the basics of a Metro style app using HTML5. If you've played with angle brackets and CSS but don’t regularly write client-side JavaScript, this session is the place to start.

This is only 16 minutes long and was a simple, simple overview of HTML in Metro.

If you only watched this very basic intro I can imagine how you might think Metro development in HTML is like Web development. You would be right, yet wrong.

At "square 2" they had the full session Metro style apps using HTML5 from start to finish (canned video, 1 hour) bridging between the baby steps above and technical sessions on this subject.

Get started writing Metro style apps using your HTML5, JavaScript, and CSS skills today! Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps. You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime. You’ll also learn proper navigation techniques, how to manage your app’s state, and how to incorporate the Windows look and feel into your app. This foundational session will arm you with everything you need to know to build Metro style apps with the skills you already have.

The session goes into how Metro apps are packaged and registered, Metro app instantiation, suspend/resume, and special elements and APIs used in Metro apps.

If this material is over your head as a Web developer you have some catching up to do before trying to move further using HTML + script to develop Metro applications. Some people are used to Ajaxy client-side development, JavaScript timers, XML and JSON, and the use of DOM extensions and APIs provided by non-browser HTML hosts. If this is you, you are ready to move ahead.

If your "Web development" has been more about using PHP to squirt static pages with some scripted rollover effects back to the browser you have some work ahead of you.


Ironically the largest group of developers ready for Metro HTML development are HTA developers. Probably 99% of all HTAs have been written in VBScript though... and there seems to be zero support for VBScript in the Metro environment.


I hope this helps clear up some confusion. From there you can move into the technical webcasts on Metro/HTML and of course soon we'll probably see more material from both Microsoft and 3rd party sources.