Metro style apps using HTML5 from start to finish

1. APP-740T Metro style apps using HTML5 from start to finish Scott Dickens Principal Program Manager Lead Microsoft Corporation

2. Agenda • HTML5 platform overview and fundamentals • Deeper look at the process lifecycle • Harnessing rich capabilities through JavaScript and the Windows Runtime You’ll leave with examples of how to • Get started building Metro style apps in HTML5

3. Building a great Metro style app using HTML, CSS, and JavaScript is simple and fast.

4. Metro style apps in HTML5 Packaging & Runtime Web Platform Process Lifecycle WINRT Platform

5. Packaging and Runtime

6. App on disk to running C:\Program Files\ Applications\... App Container HTML Host Process HTML CSS Running app App package JavaScript App Code Resources Manifest

7. demo Packaging & Runtime Quickly create a simple app Anatomy of an HTML5 app App container and execution environment

8. Metro style apps in HTML5  Packaging & Runtime Web Platform Process Lifecycle WINRT Platform

9. Web platform

10. HTML app platform Internet Explorer App Container HTML Host Process TAB App Code Web Platform App Code WebPlatform WindowsRuntime

11. HTML, CSS, JavaScript • HTML5 • Indexed DB • App Cache • Web Workers • Canvas • SVG • FormData • CSS3 animations & transitions • XHR • FileAPI • Web Sockets • Geolocation • PostMessage

12. Simplified Windows app platform for HTML5 • Single HTML5 DOCTYPE • Standards web, plug-in free • Single window • Access to Windows Runtime

13. Windows Library for JavaScript (WinJS)library for building Metro style apps using JavaScript • Make your apps look and feel great • Matches the Windows Metro design style • Controls for common user experiences • Designed for touch as well as traditional input • Scales across form factors • Build your apps fast and with high quality • Web technologies you’re already familiar with • Modern patterns for responsive, reliable apps • Use interactive design tools

14. demo Platform basics Quickly create a simple sketch app Reusing existing code Create an app bar using WinJS

15. Metro style apps in HTML5   Packaging & Runtime Web Platform Process Lifecycle WINRT Platform

16. Process lifecycle

17. Process state transitions App is not notified when terminated App has 5s to work after suspend message suspending Running Suspended Terminated Low memory Applaunch resuming App is notified when resumed Splash screen Code runs No process Core runs No code runs

18. sessionState in Windows Library for JavaScript (WinJS) can help.Use Windows.Storage.ApplicationData to save app state.

19. Activation Splash Screen Displayed DOMContentLoaded Load App Data, Setup Event Handlers, Initialize UI .onLoad Finish Long Running Setup Activities Activated Load Saved State, Handle Activation Parameters

20. demo App lifecycle events Properly handle app lifecycle events App activation App suspend / resume / terminate.

21. Metro style apps in HTML5    Packaging & Runtime Web Platform Process Lifecycle WINRT Platform

22. Harnessing the power of Windows

24. Blobs, streams, & Windows runtime XHR Image Tag BLOB ? Video Tag File Picker Audio Tag functionimportFile() { varpicker = newWindows.Storage.Pickers.FileOpenPicker(); picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]); picker.pickSingleFileAsync().then(function (file) { //storage file from WinRT, stream of bytes varblobUrl = URL.createObjectURL(file); img.src= blobUrl; }

25. Share contract Source App Target App Data Package

26. demo Harnessing the power of Windows Provide deeper Windows integration and value add Accessing files via the Windows Runtime Share contract basics

27. Metro style apps in HTML5     Packaging & Runtime Web Platform Process Lifecycle WINRT Platform

28. From start to finish Additional app ideas • Settings • Picker target • Snap / rotation • Web service integration • File upload / download

29. Recap + call to action • Do take advantage of the new HTML, CSS, and JavaScript capabilities of the web platform to make your apps richer • Do make your app process lifecycle aware by correctly handling activation and suspend / resume / termination cases • Do use the power of WINRT & web platform interop to create amazing experiences that delight users and enhance the overall system

30. Related sessions • APP-476T Code with confidence: dynamic web content in Metro style apps using HTML5 • APP-512T The web-to-Windows journey: turning your web assets into a Windows app • APP-929T Best practices for writing safe and secure Metro style apps using HTML5 • PLAT-475T Create experiences that span devices • APP-162T Building high performance Metro style apps using HTML5

31. Further Reading and Documentation • Developing basic Metro style apps (JavaScript) • Managing the app lifecycle • Differentiating apps (JavaScript)

32. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

33. © 2011 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.