mvvm frameworks - mvvmcross
TRANSCRIPT
![Page 1: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/1.jpg)
MVVM frameworks - MvvmCrossFlavius-Radu DEMIAN
![Page 2: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/2.jpg)
A bit about me
• General Manager@Deventure
• Timisoara .Net Meetup organizer
• Mobile and Web developer
• Xamarin and Umbraco enthusiast
• In love with technology
[email protected] @flaviusdemian
![Page 3: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/3.jpg)
Agenda
Xamarin’s Unique ApproachWhat is MVVM?Why MVVM?The MvvmCross magic Data-Binding, Commands, NavigationAdvantagesDisadvantages
![Page 4: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/4.jpg)
Expectations
I wish to have an interactive presentation.Please feel free to ask questions any time.
My ultimate goal is to make you
curios.
Go home and try it yourself!
![Page 5: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/5.jpg)
Xamarin’s Unique Approach
![Page 6: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/6.jpg)
Xamarin’s Unique Approach
![Page 7: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/7.jpg)
Xamarin’s Unique Approach
• native user interface• native performance• shared code across platforms• usage of C# & .NET framework• full API coverage• fewer developers
![Page 8: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/8.jpg)
The Xamarin MagicWrite Everything in C#
![Page 9: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/9.jpg)
The Xamarin MagicXamarin takes the C# code and it compiles it down to native on iOS and Android.
The magic is that you can also use it on the Windows platform.
(Almost) everything you can do in Objective-C, Swift or Java can be also done in C# with Xamarin.Check the limitations on www.xamarin.com .
Since you use C# on all the platforms, code reuse varies from 60% to 90%.
![Page 10: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/10.jpg)
Xamarin Architecture Guide
![Page 11: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/11.jpg)
What is MVVM?
![Page 12: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/12.jpg)
Model View ViewModel
![Page 13: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/13.jpg)
MVVM Technical DetailsIt is derived from the Model View Controller Pattern.
• properties• data binding• INotifyPropertyChanged• INotifyCollectionChanged• IValueConverter• ICommand• UI thread
![Page 14: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/14.jpg)
Why MVVM?
![Page 15: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/15.jpg)
MVVM Pros and ConsThere is a reason why it’s called a pattern.Pros:• separation of concerns• decoupling• code reuse• testability
Cons:• MVVM is "overkill" for simple UI operations
![Page 16: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/16.jpg)
The MvvmCross Magic
![Page 17: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/17.jpg)
The MvvmCross Magic
It’s an open-source framework maintained by Stuart Lodge, Martijn van Dijk & Co.
It has Dependency Injection built-in -> Interface Driven Design.
It has a lot of plugins already written such as location, emails, gallery, network, SQLite, secure storage, phone calls etc.
#IF plugins -> less work for the developer, but also less control.
![Page 18: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/18.jpg)
The MvvmCross Magic
![Page 19: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/19.jpg)
The MvvmCross Magic
MvvmCross has support for:• Xamarin.iOS• Mac• Xamarin.Android• Windows Presentation Foundation• Windows Phone• Windows 8• Universal Windows Platform
![Page 20: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/20.jpg)
The MvvmCross MagicIt has huge popularity and the community is very active.
https://jabbr.net/#/rooms/mvvmcrosshttps://xamarinchat.slack.com/messages/mvvmcross/https://github.com/MvvmCross/MvvmCross
![Page 21: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/21.jpg)
Data Binding, Commands, Navigation
![Page 22: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/22.jpg)
Data Binding - Properties
No C#, just XAML
<TextBox Text="{Binding Password, Mode=TwoWay}" />
![Page 23: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/23.jpg)
Data Binding - Properties
No C#, just XML
xmlns:local="http://schemas.android.com/apk/res-auto"<EditText local:MvxBind="Text Password"
![Page 24: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/24.jpg)
Data Binding - Properties
Just C#
var set = this.CreateBindingSet<LoginViewController, LoginViewModel>(); set.Bind(textField_Password).To(vm => vm.Password);
![Page 25: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/25.jpg)
Data Binding - ListviewsNo C#, just XAML
<ListBox ItemsSource="{Binding MyCollection}"<ListBox.ItemTemplate>
<DataTemplate> …..</DataTemplate>
</ListBox.ItemTemplate></ListBox>
![Page 26: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/26.jpg)
Data Binding - Listviews
No C#, just XML
<Mvx.MvxListView local:MvxBind="ItemsSource MyCollection; ItemClick ViewDetailsCommand"local:MvxItemTemplate="@layout/item_template_row" />
![Page 27: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/27.jpg)
Data Binding - Listviews
Just C#
var set = this.CreateBindingSet<XViewController, XViewModel>();set.Bind(source).To(x => x.MyCollection);set.Apply();
![Page 28: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/28.jpg)
ViewModel Commands
No C#, just XAML
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"xmlns:commandbinding="clr-namespace:Cirrious.MvvmCross.WindowsPhone.Commands;assembly=Cirrious.MvvmCross.WindowsPhone" <TextBlock Text="{Binding Name}">
<i:Interaction.Triggers><i:EventTrigger EventName="Tap">
<commandbinding:MvxEventToCommand Command="{Binding MyCommand}" />
</i:EventTrigger></i:Interaction.Triggers>
</TextBlock>
![Page 29: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/29.jpg)
ViewModel Commands
No C#, just XML
xmlns:local="http://schemas.android.com/apk/res-auto"<Button local:MvxBind="Click LoginCommand" />
![Page 30: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/30.jpg)
ViewModel Commands
Just C#
var set = this.CreateBindingSet<LoginViewController, LoginViewModel>();set.Bind(btn_Login).To(x => x.LoginCommand);set.Apply();
![Page 31: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/31.jpg)
Navigation
Go forward:CurrentViewModelInstance.ShowViewModel<NewViewModel>();
![Page 32: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/32.jpg)
Navigation
Go back:CurrentViewModelInstance.Close(this);
![Page 33: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/33.jpg)
MvvmCross App Architecture
![Page 34: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/34.jpg)
App ArchitectureThe project should be split in 2:
Common core which contains:• models• viewmodels• business logic• data access layer
UI-project per platform:• each platform views
![Page 35: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/35.jpg)
Small Demo Time
![Page 36: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/36.jpg)
MvvmCross Pros & Cons
Pros:• interchangeable code module• supports Test Driven Development (TDD)• it follows the Core pattern• it has data binding
![Page 37: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/37.jpg)
MvvmCross Pros & Cons
Cons:• it is a non-native pattern for iOS -MVC- and Android -
aprox MVC-• core 3rd party dependency• lot’s of glue code for custom bindings
![Page 38: MVVM frameworks - MvvmCross](https://reader036.vdocuments.net/reader036/viewer/2022062820/58ac9fe01a28ab93348b6127/html5/thumbnails/38.jpg)
Thank you very much.