Windows 8The JavaScript Story

Clint EdmonsonDeveloper EvangelistMicrosoft

@clintednotsotrivial.net

AgendaPlatform overviewWindows Library for Javascript (WinJS) Application architecture

TypeScript sneak peek

Platform

Microsoft is a devices and services company.Steve Ballmer, October 2012

A new UI that lets people work the way they want – both touch and mouse-and-keyboard delight

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

Designed from the chipset up so people can choose and seamlessly use the devices they love – whether it’s a portable tablet or an amazing all-in-one

Windows reimagined

Windows Store on every device creates customer confidence in apps, new opportunity for developers

Windows Store Apps

Content before chrome – Your app front-and-center

Users can easily share content from your app

Live Tiles draw users back into your app

Users can search within your app from anywhere

Windows Store Apps: Apps Take Center Stage

Search Share

Familiar to web developers

Use jQuery, Dojo, Knockout, or any other JS toolkit you love today

Hardware accelerated web platform delivers fast and fluid apps

Full access to the Windows Runtime directly from JS

You can use HTML, CSS and JavaScript to create amazing native Windows 8 apps!

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

od

el

Contr

olle

rC

ore Windows Core OS Services

Communication

& Data

Application Model

Devices & Printing

Graphics & Media

Syst

em

Serv

ices

Core

App Execution Environment

Core

OS

Runtime

Broker

Direct API calls

Brokered API calls

App Container + Signed & Validated code

Your App

WinRT APIs

Process.exe

AppXManifest

lap around Windows 8demo

WinJS

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

Web technologies you’re already familiar with

Modern patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Windows Metro 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

WinJSHelpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

WinJS Toolkits

Light StyleSheet

WinJS.Navigation Functions

local (storage)

roaming (storage)

WinJS.Application.sessionState

temp(storage)

Application Events

Namespace definition utilitiesWinJS.Namespace

Keyboard Key Enumeration

WinJS.UI.Animation

helpers

Coordinate Conversion

HTML/DOM UtilsWinJS Element

Attributes

Element Selection/Querying

Dark StyleSheet

Fragment loading and rendering

WinJS.UI.Fragments

WinJS.Promise

WinJS.PromiseStateMachine

Class definition and inheritance

WinJS.Class

Localized String Utilities

Support for WinJS declarative model (supportedForProc

essing)

Logging UtilsWinJS

WinJS.xhrWinJS.ErrorFro

mName

ValidationWinJS

Data-win-res processing

WinJS.UI.Pages.PageControl

WinJS.UI.Pages.IPageControlM

embers

Animation Library

WinJS.Binding.Template

Data Binding (as, bind) Mixins

WinJS.Binding.List

List Projections

Conversions

Support for declarative databinding

ListView

FlipView

Rating

Flyout SettingsFlyout

Semantic Zoom

Tooltip

AppBar

Menu GridLayout ListLayoutCustom Layout

Interface

TabContainer

HTMLControl

ToggleSwitchDatePickerTimePicker

ViewBox

IZoomableView

Animation System Management

Controls Utilities (

setOptions)

Menu Command

DataSourceStatus

IListBinding IListDataSourceIListDataAdapte

rIListNotification

Handler

StorageDataSource

VirtualizedDataSource

Support for declarative model

(processAll)

Error handling

classesnamespacesdata bindingpromises

demo

Prefer your own library? Go for it! Mix & match works fine

Understand our webcontext & sandboxing model

Adhere to the Metro UI and Windows personality

Applications

An app is different from a website..

App model NavigationOS integrationPersistence Trust

…differences from web environment

Styling changesWindows Runtime accessLocal and Web contextIE10 DOCMODE onlyms-appx / ms-appx-web protocols

Mostly the same, but there you need to consider…

A matter of context…

OS

User data Devices Communications Handlers Tiles Cryptography … …

Windows Store app (WWAHost.exe)Local context

Web context

AppData

Local Temp Roaming

Internet Explorer

Web context

WinRT APIs

A matter of trust…Feature Local context Web context

Windows Runtime Yes No

Windows Library for JavaScript Yes Partial

JavaScript URIs(attribute="javascript:code")

No Yes

Data URIs ("data:" ) for fonts No Yes

External script references (<script src="http://*" /> ) No Yes

window.close Yes No

Cross-domain XHR requests Yes No

Single page architecturedefault.html + default.js

<div id=“contenthost” … />

< div id=“appbar” … />

pagespages

pagex.html + pagex.js(injected into DOM as navigation occurs)

Process State Transitions

RunningApp

SuspendedApp

Suspending Terminated

AppLow Resources

Resuming

Data storage Apps automatically get a private storage folder upon

installation WinJS.Application.sessionState

In-memory global application data structure Automatically serialized to the file system and reloaded when app is reactivated

Windows.Storage.ApplicationData LocalFolder LocalSettings RoamingFolder RoamingSettings TemporaryFolder

Window.indexedDB Key-value pair based database engine Can handle large amounts of data

structurenavigationapp statescontracts// storage

demo

TypeScript

TypeScript at a glance Language for application-scale JavaScript development.

Typed superset of JavaScript that compiles to plain JavaScript.

Offers classes, modules, and interfaces to help you build robust components.

Any browser. Any host. Any OS. Open Source.

TypeScript sneak peekdemo

Resources

Resources Start building the next generation of apps – Windows 8, WP8,

Webhttp://clint.ms/NextGenerationApps

Windows 8 Sample Library http://code.msdn.microsoft.com/windowsapps

TypeScripthttp://www.typescriptlang.org/