design and develop cross-platform mobile apps using mvvmcross

36
Design and develop cross- platform mobile apps using MVVMCross Dan Ardelean MVP Client Development Nokia Developer Champ [email protected] @danardelean

Upload: dan-ardelean

Post on 07-May-2015

1.031 views

Category:

Technology


4 download

DESCRIPTION

Today's mobile market is a very dynamic one with three dominating major platforms: Windows, iOS and Android. In order to reach more users and to sustain the migration between the various platforms the mobile applications should be designed with an cross-platform approach in mind. In this session we will see how using the MvvmCross framework we can develop native mobile cross-platforms applications using C# and share the source code between the three platforms. This allows better time to market but even more important better maintainability.

TRANSCRIPT

Page 1: Design and develop cross-platform mobile apps using MVVMCross

Design and develop cross-platform mobile apps using MVVMCrossDan ArdeleanMVP Client DevelopmentNokia Developer [email protected]@danardelean

Page 2: Design and develop cross-platform mobile apps using MVVMCross

• MVVMCross

Agenda

Page 3: Design and develop cross-platform mobile apps using MVVMCross

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

Page 4: Design and develop cross-platform mobile apps using MVVMCross

“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

Page 5: Design and develop cross-platform mobile apps using MVVMCross

“Hell” for some developers (me)

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

Page 6: Design and develop cross-platform mobile apps using MVVMCross

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

Page 7: Design and develop cross-platform mobile apps using MVVMCross

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

Page 8: Design and develop cross-platform mobile apps using MVVMCross

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

Page 9: Design and develop cross-platform mobile apps using MVVMCross

PCL PROFILE 158

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

Page 10: Design and develop cross-platform mobile apps using MVVMCross

PropertiesINotifyPropertyChangedINotifyCollectionChangedData BindingIValueConverterICommandUI Thread

MVVM Technical Details

Page 11: Design and develop cross-platform mobile apps using MVVMCross

MVVCross

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

Page 12: Design and develop cross-platform mobile apps using MVVMCross

Let’s Build something

Page 13: Design and develop cross-platform mobile apps using MVVMCross

Data Binding

Page 14: Design and develop cross-platform mobile apps using MVVMCross

ViewModel Property

Page 15: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 16: Design and develop cross-platform mobile apps using MVVMCross

IMvxValueConverter

Page 17: Design and develop cross-platform mobile apps using MVVMCross

AgeValueConverter

Page 18: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 19: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 20: Design and develop cross-platform mobile apps using MVVMCross

ViewModel Command

Page 21: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 22: Design and develop cross-platform mobile apps using MVVMCross

ViewModel Collection Property

Page 23: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 24: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 25: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 26: Design and develop cross-platform mobile apps using MVVMCross

UI Syntax

Page 27: Design and develop cross-platform mobile apps using MVVMCross

Data-Binding to Sub-Objects

Works using normal . and [] chaining:

obeys INotifyPropertyChanged at every step

Page 28: Design and develop cross-platform mobile apps using MVVMCross

Navigation

+ parameters

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

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

Page 29: Design and develop cross-platform mobile apps using MVVMCross

Go Back

Page 30: Design and develop cross-platform mobile apps using MVVMCross

Interface Driven Development

Page 31: Design and develop cross-platform mobile apps using MVVMCross

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

Page 32: Design and develop cross-platform mobile apps using MVVMCross

Pure PCL Plugins

Page 33: Design and develop cross-platform mobile apps using MVVMCross

Plugins PCL+Native A Vibrate plugin

Core - PCL:

Page 34: Design and develop cross-platform mobile apps using MVVMCross

A Vibrate plugin

e.g. WP Adaption:

Page 35: Design and develop cross-platform mobile apps using MVVMCross

http://bit.ly/mvvmcross

Page 36: Design and develop cross-platform mobile apps using MVVMCross

THANK YOU!