Download - MvvmCross
![Page 1: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/1.jpg)
MVVMCROSSBY ROSS DARGAN
![Page 3: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/3.jpg)
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
![Page 4: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/4.jpg)
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
![Page 5: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/5.jpg)
“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
![Page 6: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/6.jpg)
Xamarin
Shared App Logic in C#
iOS C# UI Android C# UI Windows C# UI
Shared App Logic
![Page 7: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/7.jpg)
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);
};}
![Page 8: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/8.jpg)
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);
};}
![Page 9: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/9.jpg)
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
![Page 10: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/10.jpg)
SOLVING THE UI PROBLEM(VIA PATTERNS)
![Page 11: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/11.jpg)
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
![Page 12: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/12.jpg)
A brief history of Mvvm
Introduced in 2005
Based on Martin Fowlers
presentation model
Created by John Gossman
(WPF and Silverlight
architect)
![Page 13: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/13.jpg)
Mvvm
Views Tests
View Models
Models (Domain layer/services)
![Page 14: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/14.jpg)
Mvvm
Views Tests
View Models
Models (Domain layer/services)
Exposes an event (defined in
an interface)
![Page 15: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/15.jpg)
Mvvm
Views Tests
View Models
Models (Domain layer/services)
Subscribes to the event so it
knows when properties are
updated
![Page 16: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/16.jpg)
Data context
Specifies the viewmodel to use for all bindings at
the top level
Data context is normally inherited (lists are the
exception)
![Page 17: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/17.jpg)
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)
![Page 18: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/18.jpg)
Commands
Provides a way to notify the VM that something has
happened on the UI (button press for example)
Can accept a parameter
![Page 19: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/19.jpg)
DEMO
![Page 20: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/20.jpg)
“When you feel the need to write a comment, first
try to refactor the code so that any comment
becomes superfluous.”
–Martin Fowler
![Page 21: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/21.jpg)
MvvmCross
![Page 22: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/22.jpg)
MvvmCross
Primary contributor is
@slodge (Stuart)
Started in December 2010
Now well into a stable 3rd
revision
Well supported for an open
source project
![Page 23: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/23.jpg)
MvvmCross
Mvvm is support natively by
WPF
WinStore
WinPhone
Silverlight
![Page 24: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/24.jpg)
MvvmCross
MvvmCross adds Mvvm support to
iOS
Android
Mac
![Page 25: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/25.jpg)
DEMO
![Page 26: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/26.jpg)
“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
![Page 27: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/27.jpg)
ADVANCED MVVMCROSS FEATURES
![Page 28: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/28.jpg)
Navigation
Designed around screen apps
ViewModel based navigation
ShowViewModel<ViewModel Type>()
Close()
![Page 29: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/29.jpg)
Dependency Injection
Not a MvvmCross pattern per say, but still very
important
Allows platform specific code to be injected
![Page 30: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/30.jpg)
Plugins
A more formal way to allow platform specific code
to be injected
![Page 31: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/31.jpg)
Messaging
Used a lot to communicate across view models
![Page 32: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/32.jpg)
DEMO
![Page 33: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/33.jpg)
Custom Presenters
Allows you to customise how viewmodels are
presented
Can be used to control the platforms navigation
stack (back stack)
![Page 34: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/34.jpg)
DEMO
![Page 35: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/35.jpg)
Xamarin - Forms
![Page 36: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/36.jpg)
“I would rather be without a state than without a
voice.”
–Edward Snowden
![Page 37: MvvmCross](https://reader033.vdocuments.mx/reader033/viewer/2022060202/559c1cbc1a28ab05158b4686/html5/thumbnails/37.jpg)
Questions?
Useful Links
https://github.com/MvvmCross/MvvmCross
http://mvvmcross.blogspot.co.uk/
Ninja Coder (google it!)
Android Player