An overview of developing Windows 8 apps with HTML, CSS and JavaScript
After almost one week spent at BUILD Windows 8 conference in Anaheim, it’s time to let you know what’s important for you as Web Developers!
Windows 8 is the new major release of Windows announced earlier this year, with some big surprising news: Windows 8 apps use HTML5. It wasn’t easy to imagine how this was made possible since the whole interface looks really native. Now the conference is over, it’s way clearer and I will try to summarize what have been announced and what will interest you as Web Developers.
Before I start, just a little disclaimer: I’m not a Microsoft fanboy. I’m a Web Developer, I love standards and Open Source, I’m not paid to write what follows and Steve Ballmer is not pointing any gun against my head! That being said, my opinion about Microsoft changed a lot during this conference, and you should really turn your “MS sucks” mode off as well while reading this article. Done? Alright let’s start!
Let’s take the Metro
So, few words about those Windows 8 apps: They are called “Metro-style” apps, and are actually really pleasant to use. They’re responsive, fluid, beautiful, they’re almost always using squares and rectangles, because it’s Windows 8 theme, which is great for having a nice alignment on the grid. They can access Windows APIs like the file picker, the camera, the accelerometer, etc., have their own native contextual menu and settings (Android style), and they will be available on a Windows 8 app store.
To summarize: they’re pretty cool, fluid and functional from the end user point of view.
From a Web Developer point of view
The language is up to you
Windows 8 is built in a way you can choose to develop apps using 3 possible languages: C#, C++ and JavaScript. So MS fanboys and corporate developers will be able to continue using their stuff and will recycle their Silverlight skills, hardcore game coders can still use C, and us, Web 2.0 hippies can now write software with web standards. The 3 languages rely on the same WinRT (RunTime) layer, and have similar performances, so it’s really up to you to choose your favorite language. I will only talk about JavaScript on this blog however.
The IDE is *not* up to you
At this time, Microsoft’s Visual Studio is the only IDE to develop Windows 8 apps. Coming from the Open Source world and using mostly Eclipse, Intellij, Cloud9, and even Notepad++, I must admit that I had already enough different IDEs to deal with. But after I saw few folks at MS using it to code and run their Windows 8 apps super quickly I have to say that Visual Studio seems pretty powerful when you know it and I guess starting learning to use it is probably worth it. You (and I) should give it a chance.
Visual Studio 11 Developers Preview has some Windows 8 sample apps to do not start from scratch. Let’s see what we get when we create one of these sample apps:
A closer look at the sample app
Okay, so this is what we get when we run the generated new sample app:
This app has navigation, a contextual menu, 2 sliding regions and behaves like a regular cool and touchy Metro-style app, so that’s a pretty good and representative starting point.
HTML
So we chose JavaScript. But JavaScript’s role is about behavior right? What about HTML and CSS? Well you will be nicely surprised to see that a Windows 8 JavaScript app is actually really 100% made of HTML/CSS/JavaScript. So, what’s under the hood of this sample app? Well, probably not what you expect. Here is the corresponding HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>splitPage</title>
<!-- WinJS references -->
<link rel="stylesheet" class="/winjs/css/ui-dark.css" />
<script type="ms-deferred/javascript" src="/img/spacer.gif">
It uses HTML5 elements, data- attributes, ARIA roles, everything looks pretty standard, but it’s radically different from a regular website. There are tons of proprietary stuff, even if it’s still HTML.
Disappointing right? Well at a first glance yes it is, but when you think about it, there is not many ways to do native apps with web technologies. Have you ever used jQuery Mobile? It’s more or less the same. Even a pure web browser-based experience like jQuery Mobile has those data- roles to declare the behavior of the app :
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Transition Effects</li>
<li><a class="#" data-transition="slide">Slide</a></li>
So yes, it’s not really pure HTML anymore if you have to learn all these things. But it’s still way better than Objective-C right?
CSS
This extract of the CSS file is less surprising:
.splitPage .itemList .largeIconTextTemplate {
%;
%;
display: -ms-grid;
-ms-grid-columns: 124px 12px 1fr;
-ms-grid-rows: 1fr;
}
.splitPage .itemList .largeIconTextTemplateBackground {
-ms-grid-column: 3;
overflow: hidden;
}
@media screen and (-ms-view-state: snapped) {
.splitPage .win-contentTitle {
pt;
line-pt;
}
.splitPage {
-ms-grid-columns: 320px 0px;
-ms-grid-rows: 132px 1fr 0px;
}
.splitPage .itemListSection {
margin-left: 4px;
}
.splitPage header[role=banner] {
display: -ms-grid;
-ms-grid-columns: 44px 1fr;
-ms-grid-rows: 1fr;
}
You can see that Metro-style apps use specific media queries and Microsoft’s proposal for a CSS3 grid system. The rest is pretty common.
JavaScript
Here is the real business:
(function () {
'use strict';
// Custom event raised after the fragment is appended to the DOM.
WinJS.Application.addEventListener('fragmentappended', function handler(e) {
if (e.location === '/html/splitPage.html') { fragmentLoad(e.fragment, e.state); }
});
function updateForLayout(lv, layout) {
lv.layout = new WinJS.UI.ListLayout();
lv.refresh();
}
function layoutChanged(e) {
var list = document.querySelector('.itemList');
if (list) {
var lv = WinJS.UI.getControl(list);
updateForLayout(lv, e.layout);
}
}
function fragmentLoad(elements, options) {
if (!WinJS.Navigation.canGoBack) {
WinJS.Navigation.history.backStack[0] = { location: '/html/categoryPage.html' };
var backButton = document.querySelector('header[role=banner] .win-backbutton');
if (backButton) {
backButton.removeAttribute('disabled');
}
}
try {
var appLayout = Windows.UI.ViewManagement.ApplicationLayout.getForCurrentView();
if (appLayout) {
appLayout.addEventListener('layoutchanged', layoutChanged);
}
} catch (e) { }
splitPage.groups = pageData.groups;
var group = (options && 'group' in options) ? options.group : pageData.groups[0];
splitPage.items = pageData.items.filter(function (item) { return item.group.key === group.key }),
splitPage.selectedItem = splitPage.items[0];
elements.querySelector('.pageTitle').textContent = group.title;
WinJS.UI.processAll(elements)
.then(function () {
var lv = WinJS.UI.getControl(elements.querySelector('.itemList'));
lv.itemRenderer = elements.querySelector('.itemTemplate');
updateForLayout(lv, Windows.UI.ViewManagement.ApplicationLayout.value);
var details = elements.querySelector('.articleSection');
return WinJS.Binding.processAll(details, splitPage.selectedItem);
});
}
function itemInvoked(e) {
var details = document.querySelector('.articleSection');
splitPage.selectedItem = splitPage.items[e.detail.itemIndex];
WinJS.Binding.processAll(details, splitPage.selectedItem);
details.scrollTop = 0;
}
// [...]
WinJS.Namespace.define('splitPage', {
fragmentLoad: fragmentLoad,
itemInvoked: itemInvoked
});
})();
Honestly I’m too lazy to dive into this code since this article is just supposed to be an overview. However you can see that this file often refers to WinJS library and to the Windows object, which are used to access low-level WinRT calls. If you don’t want to access any Windows APIs like the device, the accelerometer and everything, you can omit using it and do pure JavaScript, or even use another lib like jQuery, it should work fine.
Copy pasting your web app is a bad idea
Some of you might think: “So if it’s all HTML, CSS and JavaScript, can I just copy and paste my whole website or web app and run it as a Windows 8 app?” Well, yes you could, but the user experience would really suck because you wouldn’t take any advantage of using the Windows RunTime environment. No native menus, no region scrolling and zooming, no access to the device APIs, no access to the filesystem, and the most important, no Metro-style look and feel.
New platform = New market
Consider Windows 8 as a whole new platform like iOS or Android, but this time using web standards (and this is a big deal!). You still have to do specific development for yet another platform, but at least you already know the language, so you won’t start from scratch, and that’s good news. The other good news is obviously that Windows 8 app market is currently absolutely empty. So guess what? You just have to be the first to develop some stupid flying explosive angry rabbits game to get freaking rich. Remember that it’s always way easier to be the first…
Conclusion
Even if developing for Windows 8 has some drawbacks for a typical standard-lover Web Developer like me, I must admit that I’m pretty impressed by Microsoft’s move with Windows 8. They’re Apple-style slogan at this conference was “Windows, reimagined”. Well that’s exactly what they did. They really invested a lot to make Windows 8 development accessible to the web developers community. Good job.
“Metro-style” apps are also actually really pleasant to use and they can honestly compete with Apple and Google in the tablets battle. If Web Developers get charmed by developing on this platform, it could even encourage competitors to embrace the same strategy and it could really be the start of a “native web” revolution. And as usual, if you’re here at the beginning of a revolution, there are tons of potentially profitable opportunities to jump on.
So, how do you feel about developing for Windows 8?
10 thoughts on “An overview of developing Windows 8 apps with HTML, CSS and JavaScript”
I really enjoyed your article! I am just starting to get my feet wet in development, and I found this very useful. I also agree with just about all of what you said about Windows 8.
Thanks for the great article and info! Im loving the fact that Windows 8 will be much more web based and open to many application programming languages. :)
Hi there.
Wonderful post, thanks for sharing! I am looking forward to reading the next one!
Thanks for sharing good information about Windows 8 “Metro style” apps.
Looking forward for more information on the next article.
I am baffled by how one will go about using good layered application using HTML CSS AND JAVASCRIPT. in fact how to you go about doing database stuff. If this is really true without having to make use of a million and one dll and thirdparty libraries then all those years working with html, css and javascript has finally paid off.
It’s HTML5-based. There’s IndexDB, WebSQL, Storage APIs.
P.S: Also is it true from my reading at Microsoft Web Site that developers can sell their application using the application store of some kind like the Apple store?
Yes, you can package your app and sell it on their equivalent of App Store / Android Market :)
Thanks for the article. Now I wonder with my background from both the worlds of XAML and HTML5 why I should choose to create Windows 8 Apps the HTML5 way?
I feel way more comfortable creating rich apps with XAML than HTML5 because of the amount of code that is generated using HTML5. I do not like all the Javascript that is calling WinJS.
Any big reasons why I should choose HTML5 over XAML in Windows 8 Apps developement?
If you prefer .Net then just keep using .Net, that’s the whole point. They built Windows 8 so JS and .Net use the same low-level APIs. The language is really up to you and your personal preferences!