Native Windows 8 Apps in HTML and JS

I’ve started looking into HTML and JS development for Windows Store apps, and so far I’ve actually been rather impressed! They’ve got a pretty good setup there, and have done a lot of things well so that existing JS developers can feel comfortable creating a native application for Windows 8. Unlike other JS-based platforms like PhoneGap where it feels like you’re just making a website in a certain form factor (which you are), Windows 8’s JS integration runs and codes like a native application. Note: this is a spoiler for my upcoming talk at a Regina Tech Community event, feel free to skip this post if you’d like to be surprised later

Similarities to Web Development

When you get down to the nuts and bolts, Windows 8 JS applications are run inside of a Internet Explorer 10 instance with nice defaults and access to a few internal libraries. As far as development is concerned, you’re writing a client-side web application. Even to the point where you can include existing JS frameworks like jQuery or Backbone. So really there’s not a lot of things to learn when it comes to writing Windows Store apps in JS.

Every page you write in your application has standard HTML markup, refers to CSS stylesheets (usually the built-in ones with references to your own personal changes), and JS files (again, built-in libraries in addition to your own code).

CSS Defaults

The built in stylesheets give you a lot of nice benefits, including default styling for Windows 8 applications, so you don’t have to spend a lot of time to get a default look and feel. Also, with the change of a reference you can support light or dark defaults, and the default stylesheets automatically support user settings such as high contrast, other languages, and right-to-left text. To modify or extend any of these existing styles, it’s as simple as redefining the appropriate class name in your own CSS file.

Another nice thing the default stylesheets give you are layout and UI controls. You can use layout in a similar (but not as easy on the eye) way as Bootstrap, by defining classes or style settings directly on your elements. Creating a grid layout is as simple as defining -ms-grid-column and -ms-grid-row. Also, the UI controls for inputs and the Windows 8 specific controls all come with default styling that can be extended and overridden.

JS Integration

Similarly, the WinJS libraries provide access to almost anything in Windows 8 you’d like to use, as well as functionality for a bunch of default Windows 8-style controls. Accessing something like a file picker is as simple as newing up the appropriate JS object and calling methods on it. Dealing with events from controls is almost identical to how you would do it in a normal web application – by binding to the event or redefining the event’s method.

Differences from Web Development

Of course, you’re not actually writing a client-side web application, you’re writing a native app. There are a bunch of things you need to consider, including application lifecycle, state management, navigation, resource management, and more.

Local Context

Your Windows 8 JS application is run in what’s called “local context” – a special mode within Internet Explorer 10 which allows your web app to access system resources through WinJS and have elevated permissions. This, among other things, allows your web app to do things it wouldn’t normally be able to do, such as making cross-domain AJAX requests and loading resources from other domains. However, it does come with some restrictions: inserting HTML into your application is restricted and you can’t load remote scripts.

Application Lifecycle

Application lifecycle isn’t a foreign concept to anyone who’s made a native phone application, but for web developers it’s relatively new. Your app has to be able to handle being suspended and terminated at a moment’s notice. As part of that you should also manage application state to provide a better user experience when your app is resumed or restarted. Luckily the WinJS libraries make this fairly easy to do.

Navigation

The way that Windows 8 runs your JS app is very similar to the single-page application concept in web development. Windows 8 will load your default.html page, and then execute everything from that page’s context; it’s not really designed to reload new pages every navigation event. Instead, it’s ideal to use the WinJS library to navigate between pages without having to unload or reload resources, and this also provides a nice animation to improve user experience (as opposed to a blank screen between page loads).

Promises

In addition, the WinJS library provides a bunch of Windows 8-specific implementations of JS tools to help with development. All async calls made through the WinJS library use “promises”, which provides an easy way to chain or wait for multiple async calls (similar to the functionality available with Tasks in C#). WinJS also provides a way to make AJAX calls using the same promises concept.

Windows 8 CSS & UI

Windows 8 also provides a bunch of platform-specific media queries and CSS properties to allow developers to reorient their applications when view states change – there’s a media query for portrait, landscape, snapped, and fill modes. Incorporating Windows 8 UI controls is as easy as specifying a specific attribute on your elements: data-win-control. Your app is automatically setup to scan for and initialize these controls, and you can provide extra options using the data-win-options attribute.

OS Integration

There are also several integration points with Windows 8 available through the WinJS library. Almost all the things you can do with a C# application you can do in JS, including app bars, live tiles, file access, hardware access (camera, GPS, etc.), touch, stylus, and gesture input, lock screen updates, background tasks, app settings, search and share integration, file type association, protocol association, and more. Most of this is configured through the Application Manifest, which details exactly what your app is capable of.

Native JS Apps are Viable

All in all, writing a native Windows 8 app in JavaScript is a surprisingly viable option. There isn’t much you miss out on, and the WinJS framework allows web developers to take advantage of a lot of their existing skillset. Of course, I’ll be doing an indepth presentation of this at the free Regina Tech Community event on January 17th with code samples, come check it out!

Comments