Building Cross-Platform Apps with Xamarin and

MvvmCrossFlavius-Radu DEMIAN

A bit about me

• General Manager@Deventure

• Timisoara .Net Meetup organizer

• Mobile and Web developer

• Xamarin and Umbraco enthusiast

• In love with technology

flavius.demian@deventure.co @flaviusdemian

Agenda

Mobile Development ApproachesXamarin’s Unique ApproachThe Xamarin Magic How it Works on iOSHow it Works on AndroidCode Sharing Techniques

Agenda

What is MVVM?Why MVVM?The MvvmCross magic Data-Binding, Commands, NavigationAdvantagesDisadvantages

Expectations

I wish to have an interactive presentation.Please feel free to ask questions any time.

After this presentation, you should know:• what Xamarin is and how to use it• the advantages and disadvantages of Xamarin• what is MVVM• what Mvvmcross is and how to use it

Expectations

My ultimate goal is to make you

curios.

Go home and try it yourself!

Mobile Development Approaches

Mobile Development ApproachesSilo Approach

Silo Approach

• each platform with it’s own stack – in it’s own silo• no code sharing• multiple teams => many developers• multiple codebase => synchronization problem• different toolsets

Mobile Development ApproachesWeb Approach

Web Approach“Write once, run anywhere”.

• no apps to deploy to the stores• shared codebase• basically a native app with a Webview• native look is simulated with CSS• most times you can tell it is written in HTML• fewer developers

Xamarin’s Unique Approach

Xamarin’s Unique Approach

Xama…what?

Xamarin Timeline

Xamarin’s Unique Approach

• native user interface• native performance• shared code across platforms• usage of C# & .NET framework• full API coverage• fewer developers

Xamarin’s Unique Approach

Probably the best way in a “Mobile First. Cloud First. People First” Satya Nadella

The Xamarin MagicWrite Everything in C#

The Xamarin Magic

.NET + iOS APIs100% coverage

The Xamarin Magic

.NET + Android APIs100% coverage

The Xamarin Magic

.NET + Windows APIs

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%.

JIT compilationAOT compilation

How Xamarin Works on iOS

iOS Build + Execution Model

• code runs as 100% native app

• full Ahead of Time (AOT) compilation to produce an ARM binary for Apple’s App Store

• Mono Framework included

• exposes CocoaTouch SDK

iOS Build + Execution Model

We can take advantage of the APIs exposed by Mono besides the fully covered iOS APIs.

Since we have Mono involved, we can use Portable Class Libraries (PCLs).

How Xamarin Works on Android

Android Build + Execution Model

Xamarin.Android takes advantage of Just In Time (JIT) compilation on the Android device.

Android Build + Execution Model

• MCW – managed callable wrappers,

mostly managed by Mono.Android.dll

• ACW – Android callable wrappers

Always Up-to-DateXamarin.iOS offered same-day support for :

iOS 5 / iOS 6 / iOS 7 / iOS 7.1 / iOS 8 / iOS 9

Xamarin offers full support for: • Google Glass• Android Wear• Amazon Fire TV • Apple Watch and more

Development Environments

Visual Studio 201X

Xamarin Studio (PC + Mac)

Code Sharing Techniques

Code Sharing Techniques

There are multiple ways in which you can share code:• portable class libraries (PCLs)• partial classes• compiler conditional blocks• shared projects

Xamarin Architecture Guide

Xamarin Architecture Guide

Demo Time

What is MVVM?

MVVM vs MVC

In the MVVM the logic is stored in the presenter and the view is completely isolated from the model. 

Model View ViewModel

MVVM Technical DetailsIt is derived from the Model View Controller Pattern.

• properties• data binding• INotifyPropertyChanged• INotifyCollectionChanged• IValueConverter• ICommand• UI thread

Why MVVM?

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

The MvvmCross Magic

The MvvmCross Magic

It’s an open-source framework maintained by Stuart Lodge & 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.

The MvvmCross Magic

The MvvmCross Magic

MvvmCross has support for:• Xamarin.iOS• Mac• Xamarin.Android• Windows Presentation Foundation• Windows Phone• Windows 8• Universal Windows Platform

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

Data Binding, Commands, Navigation

Data Binding - Properties

No C#, just XAML

<TextBox Text="{Binding Password, Mode=TwoWay}" />

Data Binding - Properties

No C#, just XML

xmlns:local="http://schemas.android.com/apk/res-auto"<EditText local:MvxBind="Text Password"

Data Binding - Properties

Just C#

var set = this.CreateBindingSet<LoginViewController, LoginViewModel>(); set.Bind(textField_Password).To(vm => vm.Password);

Data Binding - ListviewsNo C#, just XAML

<ListBox ItemsSource="{Binding MyCollection}"<ListBox.ItemTemplate>

<DataTemplate> …..</DataTemplate>

</ListBox.ItemTemplate></ListBox>

Data Binding - Listviews

No C#, just XML

<Mvx.MvxListView local:MvxBind="ItemsSource MyCollection; ItemClick ViewDetailsCommand"local:MvxItemTemplate="@layout/item_template_row" />

Data Binding - Listviews

Just C#

var set = this.CreateBindingSet<XViewController, XViewModel>();set.Bind(source).To(x => x.MyCollection);set.Apply();

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>

ViewModel Commands

No C#, just XML

xmlns:local="http://schemas.android.com/apk/res-auto"<Button local:MvxBind="Click LoginCommand" />

ViewModel Commands

Just C#

var set = this.CreateBindingSet<LoginViewController, LoginViewModel>();set.Bind(btn_Login).To(x => x.LoginCommand);set.Apply();

Navigation

Go forward:CurrentViewModelInstance.ShowViewModel<NewViewModel>();

Navigation

Go back:CurrentViewModelInstance.Close(this);

MvvmCross App Architecture

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

Small Demo Time

MvvmCross Pros & Cons

Pros:• interchangeable code module• supports Test Driven Development (TDD)• it follows the Core pattern• it has data binding

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

Xamarin Pros & Cons

Pros:• native experience• you can use a lot of components that .NET developers

already use• shared code base• only one programming language

Xamarin Pros & Cons

Cons:• you need a Mac• it has a license fee per developer, per platform -> $• bugs can appear: https://bugzilla.xamarin.com/• C# is needed

Xamarin Pros

Thank you very much!