cross platform xamarin apps with mvvm

32
Making your native apps even more cross-platform using MVVM

Upload: jim-bennett

Post on 20-Mar-2017

141 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Cross platform Xamarin Apps With MVVM

Making your native apps even more cross-platform

using MVVM

Page 2: Cross platform Xamarin Apps With MVVM

Jim Bennett Mobile Developer at EROAD

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

Page 3: Cross platform Xamarin Apps With MVVM

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

Page 4: Cross platform Xamarin Apps With MVVM

Why do we use Xamarin?

Page 5: Cross platform Xamarin Apps With MVVM

Common languages and framework

Page 6: Cross platform Xamarin Apps With MVVM

Code can be shared across platforms

Page 7: Cross platform Xamarin Apps With MVVM

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

Page 8: Cross platform Xamarin Apps With MVVM

MVVM increases the amount of testable shared code in your apps

Page 9: Cross platform Xamarin Apps With MVVM

Example - TipCalc

Page 10: Cross platform Xamarin Apps With MVVM

Business logic - in shared code in a PCL

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

Page 11: Cross platform Xamarin Apps With MVVM

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

Page 12: Cross platform Xamarin Apps With MVVM

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);

Page 13: Cross platform Xamarin Apps With MVVM

Only the business logic can be unit tested

Page 14: Cross platform Xamarin Apps With MVVM

Only the business logic is cross-platform

Page 15: Cross platform Xamarin Apps With MVVM

The more cross-platform code the better

Page 16: Cross platform Xamarin Apps With MVVM

MVVM FTW!

Page 17: Cross platform Xamarin Apps With MVVM

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

Page 18: Cross platform Xamarin Apps With MVVM

Model layer is business logic

• Written using cross-platform code

• Can be unit tested

• TipCalculator would be part of the model layer

Page 19: Cross platform Xamarin Apps With MVVM

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

Page 20: Cross platform Xamarin Apps With MVVM

ViewModel layer and bindings are where all the magic is

Page 21: Cross platform Xamarin Apps With MVVM

Each view is backed by a view model

TipCalcView

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

TipCalcViewModel

Page 22: Cross platform Xamarin Apps With MVVM

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

Page 23: Cross platform Xamarin Apps With MVVM

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

Page 24: Cross platform Xamarin Apps With MVVM

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

Page 25: Cross platform Xamarin Apps With MVVM

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

Page 26: Cross platform Xamarin Apps With MVVM

Demo time!

Page 27: Cross platform Xamarin Apps With MVVM

MVVM Frameworks

Page 28: Cross platform Xamarin Apps With MVVM

What about Xamarin Forms?

Page 29: Cross platform Xamarin Apps With MVVM

Xamarin Forms was built for MVVM!

Page 30: Cross platform Xamarin Apps With MVVM

MVVM increases the amount of testable shared code in your apps

Page 31: Cross platform Xamarin Apps With MVVM

Jim Bennett Mobile Application Developer at EROAD

@JimBobBennett https://JimBobBennett.io

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

Page 32: Cross platform Xamarin Apps With MVVM

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