mvvmcross
DESCRIPTION
An introduction to MvvmCross (a method of increasing shared code whilst using Xamarin tooling)TRANSCRIPT
MVVMCROSSBY ROSS DARGAN
Ross Dargan
@rossdargan
Work at Waterstons in Durham
New to keynote transitions (sorry!)
C# Developer for 10 years
Cross platform mobile for 2 years
Dad of 3
Husband to 1
Uses the 1Sec application
Introductions
What we will cover
Quick overview of the problem MVVMCross solves
A look at alternative UI patterns
An intro to MVVM
A look at MVVMCross
“The difference between a Designer and
Developer, when it comes to design skills, is the
difference between shooting a bullet and throwing
it.”
–Scott Hanselman
Xamarin
Shared App Logic in C#
iOS C# UI Android C# UI Windows C# UI
Shared App Logic
Old School UI Updatingprotected override void OnCreate(Bundle bundle){
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);DomainService domainService = new DomainService();Button saveButton = FindViewById<Button>(Resource.Id.MyButton);
EditText firstNameText = FindViewById<EditText>(Resource.Id.firstName);EditText lastNameText = FindViewById<EditText>(Resource.Id.lastName);EditText bankPasswordText = FindViewById<EditText>(Resource.Id.bankPassword);
DomainEntity domainEntity = DomainService.GetEntity();firstNameText.Text = domainEntity.FirstName;lastNameText.Text = domainEntity.LastName;bankPasswordText.Text = domainEntity.BankPassword;
saveButton.Click += delegate{
domainEntity.FirstName = firstNameText.Text;domainEntity.LastName = lastNameText.Text;domainEntity.BankPassword = bankPasswordText.Text;domainService.UpdateEntity(domainEntity);
};}
Old School UI Updating
protected override void OnNavigatedTo(NavigationEventArgs e){
base.OnNavigatedTo(e);DomainService domainService = new DomainService();DomainEntity domainEntity = domainService.GetEntity();FirstName.Text = domainEntity.FirstName;LastName.Text = domainEntity.LastName;BanksPassword.Text = domainEntity.BankPassword;SaveButton.Click += delegate(object sender, RoutedEventArgs args){
domainEntity.FirstName = FirstName.Text;domainEntity.LastName = LastName.Text;domainEntity.BankPassword = BanksPassword.Text;domainService.UpdateEntity(domainEntity);
};}
Old School UI Updating
Very tedious code
Huge amounts of boiler plate
code duplication
Any Complex UI validation
code can’t be easily re-used
Very hard to test the UI code
SOLVING THE UI PROBLEM(VIA PATTERNS)
UI Design Patterns
MVC more for stateless apps (and iOS :/)
MVP gives you testability, still needs a lot of boiler
plate code
MVVM boiler plate code replaced with bindings
A brief history of Mvvm
Introduced in 2005
Based on Martin Fowlers
presentation model
Created by John Gossman
(WPF and Silverlight
architect)
Mvvm
Views Tests
View Models
Models (Domain layer/services)
Mvvm
Views Tests
View Models
Models (Domain layer/services)
Exposes an event (defined in
an interface)
Mvvm
Views Tests
View Models
Models (Domain layer/services)
Subscribes to the event so it
knows when properties are
updated
Data context
Specifies the viewmodel to use for all bindings at
the top level
Data context is normally inherited (lists are the
exception)
Bindings
Specifies a mapping between a property on a UI
control, and a property on a VM
Can be one-way, two-way or several other
infrequently used options
Can have a fallback value
Can use a convertor (bool property on a VM, can
become a visibility)
Commands
Provides a way to notify the VM that something has
happened on the UI (button press for example)
Can accept a parameter
DEMO
“When you feel the need to write a comment, first
try to refactor the code so that any comment
becomes superfluous.”
–Martin Fowler
MvvmCross
MvvmCross
Primary contributor is
@slodge (Stuart)
Started in December 2010
Now well into a stable 3rd
revision
Well supported for an open
source project
MvvmCross
Mvvm is support natively by
WPF
WinStore
WinPhone
Silverlight
MvvmCross
MvvmCross adds Mvvm support to
iOS
Android
Mac
DEMO
“My favourite things in life don't cost any money. It's
really clear that the most precious resource we all
have is time.”
–Steve Jobs
ADVANCED MVVMCROSS FEATURES
Navigation
Designed around screen apps
ViewModel based navigation
ShowViewModel<ViewModel Type>()
Close()
Dependency Injection
Not a MvvmCross pattern per say, but still very
important
Allows platform specific code to be injected
Plugins
A more formal way to allow platform specific code
to be injected
Messaging
Used a lot to communicate across view models
DEMO
Custom Presenters
Allows you to customise how viewmodels are
presented
Can be used to control the platforms navigation
stack (back stack)
DEMO
Xamarin - Forms
“I would rather be without a state than without a
voice.”
–Edward Snowden
Questions?
Useful Links
https://github.com/MvvmCross/MvvmCross
http://mvvmcross.blogspot.co.uk/
Ninja Coder (google it!)
Android Player