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

[email protected]

www.codecamp.ro

mailto:[email protected]



http://www.codecamp.ro/



About

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

– Custom software development

– Consulting / training

• Microsoft MVP

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


http://itcamp.ro/


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


Agenda

• Basic Metro apps

• WinJS, Controls

• Windows 8 platform


HTML 5 and Javascript

• HTML5

• Indexed DB

• App Cache

• Web Workers

• Canvas

• SVG

• FormData


Metro apps

• Only the HTML5 DOCTYPE

• Single window

• All the device’s screen

• Access to Windows Runtime


Metro apps: runtime

App Container

HTML Host Process

App Code


Demo

• Simple app from scratch

• Anatomy of an HTML5 app

• Packaging and execution environment


Agenda


• WinJS, Controls



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


UI Controls

• Designed for touch, mouse, keyboard

• Everyday widgets

• Text editing

• Scrolling content

• Presenting data

• Commanding surfaces


Everyday widgets - custom styled


Text editing controls - behaviors


Presenting data controls


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>


Demo (SDK) • UI Animation Sample

• ListView interaction model sample


Agenda


• WinJS, Controls



Process states

App launch

Splash screen


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


Termination

• System needs more memory

• User switch occurs

• System shutdown

• Apps crash

• Application is not notified


Saving state

• sessionState in WinJS

• Windows.Storage.ApplicationData to save application state


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


Charms

• Some kind of Start Bar

• Ideal manner to use device’s settings

• Or any other app specific settings


Share contracts

• Predefined contracts in Metro


Demo • App Bar (from SDK)

• Windows 8 application states

• Charms (Printing; Custom: Application Setting)

• Share contracts (Share Dest app from SDK)


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)


Demo • Web Workers


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/

http://www.buildwindows.com/

http://www.buildwindows.com/

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




http://msdn.microsoft.com/en-us/windows/apps/br229516/




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


Misc

• ITCamp 2012: www.itcamp.ro

• Cursuri / Workshops

– Publice

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

http://www.itcamp.ro/


?


Thank you!

[email protected]

Twitter: @mihai_tataran

Facebook

Mihai Tătăran | Avaelgo




http://www.facebook.com/profile.php?id=100001059819535

Mihai Tataran - Building Windows 8 Applications with HTML5 and JS

Technology

Transcript of Mihai Tataran - Building Windows 8 Applications with HTML5 and JS