1. 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.

3. The Power of Windows 8 Metro Style Apps

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

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

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

7. Tour through a sample app

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

9. 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

10. 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

11. 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.

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

13. 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…

14. 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…

15. Windows Runtime

16. 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

17. 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:///
postMessage
Windows Runtime access
innerHTML validation
Remote source not permitted
Same as browser <iframes>
No Windows Runtime access
W3C API

18. 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

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

20. Process Lifecycle

21. 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

22. 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

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

24. 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

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

28. 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

29. DEV Track Resources
Visual Studio Home Page ::
Somasegar’s Blog ::
Jason Zander’s Blog ::
Facebook ::
Twitter ::

30. Resources Learning TechNet http://northamerica.msteched.com
Connect. Share. Discuss.
Microsoft Certification & Training Resources
TechNet
Resources for IT Professionals
Resources for Developers

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

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

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

34. 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.