Jeff Burtoft@boyofgreen

From 5 to 8building Windows 8 Apps with HTML5 and JavaScript

HTML5HACKS.COM

Agenda slide

Introduction to Windows 8Web vs. NativeGetting started with HTML5Converting a Web App to HTML5WinJSWindows APIsWindows Store

Windows 8

A new UI where touch is a first-class citizen along with full mouse-and-keyboard support

New development models built on WinRT, including native support for HTML/CSS/JS, C#/XAML, C++/DirectX

Designed from the chipset up for multiple form-factors – tablets, laptops, desktops & all-in-ones

The Windows Store on every device with a full commerce platform and flexibility

Windows reimagined

Windows 8 Experience• Fast and fluid user experience

Responsive, alive, beautiful

• Immersive and full-screen Focuses attention on your apps

• Touch-first with full keyboard and mouseEnables your choice of interaction

• Web of apps working together Apps are connected to each other and the cloud

• Experience for all PC devices and architectures

• No compromise across new form factors, desktops and laptops

Windows reimagined

New fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

Windows 8 Platform

Metro style Apps

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

Syst

em

Serv

ices

JavaScript(Chakra)

CC++

C#VB

XAML HTML / CSSVie

wM

od

el

Contr

olle

r

Windows Core OS ServicesCore

Web vs. Native

Why Web• Cross Browser/ Cross Platform• Wide distribution over web• Self managed updates• Cross-platform, cross device• Users not required to install

Why Native• Distribution through store• Updates managed through windows store• Platform consistency with Modern UI• Live tiles• Toast notifications• Share/search contracts• Embedded c++ or c# modules• Access to hardware and windows APIs• Locally installed

JavaScript HTML5• Common HTML5 features• Chakra JS engine / Trident layout engine• Platform consistency with Modern UI• Device orientation recognition• Windows 8 tiles and badges• Local file storage/access (limited in web)

Getting Started

With HTML5/JavaScriptApps

Types of HTML5 Apps

HTML5 Instance AppIE10 renderer, IE10 JavaScript Engine in a First ClassApp instance.

C#HTML5C++

Hybrid AppMultiple components of different languages, delivered as aSingle App

New Project

Building blocks of an app package• App Manifest contains all

information needed to deploythe app

• Blockmap contains hashes of all files within the app package

• Signature validates the integrity of the app package

AppXManifest.xml

BlockMap

Signature

Zip Central Directory

Files / Assets

.appx package

App manifest and capabilities• Explicitly declares the app integration endpoints

• File capabilities (music/pictures/videos/documents libraries, removable storage)

• Devices (webcam, microphone, location, sms, proximity); extensible to new device classes

• Network and identity (internet, private network, credentials)• File type associations• App contracts (search, share, etc.)

• Contained in appxmanifest.xml; Visual Studio provides editor

Converting

a Web App to HTML5

Js Libraries• BYOL (Bring Your Own Library)• Special Build of jQuery to avoid build warnings• WinJS library provided for UI, APIs common library

tasks• Can Use Library and WinJS together

Adopt Modern UI, design for touch

WinJS

WinJS provides common library features that are optimized for the Windows 8 Environment

• Promise• Validation• Log• XHR• application (on active event, check point events)• Resources• Namespace• Utilities

• UI animation• UI fragments• UI Pages

Windows APIs

In a Windows Store App, you have access all the features of the web, plus the rich Windows APIs

• Core• Controls• Data and content• Devices• Files and folders• Globalization• Graphics• Helpers

• Media• Networking• Printing• Presentation• Remote Desktop• Security• Social• UI Automation• User interaction

Windows Store

Windows Store

Certified by Windows• ISV validation• Technical certification• Content certification

Installed and updated by end user• Available to the user on other PCs• Rated and reviewed by the user

Q&A