Building Windows Universal Apps for Phones and Tablets

We’ll perform a quick lap around Visual Studio 2013 and the new Windows Universal Apps, build our first app using XAML & C#, and debug it with Windows 8.1 and the Windows Phone Emulator. We'll look at the same tooling for HTML5 & JavaScript apps. We’ll then explore the converged WinRT API services and features, app bars, Live Tiles, etc. The converged Windows Platform is more efficient and far-reaching than ever. Come learn how to build mobile apps for hundreds of millions of Windows device users.

Transcript

1. Ryan Joy @atxryan Developer Evangelist @ Microsoft Building Universal Windows Apps for Phones and Tablets talk2me
2. Who am I? • Web developer / UX developer • Developer Evangelist @ Microsoft • Local meetup organizer. Come talk to me about Refresh Austin, Austin Windows App Developers, Austin Geek Lunch, Austin Web Design & Developer Meetup. • Loves JavaScript • Find me on Twitter at @atxryan or ryanjoy.com
3. Raise your hand if you’ve built either a Windows Store or Windows Phone App? …an iOS or Android app? …a web application?
5. What are Universal Projects?
6. Windows Store Projects Windows Phone Projects
7. Universal Projects
8. 8 Delivering 1 Windows for developers The ‘blue wave’ of platform updates is a monumental expansion of capabilities and reach for Windows devs Windows brings apps to life Windows provides apps with more ways to engage users, both on device and across all of their Windows screens Design once to engage everywhere Developers can use universal Windows apps to design an one app that can target every Windows screen Build faster with Visual Studio New shared projects for Universal Windows apps allow developers to share as much or as little between Windows and Windows Phone projects
9. Universal apps Universal apps enable building applications on the converged Windows 8.1 and Windows Phone 8.1 platforms Supported for C#, C++ and JavaScript Create universal apps using project templates, migrating Windows 8.1 / Windows Phone 8.1 apps
10. Windows Phone 8.1 App Windows 8.1 App XAML View Phone UI XAML View Windows UI Shared Code, Images, Files WinRT ‘Universal’ is still two apps, sharing more
11. API convergence across the Windows platform The Windows Runtime (WinRT) is the shared runtime and API space used by store apps across the Windows platform (phone and client) 11 Common WinRT APIs Phone-specific WinRT APIs Windows-specific WinRT APIs Dramatic convergence in 8.1 • Goal is 100% convergence for dev scenarios • In 8.0, we had ~30% API convergence • With 8.1, we move well past 90%+ convergence
12. Easier to developer on a converged platform | | Legend
13. Development of native Apps for WP 8.1
14. Apps come to life on Windows • Converged background task model • Background agent improvements • New trigger-based execution options • Common data format for Toast notifications • One Microsoft push notification service • Common Live Tile template mechanism • Configuration data can roam with the user
17. Universal Windows apps (linked apps) Apps for Phone, Tablet and PC* Free * On Windows Phone and Windows 8.x devices only
18. Link Windows Store and Windows Phone apps to create a universal Windows app
19. App name reservation for Windows Phone
20. App name reservation for Windows 8.X
21. Publish for both with one registration
22. Consolidated Pricing
23. More details about shared entitlements • Any two apps can be linked (e.g. WP7 <-> Windows 8) • Once linked, they cannot be separated • Both app price and durable IAP are shared (as long as they use same name, same type, same duration, same dev account) • Icon shows in WP 8.1 and in Windows 8 (May update) • Situations where icon will not show: app is exclusive, app not published in the country, app has hardware requirements not available in other device… • Adding roaming application data requires WP8.1, up to 100K stored in roaming folder. Not for real time sync, it is synced by the OS depending on many factors (battery available, Wi-Fi, apps being used..) • Apps built using the new Visual Studio template can be linked or not be linked, depends on the developers, this is independent • App and IAP pricing strongly recommended be the same in both stores, else will drive weird user behavior
25. Prerequisites Visual Studio 2013 Visual Studio 2013 Update 2 Have MSDN? Go to MSDN subscriber downloads or get the express edition of VS 2013 w/ Update 2 @ http://go.microsoft.com/fwlink/p/?Li nkId=389848
26. Shared projects • Allow sharing source between converged apps • Don’t have any binary output • Supports all item types • Code files .cs, .js, .cpp, .h • XAML • Images .png, .jpg… • RESW • XML etc…
27. Going from a Windows Store app to a Universal App
28. Convert Project to Universal
29. Switching startup projects • Quick and easy way to change startup projects using debug target dropdown • Supported for all Store platforms • Enabled if you have more than one application project in the solution
30. Code editing experience • Intellisense warnings for platform specific APIs • Switch project context using navbar
32. You can tailor the design to each device
34. Converged controls What does that really mean? 80% exact same 20% custom Common Signature Optimized DatePicker TimePicker CommandBar AppBar Button CheckBox RadioButton ProgressBar Slider ToggleSwitch Hub Pivot ListView GridView
35. ‘Primitives’ - same • Layout: Panel, StackPanel, Grid, Border • Buttons, Slider, ToggleSwitch, CheckBox, RadioButton, ProgressBar • TextBox/TextBlock • Shapes/Path
37. ‘Primitives’ – same API, tailored behavior • Hub • AppBar/CommandBar • Date/Time Pickers and List Pickers • ListView • Multi-select; containers, swipe selection • Flyouts • Media • Ads SDK*
40. Device-specific APIs • Windows • SearchBox • SettingsFlyout • Windows Phone • Pivot • AutoSuggestBox • ContentDialog • Maps • System Chrome • Progress area, in-call UI
41. Why custom? Hub control Windows Phone 8.1 Hub control on Windows 8.1
42. Provides a common layout coordinate system that extends along the x and y axis into infinity, allowing you to scale up • Physical screen size determines how much of this canvas is available • Works for all screen sizes across the entire Windows platform Easier to design once & engage across multiple resolutions 10” tablet 7” tablet 6” 5” 4.5” Infinite virtual canvas 166 logical DPI
43. common, same rendering Button Slider ToggleSwitch ProgressBar etc (many more) common, different content Hub ListView GridView etc. common, different rendering DatePicker TimePicker CommandBar AppBar etc. unique SearchBox Pivot ContentDialog AutoSuggestBox etc. Controls on Windows+Phone 8.1
45. Windows Phone 8.1 App Windows 8.1 App XAML View XAML UI XAML View XAML UI Logic Logic Data Data ? Logic Data
47. Portable Class Libraries I compile just once and know it works on all platforms Shared Projects I can easily include platform-specific code under #if or partial classes New! Improved!
48. C#: WINDOWS_APP and WINDOWS_PHONE_APP #if WINDOWS_PHONE_APP Windows.Phone.UI.Input.HardwareButtons.BackPressed += this.HardwareButtons_BackPressed; #endif C++: WINAPI_FAMILY_PC_APP and WINAPI_FAMILY_PHONE_APP #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP _backPressedEventToken = HardwareButtons::BackPressed += ref new EventHandler<BackPressedEventArgs^>(this, &NavigationHelper::HardwareButton_BackPressed); #endif Conditional constants
50. handy tip (1/3) The Universal project structure is a way for you to make sense of your shared and non-shared content. The contents of your Shared project simply get merged in with your platform-specific projects as part of deployment. (If there are name collisions, the platform-specific file always wins!)
51. handy tip (2/3) Use Blend and have default.html from both the Windows Store and Windows Phone projects open. Switch between periodically to make sure everything works as expected.
52. handy tip (3/3) You are building single page applications where default.html is platform specific but all of the content pages (aka fragments) can be loaded in a platform neutral way.
53. JavaScript: WinJS.Utilities.isPhone() if (WinJS.Utilities.isPhone) { // you are on a phone } else { // you are on a Windows PC } JavaScript: Feature Detection if (somePhoneUtil && somePhoneUtil.callPhoneMethod) { // safely call somePhoneUtil.callPhoneMethod(); } Conditionals
54. Conclusion
55. Great device experiences... …enhanced by cloud services
57. ryanjoy@microsoft.com @atxryan