Top 10 mistakes developers do with modern applications Build 2014 7/18/2018 Top 10 mistakes developers do with modern applications Ondrej Stastny Microsoft PFE © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1. Misunderstanding purpose of an App.

Paradigm shift Single purpose applications New interaction modes New device types New scenarios and use cases

2. App as just a shell for web content.

C# unique approach powered by Microsoft .NET and Xamarin Visual Studio 7/18/2018 C# unique approach powered by Microsoft .NET and Xamarin Microsoft and Xamarin partnership Fully native apps written entirely in C# Visual Studio capabilities fully available Share app logic code across device platforms 100% APIs exposed © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. Neglecting optimizations.

Optimizations Checklist Looks good on all screens? No resource depletion? No network, no problem? Theme aware? Requires optional hardware? World ready?

4. Not taking different device form factors into account.

App shape (not device orientation) is important tall square wide

Effective resolution embraces viewing distance ~4” phone at 1 foot ~40” screen at 10 feet Same effective resolution Same angle of view X × Y effective pixels X × Y effective pixels

Relative density (not DPI) is important 2x as dense Also known as “scale factor” or “resolution scale”

Recommendations Good: effective resolution / shape / scale factor Use the right words! Good: effective resolution / shape / scale factor Bad: physical resolution / orientation / DPI Architect for a flexible layout Prefer component parts vs. monolithic pages Let the layout system work for you Focus on the right set of assets Start with high-resolution masters Generate only the scale factors you need (eg, 100% and 240%) Ensure detail level is appropriate

5. Not using MVVM.

MVVM ViewModel (mediator) View (GUI) Model (domain model/DAL) Data binding View (GUI) Model (domain model/DAL) Model: as in the classic MVC pattern, the model refers to either (a) a domain model which represents the real state content (an object-oriented approach), or (b) the data access layer that represents that content (a data-centric approach). View: as in the classic MVC pattern, the view refers to all elements displayed by the GUI such as buttons, labels, and other controls View model: the view model is a “model of the view” meaning it is an abstraction of the view that also serves in mediating between the view and the model which is the target of the view data bindings. It could be seen as a specialized aspect of what would be a controller (in the MVC pattern) that acts as a converter that changes model information into view information and passes commands from the view into the model. The view model exposes public properties, commands, and abstractions. The view model has been likened to a conceptual state of the data as opposed to the real state of the data in the model.[10] 

Advantages Object-oriented representation of UI's data and behaviors (viewmodel) Declarative representation of how data should be displayed (view) Arbitrarily sophisticated behaviors just by updating the viewmodel. The framework takes care of the synchronization.

6.Blocking the UI thread.

Async/await keywords Using Dispatcher dispatcher.RunAsync(DispatcherPriority.Normal, () => …);

7. Mishandling exceptions.

NULL References – Function Calls Build 2014 7/18/2018 NULL References – Function Calls DisplayWidget(foo.GetFirstWidget()); // Avoid System.NullReferenceException if (foo != null) { DisplayWidget(foo.GetFirstWidget()); } © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

NULL References - Arguments Build 2014 7/18/2018 NULL References - Arguments DisplayWidget(foo.GetFirstWidget()); if (foo != null) { Widget widget = foo.GetFirstWidget(); if (widget != null) // Avoid System.ArgumentException // Avoid System.ArgumentNullException DisplayWidget(widget); } © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

NULL References – IEnumerable & LINQ Build 2014 7/18/2018 NULL References – IEnumerable & LINQ List<Widget> widgets = foo.GetWidgets(); foreach (Widget widget in widgets) { ... } List<Widget> widgets = foo.GetWidgets(); if (widgets != null) { foreach (Widget widget in widgets) { ... } } © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Try - Catch try { DoSomething(); } Build 2014 7/18/2018 Try - Catch try { DoSomething(); } catch (System.UnauthorizedAccessException uae) ... catch (System.Exception ex) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. Mishandling of background tasks.

Build 2014 7/18/2018 Background Tasks public sealed class SampleBackgroundTask : IBackgroundTask{ public async void Run(IBackgroundTaskInstance taskInstance){ try{ taskInstance.Canceled += new BackgroundTaskCanceledEventHandler(OnCanceled); var deferral = taskInstance.GetDeferral(); await DoSomethingAsync(); } catch(..){…} finally{ deferral.Complete(); } } } public sealed class SampleBackgroundTask : IBackgroundTask { public async void Run(IBackgroundTaskInstance taskInstance) { try{ var deferral = taskInstance.GetDeferral(); await DoSomethingAsync(); deferral.Complete(); } catch(..){ } } © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Background Task (Hangs) Build 2014 7/18/2018 Background Task (Hangs) Complete the Deferral Add a Cancellation Handler Close the Page (JavaScript) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Frame.GetNavigationState Build 2014 7/18/2018 Frame.GetNavigationState private void navigationHelper_SaveState( object sender, SaveStateEventArgs e) { if (this.itemsViewSource.View != null) var selectedItem = (Data.SampleDataItem)this.itemsViewSource.View.CurrentItem; if (selectedItem != null) e.PageState["SelectedItem"] = selectedItem.UniqueId; int[] a5 = new int[5]; e.PageState["SomeData"] = a5; } © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Frame.Get NavigationState Build 2014 7/18/2018 Frame.Get NavigationState Only Simple Types are supported Crash is reported as XAML’s fault Happens at Suspend © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9.Unpolished UI.

Design Guidelines Hot Spots App Bars Authentically digital Navigation

Build 2014 7/18/2018 Common UI Issues Invisible elements Effectively invisible elements Variable outcome © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Invisible Elements Michaels example also fits the criteria for an invisible element. The charms are off screen. Non-essential Power User features Things that everyone has to do, all the time –not usually a good candidate for making invisible. When in doubt, make the means to activate a control visible

Invisible Elements

Effectively Invisible Elements Where do I go to search for video? Current focus Expectations and foveal vision collide here. A perfect storm of inattention.

Variable Outcome Search goes to bing except when it doesn’t. Same user action, different result.

Variable Outcome Right click makes a drop down appear except when it doesn’t.

Make critical actions visible Make critical actions visible. Know where users are expecting to “see” your actions. Beware controls that “change” global actions based on modes.

10. No logging, no monitoring, no telemetry.

Ondrej Stastny Microsoft PFE