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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>splitPage</
title
>
<!-- WinJS references -->
<
link
rel
=
"stylesheet"
href
=
"/winjs/css/ui-dark.css"
/>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/base.js"
></
script
>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/ui.js"
></
script
>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/binding.js"
></
script
>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/controls.js"
></
script
>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/animations.js"
></
script
>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/uicollections.js"
></
script
>
<
script
type
=
"ms-deferred/javascript"
src
=
"/winjs/js/wwaapp.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"/css/default.css"
/>
<
link
rel
=
"stylesheet"
href
=
"/css/splitPage.css"
/>
<
script
type
=
"ms-deferred/javascript"
src
=
"/js/splitPage.js"
></
script
>
</
head
>
<
body
>
<!-- This template is used to display each item in the ListView declared below. -->
<
div
class
=
"itemTemplate"
data-win-control
=
"WinJS.Binding.Template"
>
<
div
class
=
"largeIconTextTemplate"
>
<
div
class
=
"largeIconTextTemplateImage"
data-win-bind
=
"style.backgroundColor: backgroundColor"
></
div
>
<
div
class
=
"largeIconTextTemplateBackground"
>
<
div
class
=
"largeIconTextTemplateLargeText win-itemTextStrong"
data-win-bind
=
"textContent: title"
></
div
>
<
div
class
=
"largeIconTextTemplateSmallText win-itemTextTertiary"
data-win-bind
=
"textContent: subtitle"
></
div
>
<
div
class
=
"largeIconTextTemplateMediumText win-itemText"
data-win-bind
=
"textContent: description"
></
div
>
</
div
>
</
div
>
</
div
>
<!-- The content that will be loaded and displayed. -->
<
div
class
=
"splitPage fragment"
>
<
header
role
=
"banner"
aria-label
=
"Header content"
>
<
button
disabled
class
=
"win-backbutton"
aria-label
=
"Back"
></
button
>
<
h1
class
=
"pageTitle win-title"
></
h1
>
</
header
>
<
section
class
=
"itemListSection"
>
<
div
class
=
"itemList"
data-win-control
=
"WinJS.UI.ListView"
data-win-options
=
"{dataSource: splitPage.items, oniteminvoked: splitPage.itemInvoked, layout: {type: WinJS.UI.ListLayout}, selectionMode: 'none' }"
></
div
>
</
section
>
<
section
class
=
"articleSection"
aria-live
=
"assertive"
aria-atomic
=
"true"
aria-label
=
"Item detail"
>
<
header
class
=
"header"
>
<
div
class
=
"image"
data-win-bind
=
"style.backgroundColor: backgroundColor; style.backgroundImage: backgroundImage; alt: title"
></
div
>
<
div
class
=
"text"
>
<
h1
class
=
"title win-contentTitle"
data-win-bind
=
"textContent: title"
></
h1
>
<
h2
class
=
"subtitle win-itemText"
data-win-bind
=
"textContent: subtitle"
></
h2
>
<
p
class
=
"description"
data-win-bind
=
"textContent: description"
></
p
>
</
div
>
</
header
>
<
article
class
=
"content"
data-win-bind
=
"innerHTML: content"
></
article
>
</
section
>
</
div
>
</
body
>
</
html
>
|
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 :
|
1
2
3
4
|
<
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
href
=
"#"
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
.splitPage .itemList .largeIconTextTemplate {
width
:
100%
;
height
:
100%
;
display
: -ms-grid;
-ms-grid-columns:
124px
12px
1
fr;
-ms-grid-rows:
1
fr;
}
.splitPage .itemList .largeIconTextTemplateBackground {
-ms-grid-column:
3
;
overflow
:
hidden
;
}
@media
screen
and (-ms-view-state: snapped) {
.splitPage .win-contentTitle {
font-size
:
11pt
;
line-height
:
15pt
;
}
.splitPage {
-ms-grid-columns:
320px
0px
;
-ms-grid-rows:
132px
1
fr
0px
;
}
.splitPage .itemListSection {
|