An introduction to MvvmCross (a method of increasing shared code whilst using Xamarin tooling)

1. MVVMCROSS
BY ROSS DARGAN

2. Introductions
Ross Dargan
@rossdargan
Ross.dargan@Waterstons.com
Work at Waterstons in Durham

3. Introductions
Ross Dargan
@rossdargan
Ross.dargan@Waterstons.com
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

4. 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

5. “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

6. Xamarin
iOS C# UI Android C# UI Windows C# UI
Shared App Logic
Shared App Logic in C#

7. Old School UI Updating
protected 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);
};
}

8. 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);
};
}

9. 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

10. SOLVING THE UI PROBLEM
(VIA PATTERNS)

11. 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

12. A brief history of Mvvm
Introduced in 2005
Based on Martin Fowlers
presentation model
Created by John Gossman
(WPF and Silverlight
architect)

13. Mvvm
Views Tests
View Models
Models (Domain layer/services)

14. Mvvm
Views Tests
View Models
Models (Domain layer/services)
Exposes an event (defined in
an interface)

15. Mvvm
Views Tests
View Models
Models (Domain layer/services)
Subscribes to the event so it
knows when properties are
updated

16. Data context
Specifies the viewmodel to use for all bindings at
the top level
Data context is normally inherited (lists are the
exception)

17. 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)

18. Commands
Provides a way to notify the VM that something has
happened on the UI (button press for example)
Can accept a parameter

19. DEMO

20. “When you feel the need to write a comment, first
try to refactor the code so that any comment
becomes superfluous.”
–Martin Fowler

21. MvvmCross

22. MvvmCross
Primary contributor is
@slodge (Stuart)
Started in December 2010
Now well into a stable 3rd
revision
Well supported for an open
source project

23. MvvmCross
Mvvm is support natively by
WPF
WinStore
WinPhone
Silverlight

24. MvvmCross
MvvmCross adds Mvvm support to
iOS
Android
Mac

25. DEMO

26. “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

27. ADVANCED
MVVMCROSS
FEATURES

28. Navigation
Designed around screen apps
ViewModel based navigation
ShowViewModel<ViewModel Type>()
Close()

29. Dependency Injection
Not a MvvmCross pattern per say, but still very
important
Allows platform specific code to be injected

30. Plugins
A more formal way to allow platform specific code
to be injected

31. Messaging
Used a lot to communicate across view models

32. DEMO

33. Custom Presenters
Allows you to customise how viewmodels are
presented
Can be used to control the platforms navigation
stack (back stack)

34. DEMO

35. Xamarin - Forms

36. “I would rather be without a state than without a
voice.”
–Edward Snowden

37. Questions?
Useful Links
https://github.com/MvvmCross/MvvmCross
http://mvvmcross.blogspot.co.uk/
Ninja Coder (google it!)
Android Player
ross.dargan@waterstons.com