1. The Top 10 Things I Learned About WinRT/HTML as a Silverlight Developer Michael Crump | Telerik

2. Introduction Michael Crump Microsoft MVP, MCPD XAML Evangelist, Telerik @mbcrump http://michaelcrump.net http://blogs.telerik.com/michaelcrump http://linkedin.com/in/mbcrump

3. SO YOU’RE A SILVERLIGHT DEVELOPER…NOW WHAT?

4. #1: Starting with the Fundamentals Bullet 1 Bullet 2 Bullet 3 Bullet 4 Bullet 5 Bullet 6

5. Fundamentals Silverlight Hosted inside a web browser via plug-in. SL Apps can run on Windows/Mac even Linux. You can use C#/VB and XAML to develop applications. XNA – (partial support) Available in SL5. Uses.NET Framework 2.0-4.5 Can use any version of Visual Studio to develop for it. Built primary for mouse/keyboard input. Windows Store Runs on top of WinRT inside Windows 8. Windows Store Applications can only run in Windows 8. You can use C#/VB/C++/XAML or HTML5/JS/CSS3. XNA removed. Direct3D available in C++ apps. Uses.NET Framework 4.5. Can only develop for it using VS2012 and Windows 8. Built primary for touch input. (No Chrome)

6. #2: Application Lifecycle App Launched Running App Terminated App

7. Silverlight User Request Webpage HTML Page tag loads plug-in Plug-in downloads XAP file and reads manifest Create instance of Application Class Fire Application Start up Event Completed page rendering.

8. Windows 8 Running App Running App Suspended App Suspended App suspending Terminated App Terminated App Low Memory Code gets to run No code runs App not running resuming User Launches App Splash screen

9. #3: XML Namespaces You only declare the namespace (never the assembly) and you should use "using" instead of "clr-namespace"

10. #3: XML Namespaces Silverlight <UserControl x:Class="DiggSample.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Digg="clr-namespace:DiggSample"> Windows Store <UserControl x:Class="DiggSample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Digg="using:DiggSample">

11. #3: XML Namespaces Silverlight xmlns:ad="clr- namespace:Microsoft.Advertising.Mobile.UI;assembly=Mi crosoft.Advertising.Mobile.UI" Windows Store xmlns:ad="using:Microsoft.Advertising.WinRT.UI"

12. #3: Code Namespaces (cont…) The majority of changes occur in the UI related classes. System.Windows -> Windows.UI.Xaml

13. #3: Code Namespaces cont. Silverlight using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; Windows Store using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Documents; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media.Imaging; using Windows.UI.Xaml.Navigation; using Windows.UI.Xaml.Shapes;

14. SL5 vs WinRT Comparison by NS

15. SL5 #3: Code Namespaces (cont.) WinRT

16. #4: Making WebRequest WebClient has been removed from WinRT. Instead, you can now use HttpClient or WinJS.xhr. Service calls are now handled asynchronously. Callbacks such as IAsyncResult will need to be re-written.

17. Asynchronous Explained JavaScript is a single-threaded language. Asynchronous APIs in the Windows Library for JavaScript and Windows Runtime are represented in JavaScript as promises. A promise is an object. The most frequently used method on a promise object is then, which takes three parameters: a function to call when the promise completes successfully, a function to call when the promise completes with an error, and a function to provide progress information. WinJS.xhr is a wrapper for XMLHttpRequest that provides an easy way to download web content in your Windows Store app using JavaScript.

18. DEMO WebClient and WinJS.xhr

19. #5: Storage

20. File I/O Silverlight IsolatedStorage – Can do anything. Read/Write a file to Documents Folder, etc via Open/SaveFileDialog or by using Elevated Trust (SL4) Read/Write a file to the local HDD possible via Open/SaveFileDialog or Full Trust (SL5) will not require user intervention. Windows Store IsolatedStorage – Can do anything. Read/Write a file to Documents folder, etc if you indicate it in the application manifest or use File and Folder Picker API. Read/Write a file to the local HDD possible via FilePicker only!

21. DEMO Files Reading and Writing in WinJS

22. #6: Navigation

23. Silverlight <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"> this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

24. Windows 8 WinJS.Navigation.navigate(location, initialState).done( /* Your success and error handlers */); The location to navigate to. Generally the location is a string describing a location, such as "home". A user-defined object that represents the navigation state that may be accessed through state.

25. #7: Controls

26. Silverlight Controls - MIA Calendar ChildWindow DataGrid DataPager DescriptionViewer MultiScaleImage OpenFileDialog RichTextBox SaveFileDialog TabControl TabItem TreeView Validation WebBrowser

27. WinJS controls SettingsFlyout Flyout Appbar Flipview SemanticZoom Listview Menu Rating Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.) DatePicker

28. DEMO WinJS Controls

29. #8: Animations

30. Silverlight Animations Animation Easing allows you to apply built in animation functions to your Silverlight controls. The result is a variety of animation effects that make your controls move in a more realistic way.

31. WinJS Animations Animation Library – FREE! http://bit.ly/IO3oVRhttp://bit.ly/IO3oVR Theme Transitions – animate loading, unloading or changing location on the screen. Theme Animations – build to run on user interaction and you must trigger them. You can create custom animations as well.

32. DEMO WinJS Animations

33. #9: Freebies

34. Charms Charms are a way of preparing Windows 8 for an ultimate integration with natural user interface (NUI) technology, which allows you to have everything at your fingertips without going through a whole lot of effort.

35. Contracts Windows Store apps use contracts and extensions to declare the interactions that they support with other apps and with Windows. Search contracts opens up your application to intregrate with Windows search. Share contract allows your app to share content with other apps. Many others exist and can be found at http://bit.ly/K7hd2B.http://bit.ly/K7hd2B

36. #10: Monetizing

37. Windows Store Sell your application in the Windows Store. Designed for Discovery. Reach – Global (231 markets) Enterprise Flexible business model (free, paid or trial) Microsoft AD SDK out now.

38. Windows Store Registration Fee is $49 USD ($99 for Companies) Share up to 80% of the revenue generated from app sales.

39. Recap 1.Starting with the Fundamentals – A,B,C’s 2.Application Lifecycle 3.XML/Code Namespaces 4.Making WebRequest - Async 5.Storage – Files 6.Navigation – Easier than URI 7.Controls – New ones Added 8.Animations – Baked into WinRT 9.Freebies – Charms (Searching and Sharing) 10.Monetizing – With the Microsoft Store

40. Resources Main starting point: http://dev.windows.com/http://dev.windows.com/ Silverlight 5 vs.WinRT comparison by namespace - http://bit.ly/I4eWTthttp://bit.ly/I4eWTt See my article in Visual Studio Magazine where I ported a SL2 app to a Windows Store App. http://bit.ly/x2YEI4http://bit.ly/x2YEI4 Telerik RadControls for Windows Store – HTML http://bit.ly/NUV05Uhttp://bit.ly/NUV05U

41. Thank you! Michael Crump | Telerik @mbcrump http://michaelcrump.net http://blogs.telerik.com/michaelcrump http://linkedin.com/in/mbcrump