mihai tataran - building windows 8 applications with html5 and js

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Building Windows 8 Applications with HTML5 and JS

Mihai Tătăran General Manager, Avaelgo

Microsoft MVP

mihai.tataran@hpc-consulting.ro

www.codecamp.ro

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

About

• Owner, GM – Avaelgo (ex H.P.C. Consulting)

– Custom software development

– Consulting / training

• Microsoft MVP

• .NET community: www.codecamp.ro http://itcamp.ro

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Objectives

• Download and play with Windows 8 and VS 2011 Previews and SDK

• Understand what you need to add upon your HTML 5 skills to build Windows 8 Metro apps

– Migrating apps

– New apps

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Agenda

• Basic Metro apps

• WinJS, Controls

• Windows 8 platform

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

HTML 5 and Javascript

• HTML5

• Indexed DB

• App Cache

• Web Workers

• Canvas

• SVG

• FormData

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Metro apps

• Only the HTML5 DOCTYPE

• Single window

• All the device’s screen

• Access to Windows Runtime

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Metro apps: runtime

App Container

HTML Host Process

App Code

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Demo

• Simple app from scratch

• Anatomy of an HTML5 app

• Packaging and execution environment

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Agenda

• Basic Metro apps

• WinJS, Controls

• Windows 8 platform

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

WinJS

• The library for Metro style apps

• Matches the Windows Metro design style

• Designed for touch as well as traditional input

• Scales across form factors

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

UI Controls

• Designed for touch, mouse, keyboard

• Everyday widgets

• Text editing

• Scrolling content

• Presenting data

• Commanding surfaces

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Everyday widgets - custom styled

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Text editing controls - behaviors

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Presenting data controls

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

ListView data templating (HTML)

<div data-win-control="WinJS.Binding.Template" id="myTemplate" >

<div style="width: 110px; margin: 10px">

<img data-win-bind="src: picture" style="height: 60px; width: 60px" />

<input type="button" data-win-bind="value: buttonText" />

</div>

</div>

<div height="400" data-win-control="WinJS.UI.ListView" id="listview1" data-win-options="{dataSource: myData, itemRenderer: myTemplate}">

</div>

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Demo (SDK) • UI Animation Sample

• ListView interaction model sample

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Agenda

• Basic Metro apps

• WinJS, Controls

• Windows 8 platform

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Process states

App launch

Splash screen

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Suspend state

• No CPU, Disk or Network consumed

• All threads are suspended

• Apps remain in memory

• Apps instantly resumed from suspend when brought to foreground

• Exception: Background tasks

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Termination

• System needs more memory

• User switch occurs

• System shutdown

• Apps crash

• Application is not notified

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Saving state

• sessionState in WinJS

• Windows.Storage.ApplicationData to save application state

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Saving / restoring state

Scenario You should….

User is using your App Save user data incrementally

App switched away from (Suspending)

Save where the user is – what screen they are on, for example

Not running App launched by user (Activated)

Bring the user back and restore their session as if they never left

Suspended App launched by user (Resuming)

Do nothing

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Charms

• Some kind of Start Bar

• Ideal manner to use device’s settings

• Or any other app specific settings

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Share contracts

• Predefined contracts in Metro

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Demo • App Bar (from SDK)

• Windows 8 application states

• Charms (Printing; Custom: Application Setting)

• Share contracts (Share Dest app from SDK)

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Web Workers(*)

UI Thread

Window Object

Objects Attached To The Window

(XMLHttpRequest, Navigator, Location

Indexed Database, Web Sockets)

Document Object (HTML Elements, CSS)

JavaScript Engine

Web Worker

JavaScript Engine

Worker Global Scope Object

Objects Attached To The Window (XMLHttpRequest, Navigator,

Location Indexed Database, Web Sockets)

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Demo • Web Workers

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Resources

• Build Conference: http://www.buildwindows.com/

• Metro Style applications resources: http://msdn.microsoft.com/en-us/windows/apps/

• Windows 8 Developer Preview: http://msdn.microsoft.com/en-us/windows/apps/br229516/

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Objectives

• Download and play with Windows 8 and VS 2011 Previews and SDK

• Understand what you need to add upon your HTML 5 skills to build Windows 8 Metro apps

– Migrating apps

– New apps

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Misc

• ITCamp 2012: www.itcamp.ro

• Cursuri / Workshops

– Publice

– Azure, HTML 5, ASP.NET MVC, Silverlight, Entity Framework, etc

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

?

@itcampro / #itcampro Premium conference on Microsoft’s Dev and ITPro technologies

Thank you!

Mihai.tataran@hpc-consulting.ro

Twitter: @mihai_tataran

Facebook

Mihai Tătăran | Avaelgo