Windows 8 Loves Web DevelopersLauri Svan, SC5 | 5.3.2013#td2013fi

©2012 Microsoft Corporation. All rights reserved.

A Word on Lauri An experienced developer and dreamer; that makes me an architect.I craft apps that run on several platforms (desktop and mobile) and help our teams in SC5 to do the same.I try to stay neutral on technology choices; I want to minimize my and my customers’ costs and vendor lock-in.My choice has lately been HTML5.I am not a “web designer” or “Windows 8 expert”; the bulk of my career is about building Java and C++ frameworks.

What Windows 8 Means for Me?• Fast, HTML5 compliant browser engine• Growing and potentially huge ecosystem

of consumer and enterprise users• Access to system services like a native

app

• New conventions I need to learn and live with#td2013fi

HTML5 and Windows 8 – Best of the Both Worlds?

A huge selection of open, extensible libraries

The widest developer base

Reusing of existing know-how

A wide selection of system APIs

The widest user base?

Platform-wide conventions

HTML5 / JavaScript Windows 8 / WinRT

Windows 8 & HTML5The same style, different tools

Windows 8 – a Holistic Developer Offering• It feels a bit overwhelming at start• But you will soon start seeing familiar

patterns• It is HTML5, CSS and JavaScript after all

• Your skills will transfer• But your existing coding patterns might

not#td2013fi

RégisLaurentDirector of Operations, Global KnowledgeCompetencies include:Gold LearningSilver System Management

Demo: Hacking a bit with Visual Studio & Blender

#td2013fi

Anatomy of a Windows 8 HTML5 AppA Sample HTML5 App

Windows 8 HTML5 App

Browser RuntimejQuery

Backbone.js

Tem

plat

es

Mode

ls

View

s

Misc

. Cod

e

Utilit

y Lib

rarie

s

WinJS API

WinJS.UI

Data

So

urce

sPa

ges

Page

Sp

ecifi

cLo

gic

Utilit

y Lib

rarie

s

What do I Mean by Different? Tools.Windows 8 Elsewhere

Package Manager NuGet Bower, NPM

Native “wrapper” WinRT Cordova (ex. PhoneGap)

Version Control Git (soon integrated into Visual Studio) Git

IDE Visual Studio + Expression Blend Eclipse

Test Server Node.js (+ CygWin) Node.jsOperating System Windows 8 on Parallels on OS/X OS/X

What do I Mean by Different? Frameworks.

Windows 8 ElsewhereUI Widgets WinJS UI Bootstrap, jQuery Mobile

MVC Framework WinJS.UI Backbone.js

Responsive Grid -ms-grid styles Semantic.gs

Feature Detection none (not needed) ModernizrDOM

manipulation none (a lot of need) jQuery

Modularization none (no need yet) Require.js

Native Access WinJS APIs (HTML5?) HTML5 APIs, Cordova API

Write your first app with MS stack – there is a lot of love put into it.Then see what you can reuse from your own toolbox.

Windows 8 Specific vs. Common

WinJS.UIIt is silly to reinvent the wheel if it already worksGrid – it is better than the one you are used toYour existing CSS code will likely be wastedPackagingYou will need to learn the conventions of packaging Windows 8 apps, including splash screens, tiles etc.WinJS APIA good list of alternatives when you cannot use the 3rd party libraries

Server APIs and BindingsXHRs work both normal way and with WinJSImplement WinJS UI specific interfaces/adapters for your API (some reuse possible!)Project layout, builds, infraNothing stops you adding a Windows 8 subproject into your project.e.g. RequireJS and Grunt, Git work all fineSome 3rd party librariesAs long as they don’t break the security sandbox, they should be fine.

to Learn to Keep

My App in Windows 8 - It the Same Anymore?• Your application will be a separate entity,

not a result of a build parametrization• You will have a separate UI skeleton with

different HTML, and CSS

• You may share non-UI (and some UI) libraries

#td2013fi

RégisLaurentDirector of Operations, Global KnowledgeCompetencies include:Gold LearningSilver System Management

Demo: Using RequireJS, jQuery and D3 Libraries in Windows 8 App

#td2013fi

The biggest step is“stop worrying and love WinJS”

t Q&A

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentations. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Thank you for coming!Feedback can be given via mobile or laptop through techdays.fi seminar schedule.

Example

#td2013fi