1. Windows 8: XAML or HTML? Karl Davies-Barrett CEE DPE Tech Lead, Microsoft  karldb@microsoft.com

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

3. Demo Contoso Cookbook

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

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

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

7. Aync & Promises

8. Asynchronous programming is becoming the norm

9. Synchronous vs. asynchronous

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

11. Asynchronous methods automatically transform normal code into a callback state machine

12. 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!

13. Synchronous

14. To Asynchronous

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

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

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

18. 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 = "http://www.example.org/someImage.jpg"; Is everywhere in WinRT – you can’t block! Major JS libraries have an established async pattern

19. 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 http://wiki.commonjs.org/wiki/Promises/A

20. I Promise you some XML …

21. Example: Completion Handling WinJS.xhr({ url:"http://www.example.org/somedata.json" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); });

22. Example: Error Handling WinJS.xhr({ url:"http://www.example.org/somedata.json" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); },function (ex) { reportXhrError(ex); } );

23. Demo Async and Promises

24. When do apps run?

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

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

27. 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!

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

29. 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 }

30. Registering for Suspend and Resume is Easy

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

32. Best Practices for Saving and Restoring State

33. Demo Saving State

34. Search n Share

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

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

37. Demo Implementing Search

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

39. Data Package Plain textFormatted textURIHTMLImagesFilesCustom data formats

40. Demo Share Source/Share Target

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

42. Your Managed Code Traditional Windows API Manually Generated Interop Code

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

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

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

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

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

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

49. Extension methods bridge the gap between Windows Runtime and managed code

50. 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();

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

52. Your Managed Code Windows 8 API Windows Runtime

53. Demo Building Windows Runtime Components in C#

54. QUESTIONS? After the session please fill out the questionnaire. Questionnaires will be sent to you by e-mail and will be available in the profile section of the NT Conference website www.ntk.si.www.ntk.si Thank you!  karldb@microsoft.om