Safe and Sane Windows 8 Programming Experiences with HTML and JavaScript

Windows 8 is mostly about touch.

There was a time, some fifteen years ago, when the choice of the programming language was a delicate decision. It stopped being a problem when .NET arrived. Because .NET languages compile to the Common Language Runtime, .NET compatible languages became more or less indistinguishable other than syntactically, and developers could happily mix Visual Basic with C# and even JScript.

The JScript language you could use to build plain .NET applications was simply a programming language with syntax close to JavaScript. Choosing JScript didn’t mean you were going to write .NET applications following the web metaphor.

In Windows 8, things are different.

A Windows 8 application runs on top of a new runtime environment—called “Windows Runtime” or WinRT for short. WinRT is a modernized and redesigned version of the .NET Common Language Runtime. You can write a Windows 8 application using C#, Visual Basic, or C++ for the logic and XAML for the layout. In doing so, you can take advantage of patterns that are made-to-measure for XAML, such as the Model-View-View-Model pattern (MVVM). In this regard, developing for Windows 8 is not that much different from developing for Silverlight or Windows Phone.

As an alternative to using C#/Visual Basic/C++ and XAML, you can use JavaScript as the programming language, and as an alternative to XAML, you use HTML and CSS3 to define the layout of the application. A lot of developers are already familiar with JavaScript, HTML and CSS; in addition, those languages are far easier for new developers to pick up than C# or XAML. A beginner’s book such as Start Here! Build Windows 8 Apps with HTML5 and JavaScript makes particular sense just because it enables nearly everybody—repeat, everybody—to learn about, and build and publish, Windows 8 apps.

It should be clear, however, that writing a Windows 8 application is not the same as writing a true web application. The core syntax of HTML, CSS, and JavaScript are the same, but patterns and practices are different. Here’s a few remarkable vectors that show developers the way to a safe and sane Windows 8 programming experience with HTML and JavaScript.

It’s Windows 8. It’s Not Web.

Even though you use web-related technologies, the final result of using HTML and JavaScript within Visual Studio 2012 is a Windows 8 application. A Windows 8 application is not a website. It is not hosted on a server and doesn’t have a domain. These programs still use a web browser (Internet Explorer 10) to display the user interface. Because IE 10 is the only supported browser, there’s no need for frameworks that help provide a consistent rendering experience across browsers. Everything you may need that surpasses the basic capabilities of JavaScript is available through a special library, called WinJS. In the context of Windows 8, web-related technologies are merely the syntactical means to describe the expected behavior.

It’s a Self-Contained App with Its Own Characteristics.

Internally, a Windows 8 app built with HTML and JavaScript is packaged as a self-contained, client-only website, structurally similar to a collection of static HTML pages that use Ajax-style remote calls to get external data. The actual executable is a chrome-less instance of Internet Explorer 10 that just launches on the root page the developers created for the app.

The Windows 8 application has its own lifecycle and artifacts, including live tiles, the app bar, and charms. In addition, a Windows 8 application must fulfill a number of visual requirements, such as dealing with different view states (full screen, snapped, portrait, landscape).

Because the final result is an app and not a website, your code is not subject to the usual constraints of cross-domain calls that sometimes limit web client solutions. Your Windows 8 code—much like Windows Phone code—can call into any known HTTP endpoints without limitations.

Your Code Is Sandboxed.

In a pure web world, you end up using ad-hoc JavaScript and CSS frameworks to accomplish your goal. In Windows 8, WinJS provides everything you need, including adaptive rendering, data binding, DOM manipulation, and remote connections. The JavaScript core syntax is simply the language that glues together multiple calls to the WinJS infrastructure.

Furthermore, external references such as CSS or additional JavaScript files are considered a security risk and forbidden. All application resources must be known at compile time and referenced from the local computer instead of the network.

Windows 8 Is Mostly about Touch

While a well-done touch-enabled application is easy to recognize, defining what’s required to enable touch effectively in an application is not a trivial task. In its simplest form, a finger is the equivalent of a mouse cursor, and swipe gestures replace the need for scrollbars. But you need to consider more than these basic touch and swipe gestures—in particular, gestures such as pinch-and-zoom—but the true measure of an effective touch-enabled user interface is in the ability to use both fingers and mouse with equal ease.

This is highly problematic if you are in a full web scenario, but it is considerably simpler in Windows 8 because of WinJS. WinJS comes with a family of UI widgets designed to be used effectively with either mouse or finger. As just two examples, buttons render large enough to be touched as well as clicked, and ListView controls are automatically scrollable both vertically and horizontally with both mouse and fingers. These two examples certainly don’t exhaust the list of touch-related features that WinJS provides, but should serve as a starting point.

In the end, the task of building Windows 8 applications can be approached in a number of equally effective ways. Side by side with the traditional presentation model based on XAML and C#/VB, you have the web model where HTML, CSS3, and JavaScript are used to build a desktop app out of web technologies. But it’s still a Windows app, not a site!

tags: , ,

Get the O’Reilly Programming Newsletter

Weekly insight from industry insiders. Plus exclusive content and offers.