Twelve ways to make your apps

suck less

Fons Sonnemans

@fonssonnemans

© Reflection IT BV. All rights reserved.

Fons Sonnemans

• Software Development Consultant

• Programming Languages

• Clipper, Smalltalk, Visual Basic, C#

• Platforms

• Windows Forms, ASP.NET (Web Forms, MVC), XAML

(WPF, Silverlight, Windows Phone, Windows 8)

• Databases

• MS SQL Server, Oracle

• Role

• Trainer, Coach, Advisor, Architect, Designer, Developer

• More info: www.reflectionit.nl

2

My Phone Apps

• > 775K downloads

3

My Windows Apps

> 1.8 million downloads

4

Topics 1. Create Universal Apps

2. Start with a Design not Code

3. Design proper Visual Assets

4. Create custom themes

5. Be mobile

6. Reviews are important

7. Use Vectors and Fonts

8. Performance is key!

9. Localize your app

10. Use Data Binding and MVVM

11. Learn Blend

12. Cache your first page

5

1. Create Universal Apps

• Be prepared for Windows 10

• Connect your Windows Phone app with the Windows 8 app

• Share Roaming data across platforms

• Share code

• Portable Class Libraries (PCL)

• Shared projects

• File linking

6

IsTextScaleFactorEnabled <StackPanel Margin="10">

<Button Content="Button 1" />

<TextBlock Text="Hello World 1"

FontSize="20" Margin="0,10" />

<TextBox Text="TextBox 1" />

<Button Content="Button 2"

IsTextScaleFactorEnabled="False"

Margin="0,40,0,0" />

<TextBlock Text="Hello World 2"

IsTextScaleFactorEnabled="False"

FontSize="20" Margin="0,10" />

<TextBox Text="TextBox 2"

IsTextScaleFactorEnabled="False" />

</StackPanel>

8

2. Start with a Design not Code http://design.windows.com

• Modern Design

• RTFM (Principles, Guidelines, UX Patterns)

• Vision and process

• Discover your best idea

• Identity

• Create a beautiful visual identity

• Gallery

• Learn (“steal”) from the best/competition

9

3. Design proper Visual Assets

• Visual Assets

• Tiles, SplashScreen, Icons, etc

• All Scale Factors

• Windows 80, 100, 140, 180

• Phone 100, 140, 240

• Use vectors

• Expression Design (Free), Adobe Illustrator

10

3. Design proper Visual Assets

• Expression Design Demo

11

4. Create Custom Themes

12

4. Create Custom Themes • Windows

• C:\Program Files (x86)\Windows

Kits\8.1\Include\WinRT\Xaml\Design\Generic.xaml

• Windows Phone

• C:\Program Files (x86)\Windows Phone

Kits\8.1\Include\abi\Xaml\Design\Generic.xaml

• Use the ThemeManager of Dave Smits

• http://www.familie-smits.com/theming-in-a-universal-

app

• Use HAMMER.Pants for Windows

• https://github.com/Code52/HAMMER

13

5. Be Mobile

• HttpClient

• Resolve the correct type

• System.Net.Http.HttpClient is slightly different in the most basic

use, and quite different when you get into advanced work.

• Always make sure you’re using Windows.Web.Http

• System.Net.Http shows up first

14

5. Be Mobile

• Mobile devices are often connected to poor quality network connections

• Best chance of success in network data transfers achieved by:

• Keep data volumes as small as possible

• Use the most compact data serialization available

(use JSON instead of XML)

• Avoid large data transfers

• Avoid transferring redundant data

• Design your protocol to only transfer precisely the data you need and no more

Network Awareness in your apps • Making Decisions based on Data Connections

• Mobile apps shouldn’t diminish the user experience by

trying to send or receive data in the absence of network

connectivity

• Mobile apps should be intelligent about performing

heavy data transfers only when the appropriate

connectivity is available

• Use the NetworkInterfaceType object to detect network type and speed

• Subscribe to the NetworkChange event to detect when network state changes

Make your app aware of its networking environment and state!

17

Network Information in Windows Runtime

private bool IsOnWiFi()

{

ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();

if (internetConnectionProfile == null) return false;

return InternetConnectionProfile.IsWlanConnectionProfile;

}

private bool IsConnectedtoDataRoaming()

{

bool isRoaming = false;

ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();

if (internetConnectionProfile != null && internetConnectionProfile.IsWwanConnectionProfile)

{

ConnectionCost cc = internetConnectionProfile.GetConnectionCost();

isRoaming = cc.Roaming; // See if user is currently roaming

}

return isRoaming;

}

private void AddEventHandlers()

{

// NetworkStatusChanged fires when the network status changes for a connection

NetworkInformation.NetworkStatusChanged += OnNetworkStatusChanged;

}

What is Data Sense?

• Data Sense is a set of components designed

to help:

• End users: understand and manage data

consumption

• Mobile Operators: reduce cellular consumption

& optimize connectivity

• 3rd party developers and ISVs: Build smart data

consuming applications

18

What Makes Up “Data Sense”?

The Data Sense platform

Data Sense (UI)

Browser Optimization Service

WiFi hotspot Mapping

Content Streaming Scenario - 1 of 2

ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();

if (internetConnectionProfile != null)

{

if (internetConnectionProfile.IsWlanConnectionProfile)

{

// connected on WiFi interface; double check it is not a metered WiFi hotspot

ConnectionCost cc = internetConnectionProfile.GetConnectionCost();

if ((NetworkCostType.Unknown == cc.NetworkCostType)

|| (NetworkCostType.Unrestricted == cc.NetworkCostType))

{

// assume free network; connect and start streaming content

}

}

else if (internetConnectionProfile.IsWwanConnectionProfile)

{

...

22

Content Streaming Scenario – 2 of 2

else if (InternetConnectionProfile.IsWwanConnectionProfile)

{

ConnectionCost cc = InternetConnectionProfile.GetConnectionCost();

// check the type of data plan - make sure user is not currently roaming

if (!cc.Roaming)

{

if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType))

{

// assume free network; connect and start streaming content

}

else if (NetworkCostType.Fixed == cc.NetworkCostType)

{

// make sure user not currently over limit or near limit

if ((!cc.OverDataLimit) && (!cc.ApproachingDataLimit))

{

// connect and start streaming content

}

}

}

}

Source: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2014/WIN-B326

6. Reviews are important

23

6. Reviews are important

24

6. Reviews are important

25

6. Reviews are important

26

7. Use Vectors and Fonts

• Use Bitmaps for Images

• JPG for large photos

• PNG for perfect quality

• Scale 100, 140, 180

• Use Vectors and Fonts for “Icons”

• Use <Path data=“” /> for Vector

• Use FontIcon or TextBlock for Fonts

• AppBarButton supports FontIcon & PathIcon

27

Font

28

Vector

• ArtBoard 40x40

• Icon Max Width or Height 24

• Select All -> Export – XAML Silverlight 4 /

WPF Canvas

• Open .xaml & copy Path

Demo <Page x:Class="VectorAndFontDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VectorAndFontDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.BottomAppBar> <CommandBar Background="#FFFFB900" IsOpen="True"> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="d" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <PathIcon Data="F1 M20.0017,8 C21.6588,8 23.0021,9.34333 23.0021,11.0004 C23.0021,12.111 22.3987,13.0807 21.5018,13.5995 L21.5018,27.3629 C23.9769,26.8976 26.155,25.2984 27.6868,23.0021 L25.7525,23.0021 L29.0029,16.5013 L32.0033,23.0021 L30.3772,23.0021 C28.8669,27.6635 24.7918,31.0032 20.0017,31.0032 C15.2115,31.0032 11.1364,27.6635 9.62615,23.0021 L8,23.0021 L11.0004,16.5013 L14.2508,23.0021 L12.3166,23.0021 C13.8483,25.2984 16.0263,26.8975 18.5014,27.3629 L18.5014,13.5994 C17.6046,13.0806 17.0013,12.111 17.0013,11.0004 C17.0013,9.34333 18.3446,8 20.0017,8 z M20.0017,10.0003 C19.4493,10.0003 19.0015,10.4481 19.0015,11.0004 C19.0015,11.5528 19.4493,12.0006 20.0017,12.0006 C20.554,12.0006 21.0018,11.5528 21.0018,11.0004 C21.0018,10.4481 20.554,10.0003 20.0017,10.0003 z" /> </AppBarButton.Icon> </AppBarButton> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Viewbox Height="200" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center"> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="c" /> </Viewbox> </Grid> </Page>

30

Links • Vectors

• http://modernuiicons.com

• http://materialdesignicons.com/

• http://thenounproject.com

• http://www.thexamlproject.com

• http://www.syncfusion.com/downloads/metrostudio

• Fonts

• http://msdn.microsoft.com/en-

us/library/windows/apps/jj841126.aspx

• http://www.geekchamp.com/icon-explorer/introduction

• http://www.fontello.com/

• http://fontastic.me

8. Performance is Key

32

9. Localize your app

• Offering your app in English only will only cover about 25% of Windows Phone customers, though it covers a larger percentage of tablets and PCs users. Adding Spanish, French, Mandarin, Russian and German increases coverage to more than 75% of the base.

http://blogs.windows.com/buildingapps/2014/09/29/windows-and-windows-

phone-store-trends-september-2014-update/

33

10. Use Data Binding and MVVM • Motivations:

• Reduces complexity with Model to UI integration

• Separation of concerns

• Clear Designer-Developer separation

• Makes code more Unit testable

• Approach:

• Split the UI architecture into Model, View and View-

Model

• Model: Represents the data

• View : UI defined declaratively in XAML

• View Model: Specialization of the Model that View uses

for data binding

Model View ViewModel

View (XAML UserControls + CodeBehind)

ViewModel (State + Operations)

DataBinding Commands Events /

Messages

Model ("Data")

Data

Bin

din

g

11. Learn Blend

• Layout

• Animations

• Styling

• Templating

• Resources

• Data Binding

• Sample Data

• Visual States

• Behaviors

36

12. Cache your first page public sealed partial class HubPage : Page

{

private readonly NavigationHelper navigationHelper;

private readonly ObservableDictionary defaultViewModel = new ObservableDictionary();

private readonly ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView("Resources");

public HubPage()

{

this.InitializeComponent();

// Hub is only supported in Portrait orientation

DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait;

this.NavigationCacheMode = NavigationCacheMode.Required;

this.navigationHelper = new NavigationHelper(this);

this.navigationHelper.LoadState += this.NavigationHelper_LoadState;

this.navigationHelper.SaveState += this.NavigationHelper_SaveState;

}

37

@fonssonnemans

fons.sonnemans@reflectionit.nl

fonssonnemans

reflectionit.nl/blog

38

Copyright

• Copyright © by Reflection IT BV. All rights

reserved.

• Some parts quote Microsoft public materials.

• This presentation, its workshops, labs and

related materials may not be distributed or used

in any form or manner without prior written

permission by the author.

39