cross platform xamarin apps with mvvm
TRANSCRIPT
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