Cross platform Xamarin Apps With MVVM

Making your native apps even more cross-platform

using MVVM

Jim Bennett Mobile Developer at EROAD

@JimBobBennett https://JimBobBennett.io https://github.com/jimbobbennett

Author of Xamarin in ActionLearn how to build production-quality Xamarin apps using MVVM

to increase the amount of cross-platform code

Now available as part of the Manning Early Access Program

http://xam.jbb.io

Why do we use Xamarin?

Common languages and framework

Code can be shared across platforms

Xamarin Cross-Platform apps

• Xamarin apps are native apps

• Code written using the core libraries can be shared across all platforms using PCLs

• Only the platform specific stuff is not cross platform

MVVM increases the amount of testable shared code in your apps

Example - TipCalc

Business logic - in shared code in a PCL

public class TipCalculator { public decimal Calculate(decimal amount) !=> amount*0.15m;}

UI - in platform-specific code in iOS/Android app projects

UI is wired up to business logic in platform-specific code

!// AndroidCalculate.Click += (s, e) !=>{ var amount = Convert.ToDecimal(BillAmount.Text); TipAmount.Text = _tipCalculator.Calculate(amount).ToString("C2"); };Calculate.Enabled = false;BillAmount.TextChanged += (s, e) !=> Calculate.Enabled = !string.IsNullOrEmpty(BillAmount.Text);

!// iOSCalculate.TouchUpInside += (s, e) !=>{ var amount = Convert.ToDecimal(BillAmount.Text); TipAmount.Text = _tipCalculator.Calculate(amount).ToString("C2"); };Calculate.Enabled = false;BillAmount.AddTarget((s, e) !=> Calculate.Enabled = !string.IsNullOrEmpty(BillAmount.Text), UIControlEvent.EditingChanged);

Only the business logic can be unit tested

Only the business logic is cross-platform

The more cross-platform code the better

MVVM FTW!

What is MVVM?

• Design pattern used for building UI based apps - originally invented by Microsoft for WPF

• Model is business logic

• View is pure UI, no logic

• View Model is UI logic

• Binding wires up view to view model

Model layer is business logic

• Written using cross-platform code

• Can be unit tested

• TipCalculator would be part of the model layer

View layer is pure UI

• Written using platform-specific code

• Cannot be unit tested

• iOS ViewController/Storyboard and Android Activity/layout would be part of the view layer

ViewModel layer and bindings are where all the magic is

Each view is backed by a view model

TipCalcView

public class TipCalcViewModel : INotifyPropertyChanged { !!...}

TipCalcViewModel

State comes from properties

• When these properties change an event is raised

• The binding layer listens to this event and updates the UI

• Can be used for data, or properties that define the UI

• Value converters can be used to change the type

Behaviour comes from commands

• Commands are objects that wrap actions

• Commands can control if they can be executed

• The binding layer listens to UI events and executes commands

• If the commands cannot be execute the binding layer can update the UI to reflect this

View models can also handle navigation

• Each view has one view model

• Navigation is from view model to view model

• The MVVM framework finds the right view for a view model and shows it

Xamarin Cross-Platform apps with MVVM

• Business logic and UI logic can be in platform specific code

• Commands and property notifications provide a cross-platform way to interact with the UI

• Some application logic is shared

• Less platform specific code

Demo time!

MVVM Frameworks

What about Xamarin Forms?

Xamarin Forms was built for MVVM!

MVVM increases the amount of testable shared code in your apps

Jim Bennett Mobile Application Developer at EROAD

@JimBobBennett https://JimBobBennett.io

Sample code at: https://github.com/jimbobbennett/CrossPlatformSummit

Author of Xamarin in ActionLearn how to build production-quality Xamarin apps using MVVM

to increase the amount of cross-platform code

Now available as part of the Manning Early Access Program

http://xam.jbb.io