mihai tataran - building windows 8 applications with html5 and js
TRANSCRIPT
@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
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!
Twitter: @mihai_tataran
Mihai Tătăran | Avaelgo