nik codes

NYC ALT.NET: Building Win8 Metro Apps with JS & HTML

At the July meeting of the New York ALT.NET Meetup, Microsoft developer evangelist Rachel Appel presented a session on building Windows 8 Metro style applications with JavaScript and HTML. Here are my notes from that presentation.218420_980

  • In a room of ~40 developers, all said they felt comfortable with JavaScript, but only one or two considered themselves to have any design skills.
  • The presentation started with a quick demo of Windows 8 running on Rachel’s tablet. It was all pretty standard stuff if you’ve seen Windows 8. If you haven’t – head straight over to the Building Windows 8 blog and read up right away!
  • To build Windows 8 apps, you have to have Visual Studio 2012 running on Windows 8 itself. Visual Studio 2012 does work on Windows 7, you just can’t create Windows 8 Metro apps with that configuration.
  • Out of the box, Visual Studio 2012 has several JavaScript based Metro templates that have lots of build in features, including some layout and styling along with the usual library references.
  • There does not appear to be a built in UI pattern like MVC or MVVM. I assume that libraries that help structure code, like backbone.js or knockout.js, will be popular.
  • There is a concept of “pages” (not HTML pages) built into the template. These were not covered in depth – I need to research this more.
  • I was happy to see the ECMAScript5’s “use strict” directive in use in the template code.
  • No additional work is needed to get basic touch gestures working when using the JavaScript controls.
  • Running (IE:F5 Debugging) an application from Visual Studio causes the application to open up in full screen mode. This makes break point debugging very painful with lots of Alt+Tab window switching.
  • A simulator (not emulator) can be used to ease this pain. The simulator is basically a remote desktop connection, back into your own machine, which shows the application running along with tooling to do things like rotate the device orientation and simulate touch events/gestures.
  • Once an application is deployed to the app store, and downloaded by a user, it is placed in an obscure Program Files directory. If a user finds the application, they would be able to view the source JavaScript. If this is a concern, Id recommend using a JavaScript obfuscator like UglifyJS.
  • Visual Studio will show you the JavaScript source for the core libraries, but it will warn and stop you from changing said source. Since JavaScript is dynamic, you could replace a method implementation at runtime.
  • Visual Studio tries to guide developers into properly implementing the Metro UX guidelines. A full set of documentation and resources can be found in the Windows Dev Center.
  • Interesting point made about the reduced relevancy for HTTP caching/CDN’s in HTML based Metro apps since a majority or resources (sans data/JSON) will be included in the bundle.
  • Metro style JavaScript applications run in IE10 under the covers – no surprise there.
  • Html “controls” use standard elements (IE: divs) with data-* attributes.
  • Application manifest file (XML) contains tons of settings, but there is a nice editor for the file that hides away the XML and makes editing “easy”.
  • Access to device API’s (camera, geolocation, etc) must be approved by user, similar to Facebook’s permission model.
  • Background tasks are supported.
  • Applications can have many entry points like a tile click or a search result.
  • Side loading of applications is handled by Visual Studio.
  • Tiles can be short (square) or wide (rectangle), live or “dead” – users choose and developers should accommodate those preferences.

All in all, it was a very informative session. It was video recorded, so I’ll update this post as soon as the video is posted online.

– By

Single Post Navigation

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: