Sharing up to 80% code for iOS, Android, and Windows platforms, a Retail App Case Study, Roy Cornellisen and Marcel de Vries

Welcome!

Sharing up to 80% of code building mobile apps for iOS, Android, WP8 and Windows 8

Roy CornelissenIT Architect,Info Support

per,Info Support

Marcel de VriesTechnology Manager

@marcelv

XamarinEvolve2013

Roy CornelissenIT Architect

@roycornelissen

Key takeaways Demos

Architecture Tips & Tricks

Showcase

National web site, aimed at selling the “last available seats” for theatre shows for up to 4 days

No discount or auction site, but a source for inspiration for a fun night out

Order tickets from home, from a terrace or from your hotel room

Demo

MindsetLessons we’ve learned over the years

Stuff that actually works in practiceNot only theoretically

We target iOS, Android and WindowsLeaving out Windows can give a different perspective

on reuse

Showcase: app for a retail startupCurrently being rebranded

What we’ve heard the past few days

Many cross platform talks

Talks on frameworks

This session is about a real app, not

just an example

Important: we also target WindowsVery different UI paradigms, impacts code structure and

level of reuse

Reusable34%

Shared Logic17%Android

10%

iOS8%

Windows Phone10%

Services21%

Shared84%

Specific16%

Per App

Evaluate frameworks

MonoCross

MvvmCross

Roll your own

Frameworks can help speed up

development but they might also limit

your movements by (over)abstraction

Keep as light

as possible

DataSerialization

Caching

SecurityAuthN/AuthZ

Encryption

Data Self Destruction

UtilitiesAnalytics

Logging

Device services

Platform Agnostic API

Application Business Logic

Platform UI

Design Patterns for Reuse

Glue together the

application layers

Navigation frameworks

In our experience, navigation

frameworks yield leaky abstractions.

E.g. PivotView navigation experience

is not the same as menu navigation

via UINavigationController.

Leave UI navigation device

specific

Windows

One pivotview

over multiple

data

representations

Android

Tab bar style

navigation with

separate

activities

Services

Model

ControllerViewModel

Etc.

GPS

Storage

Motion sensors

View

Shared?

Bridge

Shared Platform specific

Model Implementation

We implement the Model as a Singleton

Model Implements INotifyPropertyChanged

Easy to enlist subscribers

Facilitate automatic databinding in XAML

Model contains rich features such as filtering and

advanced selections

Easy to share logic

Model Implementationpublic class MainModel : INotifyPropertyChanged{

private static MainModel _model;private static object _lockHandle = new object();

// Facilitates Windows Phone app resumepublic void RestoreState(MainModel state){

_model = state;}

public static MainModel Current{

get {if (_model == null) {

_model = new MainModel();}return _model;

}}

public IEnumerable<Event> ActualEvents {get {

// E.g. Complex linq stuff}

}}

// Model Usage:

var foo = MainModel.Current.ActualEvents;

Check your water level

Reusable Business Logic

Device SpecificXAML / ValueConverter

Model PropertyValue Transformation

public class ISKEController{

private static ISKEController _instance;private ISKEDomainServicesoap _proxy;

public static ISKEController Current{

get {if (_instance == null) {

_instance = new ISKEController();}return _instance;

}}

private void GetActualEvents (Action<object> OnSuccess, Action<Exception> OnFail){

// do some logic, or service call// use actions to report result or trigger UI action

}}

Shared Controller

UIViewController XAML View Activity

Web Services

SF

SF

SF

Model

GetActualEvents(Action<object> OnSuccess, Action<Exception> OnFail)

PropertyChanged(“Events”);

public void OnFailed(Exception e){

// Do something with error}

public void OnSuccess(object data){

// Do something with data// Notify user

}

Demo

iOS

MonoTouch.CoreLocation

MonoTouch.CoreMotion

MonoTouch.AVFoundation

MonoTouch.AddressBook

MonoTouch.EventKit

…

Android:

Android.Hardware.Sensor

Android.Location

Android.Bluetooth

Android.Nfc

…

Windows Phone:

Microsoft.Devices.Sensors.Gyroscope

Microsoft.Devices.Sensors.Accelerometer

Microsoft.Devices.Sensors.Compass

Microsoft.Devices.Sensors.Motion

…

Partial classes & methods

partial class A

{

// Half of the implementation

}

partial class A

{

// The other half

}

A.cs A.extra.cs

partial class A

{

// Declare the method here

partial void DoSomethingEx();

public void DoSomething()

{

// Some shared logic

DoSomethingEx();

}

}

partial class A

{

// Provide the implementation here

partial void DoSomethingEx()

{

// Do something iOS specific

}

}Can be used from shared

logic

Leaves room for specific

implementation

Always private and returns

void

A.cs A.iOS.cs

Demo

Services – Use soap?

Proxy generation

Silverlight tools: it needs to run on Windows too!

What about bandwidth?

Services – Use REST/JSON?

WebAPI / ServiceStack

More hand coding

Cloud: Azure / Parse / Buddy

Cross platform version control

GitHub, BitBucket

VisualStudio.com

Work items, builds

Demo

C# language tricks

Leverage your tools

Abstractions are good

But don’t over-abstract

Don’t over-engineer

Beware of pitfalls…

@roycornelissenroycornelissen.wordpress.com

Thank you!@marcelvblogs.infosupport.com/marcelv