Windows Store apps with HTML + Facebook integration

Jaime Rodriguez @jaimerodriguezhttp://jaimerodriguez.com

Windows Store apps can be built using standards-based HTML, CSS and JavaScript

HTML platform is built on IE 10

http://aka.ms/ieprogress

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

Web developer must knows… 1. Apps != websites

2. User confidence & context

3. WinJS

Apps != Sites Navigation App Model OS integration Off-line & disconnected Trust ....

Creating user confidence

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

Creating user confidence

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

Two hostsTwo contexts

HTML and DOM changes http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx

No plug-ins

Host differences

It is still the same rendering and JS engine!!

Two contexts

http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx

Feature Local context Web context

Windows Runtime Yes No

Windows Library for JavaScript Yes Partial

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

No Yes

window.close Yes No

Cross-domain XHR requests Yes No

WinJS

Windows Library for JavaScript

• Style sheets• Core (promises, class, namespace, etc.)• Utilities• App model• Data model (binding, lists, etc.)• Controls model• Animations• Personality controls

A collection of toolkits to make building Windows 8 apps fast and easy

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

Let’s code.. FINALLY!!!

Facebook must knows... 1. WebAuthenticationBroker

2. Async & Promises

3. WinJS.xhr

THANKS!

Jaime Rodriguez Carrete (on Facebook) @jaimerodriguezjaimer@microsoft.com

References Hands-on-labs for cookbook

http://aka.ms/windows8campinabox

My skydrive for the hackathon http://aka.ms/win8fbhack

Windows 8 Dev samples http://code.msdn.microsoft.com/windowsapps/

For Windows 8 design and developer content, please visit the Windows Dev Center.

<your twitter handle>| <your email>@microsoft.com

http://dev.windows.com

© 2012 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 presentation. 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.