HTML5 and Windows PhoneBFF

Paul LabergeTechnical EvangelistMicrosoft CanadaPaul.Laberge@icrosoft.com@plaberge

New multicore chipset

New graphics processor

Increased RAM: 1GB or 512MB

More Screen resolutions

Removable, encryptable storage

NFC

Modern Smartphone Platform

Bringing HTML5 to Windows Phone

Why build your WP app with HTML5?• Reuse your existing HTML, CSS and

JavaScript skills

• Reduce development costs by leveraging investments across different platforms

• Can be combined with C# to gain access to the rest of the platform capabilities

A Windows Phone App that leverages the WebBrowser control for some or all of its functionality

What exactly is an HTML5 app on WP8?

Building our first HTML5 app

Drag picture to placeholder or click icon to add

All great things start from the beginning

A Walkthrough of the HTML5 Hybrid Template

demo

• Hardware accelerated

• Built for touch

• Fast even for apps!

• Offline apps are a go!

Internet Explorer 10

IE10 hardware-accelerated web platformCSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Device Adaptation*

CSS Flexbox*

CSS Fonts

CSS Grid*

CSS Image Values (Gradients)

CSS Media Queries

CSS Multi-Column Layout*

CSS Namespaces

CSS OM Views

CSS Regions And 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

Formdata

HTML5 Application Cache

HTML5 Async Scripts

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 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

XHR (Level 2)

XHR CORS

• 2D & 3D Transforms

• Transitions

• Animations

• Shadows

• Gradients

• Custom Fonts

CSS3 Effects

A Live Tile Experience in HTML5

demo

Touch events Built on top of the MSPointer model

Follow the familiar pattern of DOM mouse events

Supports multiple touch points

Requires only a few changes to existing touch sites

Gesture events Easy to capture gestures over a single or multiple

elements on the DOM

Recognizes pan and pinch with inertia!

Gives developers access to the Windows Phone 8

“touch language”

Allows multiple gestures to be recognized concurrently

Adding touch-first support

demo

• Multiple Columns

• Positioned floats

• Regions

• Grids

• Flexbox

CSS3 for content flow

Using FlexBox for a Start Screen-like experience

demo

Layout Viewport WidthLa

yout

Vie

wport

Heig

ht

Visual Viewport

• Defines the initial size of the layout viewport in CSS pixels

• Beware of using device-width and be prepared to adapt your layout… RWD Anyone?

<META name=“viewport”/>

@-ms-viewport

Sizing your viewport

Adding device adaptation support

demo

• App cache• IndexedDB• History• WebWorkers• WebSockets

Other helpful HTML5 features

When we need more, XAML to the rescue!• Use InvokeScript to call JavaScript functions from

host (C#)webBrowser.InvokeScript(“myFunction", “myArg1”);webBrowser.InvokeScript(“eval”, “document.body.offsetHeight.toString()”);webBrowser.InvokeScript(“execScript”, myScript.ToString());

• Use ScriptNotify to call host (C#) from JavaScript async XAML: <WebBrowser ScriptNotify=“Browser_ScriptNotify” /> JavaScript: window.external.notify(parameter); C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e)

// use e.value to retrieve parameter

But wait, there is more!• Set the default background color

webBrowser.Background=“#ffff00”;

• Easily navigate backward/forwardif (webBrowser.CanNavigateBack) webBrowser.GoBack();if (webBrowser.CanNavigateForward) webBrowser.GoForward();

• Clear local cache and cookiesawait webBrowser.ClearCookiesAsync();await webBrowser.ClearInternetCacheAsync();

• Load files directly from XAPwebBrowser.Navigate(new Uri("test.html", UriKind.Relative))

Native / WebBrowser control communication…and games!

demo

Window Phone 8 web platform

Provides a cross platform, rapid and cost effective way

to build beautiful apps that are delightful to use and interact with

and immerse people to get the most out of their content

while feeling native and integrated with Windows Phone.