design and develop cross-platform mobile apps using mvvmcross

Design and develop cross-platform mobile apps using MVVMCrossDan ArdeleanMVP Client DevelopmentNokia Developer Champdan@xpresscode.eu@danardelean

• MVVMCross

Agenda

Mobile market todayWindows Phone – fastest growing mobile OS todayWindows – most run OS in the world

iOS– considered best ROI mobile OS Android– best sold mobile OS

Developers

Clients

C#C++HTML/XAML …

ObjC JavaC++Axml

“Paradise” for developers

• Microsoft, Apple and Google become B.F.F.• They agree to use Visual Studio as it’s the best• They agree on a common programming

language• They “patch” the Apple• We all live happily ever after

“Hell” for some developers (me)

HTML5+ JavaScript• Debugging• Speed• Testing• Simulated look&feel• No feeling between us

This is “As Good as It Gets”

• Learn and use C#• Use Microsoft and Xamarin tools for native

cross-platform mobile development• Use Visual Studio 20xx• Buy Surface PRO x

Now we want to share code a.m.a.p.

• 100% mission impossible• Each OS uses its own UI guidelines• There are specific OS Api’s for common tasks• We are not in paradise

• Solution – “Divide et impera”• Separate the UI from the business logic• Create abstract objects for specific API’s• Make the “common” part reusable

MVVMCross & PCL

Vie

w

Vie

wM

odel

Model

get/set Propertiescall Commands

notify changessome messaging

Whatever C# you like …

… messages work well!

Vie

wV

iew

Vie

wM

odel

Vie

wM

odel

Model

Model

Cross Platform -PCLPlatform Specific

PCL PROFILE 158

• no async/await – add Bcl.Async from NuGet

PropertiesINotifyPropertyChangedINotifyCollectionChangedData BindingIValueConverterICommandUI Thread

MVVM Technical Details

MVVCross

• Windows Store• Windows Phone• WPF• iOS• Android

Let’s Build something

Data Binding

ViewModel Property

UI Syntax

IMvxValueConverter

AgeValueConverter

UI Syntax

UI Syntax

ViewModel Command

UI Syntax

ViewModel Collection Property

UI Syntax

UI Syntax

UI Syntax

UI Syntax

Data-Binding to Sub-Objects

Works using normal . and [] chaining:

obeys INotifyPropertyChanged at every step

Navigation

+ parameters

ShowViewModel<DetailViewModel>(new DetailParameters() { Index = 2 });

public void Init(DetailParameters parameters){ // use the parameters here}

Go Back

Interface Driven Development

My.Portable

My.WP8

My.Touch

MvvmCross.Touch

My.Droid

MvvmCross.Droid

My.WinRT

Plugin1 .Portable

Plugin2 .Portable

…

Plugin1 .Touch

Plugin2 .Touch

…

Plugin1 .Wp8

Plugin2 .Wp8

…

Plugin1 .Droid

Plugin2 .Droid

…

Plugin1.WinRT

Plugin2.WinRT

…

MvvmCross.Wp8

MvvmCross.WinRT

MvvmCross.Portable

Pure PCL Plugins

Plugins PCL+Native A Vibrate plugin

Core - PCL:

A Vibrate plugin

e.g. WP Adaption:

http://bit.ly/mvvmcross

THANK YOU!