Windows 8 & HTML5: friends with benefitsDevTeach Montreal – 2012-12-11

Frédéric Harper

Technical Evangelist @ Microsoft Canada

@fharper | outofcomfortzone.net

WINDOWS 8

Windows reimagined

New fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

Great experience across all hardware

Tablets to laptops to all-in-ones

Highest power to the most efficient chipset

Touch, mouse, keyboard

Content Before Chrome

Content Before Chrome

Content comes first. Immerse users in the things they love

Leave only the most relevant elements on screen to minimize distractions

If you know web technologies, you are ready to build amazing apps for the Windows Store

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Windows 8 Store Apps

Communication & Data

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

XAML HTML / CSS

HTMLJavaScrip

tCSS

CC++

C#VB

Desktop Apps

Win32.NET / SL

Internet Explorer

Sys

tem

Ser

vice

sV

iew

Mod

el

Con

trol

ler

Cor

e

Windows Core OS Services

Communication & Data

Application Model

Devices & Printing

Graphics & Media

Sys

tem

Ser

vice

sC

ore

HTML5

demo

MORE WEB STANDARDS

IE9 hardware-accelerated platform

CSS 2D Transforms

CSS Backgrounds & Borders

CSS Color

CSS Fonts

CSS Media Queries

CSS Namespaces

CSS OM Views

CSS Selectors

CSS Values and Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal and Range

DOMParser and XMLSerializer

ECMAScript 5

HTML5 Canvas

HTML5 Geolocation

HTML5 Selection

HTML5 semantic elements

HTML5 video and audio

ICC Color Profiles

Selectors API Level 2

SVG, standalone and in HTML

XHTML/XML

IE10 hardware-accelerated platformCSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Flexbox

CSS Fonts

CSS Grid

CSS Hyphenation

CSS Image Values (Gradients)

CSS Media Queries

CSS multi-column Layout

CSS Namespaces

CSS OM Views

CSS Positioned Floats (Exclusions)

CSS Selectors

CSS Transitions

CSS Values and Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal and Range

DOMParser and XMLSerializer

ECMAScript 5

File Reader API

File Saving

FormData

HTML5 Application Cache

HTML5 async

HTML5 BlobBuilder

HTML5 Canvas

HTML5 Drag and drop

HTML5 Forms and Validation

HTML5 Geolocation

HTML5 History API

HTML5 Parser

HTML5 Sandbox

HTML5 Selection

HTML5 semantic elements

HTML5 track

HTML5 video and audio

JavaScript Typed Array

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, and Touch) Events

RequestAnimationFrame

Navigation Timing

Selectors API Level 2

SVG Filter Effects

SVG, standalone and in HTML

Web Messaging

Web Sockets

Web Workers

XHTML/XML

XMLHttpRequest (Level 2)

XMLHttpRequest CORS

Popular CSS3 features in Windows 8

2D & 3D transforms

Transforms Animations

Transitions

MotionGrid

Flexbox

Layout

Gradients

Filter Effects

Text-shadow

GraphicsMulti-column, hyphenation

Pagination

Position float

Content flow

Windows hardware acceleration makes these beautiful and fast

CSS3 demos

demo

Popular HTML5features inWindows 8

Web Sockets

Web Workers

IndexedDB

Ecmascript 5

File API & Blobs

Geolocation

Audio tag

Video tag

Touch-first

Pointer events

Zoom regions

Snap Points

Forms

Validation

Input types

Spell checking

HTML5 demos

demo

From IE10 web app to Windows app

• Minor API differences http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx

• Different host No plug-ins in Windows apps Trust level differences (local and web context) http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx

• UX [recommended]

• Windows 8 features [recommended]

Context in HTML/JS Windows appsFeature Local context Web context

Windows Run-time Yes No

Windows Library for Javascript

Yes No

External script references

No Yes

Cross-domain XHR requests

Yes No

Automatic filtering for script injection on DOM

Yes No

There are ways to communicate across contexts, ways to give websites access to some web standards features and ways to skip automatic filtering within a function.

TOOLS

Visual Studio 2012 RC & Blend for Visual Studio 2012 RC

demo

WINJS

Windows Library for JavaScript (WinJS)library for building apps using JavaScript

Web technologies you’re already familiar with

Utilities and patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Windows 8 design style

Controls for common user experiences

Designed for touch as well as traditional input

Scales across form factors

Make your apps look and feel great

WinJS

Helpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

WinJS controls SettingsFlyout

Flyout

Semantic Zoom

Flipview

SemanticZoomListview

Menu

Rating

Slide does not include all WinJS controls (App Bar, Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)

DatePicker

Porting HTML5

demo

Prefer your own library? Go ahead!

• Adhere to the Windows UI and personality

• Understand our web context & sandboxing model

• Mix & match works fine

You can build amazing sites and apps with the Windows 8 web platform

dev.windows.com

The Developer Movement is giving you the chance!

Ready to create the next app phenomenon?

DeveloperMovement.ca/APPS

About

• Publish awesome Windows apps• And collect points every step of the way to redeem great rewards like a pair of Monster Headphones and much more! Victory is only an app away. It’s time to make yours the next big thing!

Join The Developer Movement now!

DeveloperMovement.ca/APPS

QuestionsFrédéric Harper

fredh@microsoft.com

@fharper

http://webnotwar.ca

http://outofcomfortzone.net