Windows 8: XAML or HTML? Karl Davies-Barrett CEE DPE Tech Lead, Microsoft 

Great experience across all hardware What ever language you write the apps in …

Demo Contoso Cookbook

Windows 8 Platform Metro style Apps HTML JavaScript C C++ C# VB Desktop Apps Win32. NET / SL Internet Explorer Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media System Services JavaScript (Chakra) C C++ C# VB XAMLHTML / CSS View Model Controller Windows Core OS Services Core

Metro style application APIs Fundamentals Application Services Threading/ Timers Memory Management AuthenticationCryptographyGlobalization Devices Geolocation PortableSensorsNFC User Interface SVGTilesInputAccessibilityPrinting HTML5/CSSXAMLDirectXControlsData Binding Communications & Data Memory Management XMLNetworkingSMS Notifications Streams ContractsLocal & Cloud StorageWeb Media PlaybackCapturePlayTo Visual Effects

Language projections Windows Runtime Object (or Component) Written in C++, C#, VB Windows Metadata C++ App Projection CLR C#/VB App Projection HTML App Chakra Projection

Aync & Promises

Asynchronous programming is becoming the norm

Synchronous vs. asynchronous

Asynchronous programming models Windows Runtime: IAsyncOperation.NET Framework: Task Javascript: Promises All are objects representing “ongoing operations” All use callbacks to signal completion of operation Callbacks turn your code inside out

Asynchronous methods automatically transform normal code into a callback state machine

Asynchronous methods… Are marked with new “async” modifier Must return void or Task Use “await” operator to cooperatively yield control Are resumed when awaited operation completes Allow composition using regular programming constructs Feel just like good old synchronous code!

Synchronous

To Asynchronous

Windows Library for JavaScript (WinJS) A 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

What’s in WinJS? Tons of great stuff! Helpers for Namespaces, Constructor Definition Promises App Model Navigation Fragments Binding Controls Animations Templates Utilities Default CSS Styles

App model App starts like any web page - HTML page loads HTML page loads it’s files WinJS script & styles Your app’s scripts & styles Your code wires up to app lifetime events Start the app … and events happen

Async … is everywhere in JavaScript … with different models Callback parameter setTimeout(function () { … }, 500); Attached event handler var img = document.querySelector("img.loading"); img.addEventHandler("load", function () { imageLoaded(); }, false); img.src = " Is everywhere in WinRT – you can’t block! Major JS libraries have an established async pattern

Promises Object that is a promise for a value later Implemented by jQuery, dojo, node.js, etc. Hook up to completion with then() method then(completion, error, progress) then() returns another promise Or just say you are done() Implementation in base.js: WinJS.Promise Common.js promises/A spec

I Promise you some XML …

Example: Completion Handling WinJS.xhr({ url:" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); });

Example: Error Handling WinJS.xhr({ url:" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); },function (ex) { reportXhrError(ex); } );

Demo Async and Promises

When do apps run?

When Do Apps Run? Windows 8 System manages app lifetimeWindows 7 User manages app lifetime

Process Lifetime Walkthrough Running Terminated … Suspended App terminated under memory pressure without notification Apps suspend after a short delay Apps resume instantly from suspend

Introducing Suspend System resources focused on the app that the user is interacting with in the foreground Inactive apps have no impact on battery life or responsiveness, they are suspended by the OS Enables instant switching between apps!

Termination System needs more memory User switch occurs User closes the app System shutdown Apps crash Apps do not get notified when they are getting terminated

Registering for Suspend and Resume is Easy //Register for the Suspending event and call suspendingHandler when received Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", suspendingHandler); //Handle the suspending event and save the current user session using WinJS sessionState function suspendingHandler(eventArgs) { //We are getting suspended } //Register for the Resuming event and call resumingHandler when received Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", resumingHandler); function resumingHandler() { //We are getting resumed, in general do nothing }

Registering for Suspend and Resume is Easy

Saving/Restoring User Session State Only save and restore user session metadata Where the user is in an app HTML/JS Use WinJS.Application.sessionState object Property bag that automatically serializes to disk during suspend Reloads property bag from disk on activation Smart about not reloading state if app crashed XAML and C++ SuspensionManager class available in SDK samples does the same as sessionState in HTML/JS

Best Practices for Saving and Restoring State

Demo Saving State

Search n Share

Search Anatomy 1.Search box is scoped to the main app on screen 2.Query suggestions provided by the main app on screen Autocompletes to terms for which the app has search results 3.List of installed Metro style apps that have implemented the search contract

Search Anatomy 4.Result suggestions provided by the main app on screen Must include a thumbnail and title Indicates a strong or exact match result Takes users directly to the details of the result

Demo Implementing Search

Sharing From Source to Target Share Target AppShare BrokerSource App DataPackage lives in source application

Data Package Plain textFormatted textURIHTMLImagesFilesCustom data formats

Demo Share Source/Share Target

You can write your own Windows Runtime components in C# or Visual Basic

Your Managed Code Traditional Windows API Manually Generated Interop Code

You should build a Windows Runtime component when you want your code to be used from JS, C++, C# and VB

Only the public types and members in your managed Windows Runtime component project need to follow the simple rules

API signatures must only use Windows Runtime types Structs can only have public data fields Inheritance can only be used for XAML controls, all other types must be sealed Only supports system provided generic types

public sealed class ManagedLibrary { public List GetNumbers() { List numbers = new List (); numbers.AddRange(new int[] {0,1,1,2,3}); return numbers; } Authoring Collection Code

public sealed class ManagedLibrary { public IList GetNumbers() { List numbers = new List (); numbers.AddRange(new int[] {0,1,1,2,3}); return numbers; } Authoring Collection Code

.NET automatically maps collection interfaces to their Windows Runtime equivalent IReadOnlyDictionary IMapView IEnumerable IIterable IList IVector IReadOnlyList IVectorView IDictionary IMap

Extension methods bridge the gap between Windows Runtime and managed code

Streams Code Sample FileOpenPicker picker = new FileOpenPicker(); picker.FileTypeFilter.Add("*"); StorageFile file = await picker.PickSingleFileAsync(); Windows.Storage.Streams.IInputStream inputStream = await file.OpenForReadAsync(); System.IO.Stream stream = inputStream.AsStream(); System.IO.StreamReader reader = new StreamReader(stream); string contents = reader.ReadToEnd();

Visual Studio has built-in support for managed Windows Runtime component projects

Your Managed Code Windows 8 API Windows Runtime

Demo Building Windows Runtime Components in C#

QUESTIONS? After the session please fill out the questionnaire. Questionnaires will be sent to you by and will be available in the profile section of the NT Conference website Thank you! 