Windows 8 Metro Application Template

How we built it.How it will help you.

Steren Giannini Meetup Windows 82012-10-01

Windows 8 Metro Application Template

How we built it.How it will help you.

Steren Giannini Meetup Windows 82012-10-01

Windows StoreApplication Template

How we built it.How it will help you.

Steren Giannini Meetup Windows 82012-10-01

@Steren

Product manager at Joshfire

Windows Store app Template

to easily create content-based applications in Windows Store app stylesupports articles, videos and picturesfully integrated with Windows 8

Generated App Demo

http://vimeo.com/46828771

How we built it.(advice on building JS Windows Store apps)

You know what the funniest thing about Windows 8 is?

It's the little differences. I mean, they got the same shit over there that we got here, but it's just...it's just, it's a

little different.

What?

Use JS, but...

not your favorite JS libraries

"Little" differences.

AJAX calls: only using WinJS$.ajax() WinJS.xhr()

HTML insertion: nope, use DOM manipulation$().prepend() var logo = document.createElement('img');

element.querySelector("header").appendChild(logo);

Back to the roots!

EJS templates WinJS.Binding.Template()

but a little too much -like

use for Views, Data and Navigation(WinJS view widgets do all the work for you)

Use WinJS API

You will have to learn a new framework

well structured (Object Oriented, asynchronous)well documented

Start from samples, not from scratch

For every feature, look for examples and doc

http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

Visual Studio

Great:● auto-completion ● code check● simulator

Visual Studio

Horrible:● DOM inspector● JS errors

○ Stacktrace is here but very often unreadable● CSS

○ change & reload, no live editing-> use Blend

Blend

Live CSS editing but...● heavy tool, too many buttons● generated CSS not very smart

(use the UI only for tweaks)

● still need to reload the app very often

Checklist for a great Windows Store app

● Design ● Touch, mouse, keyboard

● Offline● Snapview mode● Share sharm● Semantic Zoom● Search

Read about Windows 8 designUse SDK UI widgets

See exam

ples in SD

K

Think about Offline mode

Handle connection lostif(Windows.Networking.Connectivity.NetworkInformation

.getInternetConnectionProfile().getNetworkConnectivityLevel() === Windows.Networking.Connectivity.NetworkConnectivityLevel.internetAccess) {

Data.update();}

Windows.Networking.Connectivity.NetworkInformation.addEventListener("networkstatuschanged", checkInternet);

Do not assume images loaduse placeholders

Do not assume your data loadsdisplay a network warning message

IE10 vs Webkit or Geckop { width: 100%; height: 500px; -webkit-column-width:100px; column-width:100px;}

http://jsbin.com/oyajog/5

http://www.quirksmode.org/css/multicolumn.html#link5

How it will help you.

For content-based apps, no need to reinvent the wheel.

You use to create

blogs and simple websites.

Use the and this

template to create content-based apps for you

or your clients.

Joshfire Factory Demo

http://factory.joshfire.com

Questions?

we're hiring!