Design and develop cross-platform mobile apps using MVVMCrossDan ArdeleanMVP Client DevelopmentNokia Developer [email protected]@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!