Building Windows Store Apps with XAML or HTML

1. Building Windows Store Appswith XAML or HTML Ilja TšahhirovSkype

2. Agenda WinRT supported languages UI for .NET developer UI for JavaScript developer Components authoring

3. Language - alternatives .NET ( C#/VB) JS C++ Combined • UI (JS/C#/VB/C++) + WinRT component(C#/VB/C++)

4. Windows Runtime Architecture Language Support (CLR, WinJS, CRT) Windows Store app Language Projection Windows Metadata & Namespace UI Pickers Controls Media Web Host (HTML, CSS, JavaScript) XAML Storage Network … Windows Runtime Core Runtime Broker Windows Core

5. * Pick a language you are most comfortable withBefore using combined approach, understand why

6. WinRT for the .NET Developer

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

8. Key Aspects Lost of knowledge can be re-used Process lifecycle considerations Battery life considerations WinRTAPIs Async

9. You already have the skills to build Windows Store apps with C# and VB

10. Application lifecycle Running Suspended Terminated

11. Battery life Use system resources with care (e.g. threads vsasync) Background activity – limit to absolute minimum (if possible – don’t do anything at all) Background activity resource quotas

12. Windows has always provided features for developers to build upon

13. Windows hasn’t always made it easy for developers to use these features from C# or VB

14. The C# code you have to write today… [DllImport("avicap32.dll", EntryPoint="capCreateCaptureWindow")]static extern intcapCreateCaptureWindow(stringlpszWindowName, intdwStyle, intX, intY, intnWidth, intnHeight, inthwndParent, intnID); [DllImport("avicap32.dll")] static extern boolcapGetDriverDescription(intwDriverIndex, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszName, intcbName, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszVer, intcbVer); // more and more of the same

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

16. The C# code you get to write on Windows 8 using Windows.Media.Capture;varui = newCameraCaptureUI();ui.PhotoSettings.CroppedAspectRatio = newSize(4, 3);varfile = awaitui.CaptureFileAsync(CameraCaptureUIMode.Photo);if(file != null) {var bitmap = newBitmapImage() ; bitmap.SetSource(awaitfile.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap;}

17. Your Managed Code Windows Runtime Windows 8 API

18. demo Photo capture application

19. Windows Runtime Architecture Language Support (CLR, WinJS, CRT) Windows Store app Language Projection Windows Metadata & Namespace UI Pickers Controls Media Web Host (HTML, CSS, JavaScript) XAML Storage Network … Windows Runtime Core Runtime Broker Windows Core

20. Using the Windows Runtime feels natural and familiar from C# and Visual Basic

21. Almost everything maps directly between the Windows Runtime and .NET Primitives(strings, numbers, etc) Interfaces Enums Structs Delegates Classes Constructors Static Members Methods Properties Events

22. Most differences between Windows Runtime and .NET are hidden

23. .NET automatically maps collection interfaces to their Windows Runtime equivalent IEnumerable<T> IIterable<T> IList<T> IVector<T> IReadOnlyList<T> IVectorView<T> IDictionary<K,V> IMap<K,V> IReadOnlyDictionary<K,V> IMapView<K,V>

24. Async

25. Asynchronous programming is becoming the norm

26. Synchronous vs. asynchronous var data = DownloadData(...); ProcessData(data); STOP DownloadData ProcessData varfuture = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data)); DownloadDataAsync ProcessData

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

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

29. Asynchronous methods in .NET Are marked with new “async” modifier Must return void or Task<T> 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!

30. demo Asyncin WinRT

31. WinRT for JavaScript developer

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

33. JavaScript Windows Apps • In essence – Web app hosted locally • Hosted at WWAHost.exe • Under certain circumstances parts of the app can be executed under different host • Certain WinRT features (available under .NET / C++) unavailable

34. From IE10 web app to Windows app • Minor API differences http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx • Different host • No plug-ins in Windows apps • Trust level differences (local and web context) • http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx • UX [recommended] • Windows 8 features [recommended]

35. Context in HTML/JS Windows apps There are ways to communicate across contexts, ways to give websites access to some web standards features and ways to skip automatic filtering within a function.

36. demo Visual Studio 2012

37. WinRT components authoring

38. You can build managed WinRT components that project into C++ or JavaScriptby following a few simple rules

39. Only the public types and members in your managed WinRT components need to follow these simple rules

40. Structs can only have public data fields API signatures must use only Windows Runtime types All types must be sealed (excempt XAML controls) Only supports system provided generic types

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

42. demo Building Windows Runtime Components in C#

43. Recap

44. You already have the skills to build Windows Store apps with JS, C# and VB

45. For the UI pick a language you are the most comfortable with*Use AsyncIf needed, can build your own Windows Runtime components use them from the UI