mvvmcross

MVVMCROSSBY ROSS DARGAN

Introductions

Ross Dargan

@rossdargan

Ross.dargan@Waterstons.com

Work at Waterstons in Durham

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

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

ross.dargan@waterstons.com