What web developers need to know when building Metro style apps 9/16/2018 4:15 AM DEV352 What web developers need to know when building Metro style apps Scott Dickens Principal Program Manager Lead Microsoft Corporation © 2007 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.

The Power of Windows 8 Metro Style Apps

5 1 2 3 4 Agenda Enterprise Features Packages & App Model Web Platform WinRT Platform Process Lifecycle 1 2 3 4

2 1 3 APP APP Key App Model Concepts App package Running app Windows Runtime 1 3

APP Packages App package Running app Windows Runtime APP HTML APP CSS APP C:\Program Files\WindowsApps\... JavaScript Resources Windows Runtime Manifest

Tour through a sample app

5 1 2 3 4 Enterprise Features Packages & App Model Web Platform WinRT Platform Process Lifecycle 1 2 3 4

App Execution Environment App package App Container Running app HTML App Host Process HTML APP App Code CSS Web Platform APP C:\Program Files\WindowsApps\... JavaScript Resources Windows Runtime Manifest

Simplified Windows app platform for HTML5 Single consistent platform Single HTML5 DOCTYPE Standards web, plug-in free Single window Access to Windows Runtime HTML5 AppCache XHR FileAPI Animations Transitions WebSockets Geolocation PostMessage IndexedDB WebWorkers Canvas FormData SVG CSS3 JavaScript

9/16/2018 4:15 AM 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 © 2010 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.

5 1 2 3 4 Enterprise Features Packages & App Model Web Platform WinRT Platform Process Lifecycle 1 2 3 4

Windows Runtime App package Running app Windows Runtime APP APP App Container Running app HTML App Host Process HTML APP App Code CSS Web Platform APP C:\Program Files\WindowsApps\... Brokers JavaScript Grant capability Resources Windows Runtime Manifest File System Contracts Devices & Much more…

The Windows Runtime is easy and powerful Powerful Windows access User experience contracts System and device APIs Surfaced naturally in JavaScript Model can be used to write your own native code layer Stored Data Network Access Web Camera User Location Encrypted Data Photo Library USB Drive Home Group And lots more…

Windows Runtime

Dynamic Content from the Web Windows Runtime Stored Data Network Access Web Camera SMS Data User Location Encrypted Data Photo Library IM Web Services Cloud Services USB Drive Home Group And lots more… RSS Feeds Content

Use iframes for untrusted content Local context Trusted content from local package Untrusted content from web or must interact with such Web context ms-appx-web:/// ms-appx:/// http:// http:// postMessage Windows Runtime access innerHTML validation Remote source not permitted Same as browser <iframes> No Windows Runtime access W3C API

Dynamic coding patterns Scenario Approach Load trusted content into an app’s page XmlHttpRequest Filtered with SafeHTML Embed untrusted content <iframe> Isolated from main app Delegate to other app/browser: Launch URL in browser Launch file to its default app handler Launch custom protocol (URI) to default app handler WinRT API: Windows.System.Launcher

5 1 2 3 4 Enterprise Features Packages & App Model Web Platform WinRT Platform Process Lifecycle 1 2 3 4

Process Lifecycle

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

Start Welcome Animations Activation Splash Screen Displayed Activated Load Saved State, Handle Activation Parameters, Set up Extended Splash Screen (optional), Load Page Content Page.ready Load App Data, Setup Event Handlers, Initialize UI, Remove Extended Splash Screen App Animations Start Welcome Animations Windows or Extended Splash Screen Dismissed

5 1 2 3 4 Enterprise Features Packages & App Model Web Platform WinRT Platform Process Lifecycle 1 2 3 4

Line of business apps Capabilities Security / Privacy Offline privateNetworkClientServer internetClientServer enterpriseAuthentication sharedUserCertificates Security / Privacy Protect HBI, MBI, and PII Cryptography WinRT APIs Roaming HTTPS-only connections Offline Structural content Dynamic content

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

Related Content DEV350 Using Windows Runtime and SDK to Build Metro Style Apps DEV354 Building Windows 8 Metro Style UIs DEV366 Building Metro style Apps with HTML and JavaScript WCL203 Windows 8: …Metro style App Deployment in the Enterprise Find Me Later At…Ask the Experts

DEV Track Resources Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/ Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/ Facebook :: http://www.facebook.com/visualstudio Twitter :: http://twitter.com/#!/visualstudio

Resources Learning TechNet http://northamerica.msteched.com Connect. Share. Discuss. http://northamerica.msteched.com Microsoft Certification & Training Resources www.microsoft.com/learning TechNet Resources for IT Professionals http://microsoft.com/technet Resources for Developers http://microsoft.com/msdn

Complete an evaluation on CommNet and enter to win! Required Slide Complete an evaluation on CommNet and enter to win!

MS Tag Scan the Tag to evaluate this session now on myTechEd Mobile

9/16/2018 4:15 AM © 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. © 2009 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.

9/16/2018 4:15 AM © 2009 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.