Cross-platform Apps using Xamarin and MvvmCrossMartijn van Dijk

MILAN 25-26 NOVEMBER 2016

github.com/martijn00speakerdeck.com/martijn00

@mhvdijkmhvdijk@gmail.com

2

Progress is teamworkCorporate introductionHelping you solve mobile challenges

3

Stay currentWorks EverywhereNative5-Star App

Integration

Your priorities when building apps

4

Approaches to mobile app development

Silo Black box

5

Silo approach

iOS App

Obj-CSwift

XCode

Android AppJava

EclipseAndroidStudio

Windows AppC#

Visual Studio

6

Black box approach

Black Box

Can build app using high-level tools that convert a single code base (typically in HTML/JavaScript) to an app for each platform

HTML

CSS

JavaScript

ActionScrip

t

LuaHTML

ActionScript

77

Xamarin’s Mission

Make it fast, easy, and fun to create great mobile apps.

8

Shared C# codebase • 100% native API access • High performance

iOS C# UI

Windows C# UIAndroid C# UI

Shared C# Mobile

Xamarin’s Unique Approach

9

Completemobile lifecycle

Enterprise-grade

Xamarin

1010

Anything you can do in Objective-C, Swift, or Java can be done in C# and Visual Studio with Xamarin.

Let’s build an app,demo time!

11

12

Architecture matters

■ Setting up a mobile app doing it ‘right’ is difficult

■ Take your time!■ Take your time!■ Take your time!

Building an app with/on the wrong foundation is going to cost you in the end

13

Architecture: patterns

■ There are a few architectural design patterns that can be used.

■ Xamarin does not (en)force you to choose a particular one.

■ Most used are MVC and MVVM.■ It’s generally considered that MVVM suits Xamarin

the best.

Why Mvvm?

View Binder ViewModel

Model

Button

Text

1. Action

1. Action

3. Command

5. Notify change

6. Change data

4. Access data

2. Event handling

14

1515

MvvmCross Mission

Make quality apps with a high percentage shared code.

The history ofMvvmCross

16

Started by Stuart Lodge

Started as fork of MonoCross (Mvc framework)

November 2012

17

Evolved into MvvmCross

Taken over by ● Tomasz Cielecki /

Cheesebaron

● Martijn van Dijk / Martijn00

+ Many others

June 2013

18

Android support added

June 2015

Xamarin.Forms added

August 2015

Plugin structure added

September 2015

19

iOS supportadded

February 2016

And more in the future!

20

WhyMvvmCross?

21

22

Cross platform awesomeness!

Support for all major platforms

Most advanced Mvvm library for

Xamarin and.NET cross platform

23

Large and engaged community

Fast release cycle

Clean & easy conventions

24

I love MvvmCro

ss

I am really impressed

with MvvmCross

Miguel de IcazaXamarin CTO

Scott Hanselman

Microsoft Developer Evangelist

25

MvvmCross Supported platforms■ Android■ iOS■ Windows■ Xamarin.Forms■ Mac■ And more! 26

MvvmCross Highlights

■ Flexible architecture■ PCL based■ Inversion of Control■ Dependency injection

■ Value Converters■ Bindings■ Testable■ Plugins

27

Let take a look at setting up a basic project

28

2929

BindingsiOS:

var set = this.CreateBindingSet<MainViewController, MainViewModel>();set.Bind(Label).To(vm => vm.Title);set.Apply();

Android:

local:MvxBind="Text Title"

30

Device & platform fragmentation

31

■Customize view presentation■Platform-specific■Still retain View Model logic■Presentation hints

The solution?MvvmCross presenters

3232

Let’s take a look at some samples

3333

Hamburger menu

Segmented control

Tab bar

3434

iOS presenter// Override the IMvxIosViewPresenter to customize iOS presentation

protected override IMvxIosViewPresenter CreatePresenter(){ return new MvxSidePanelsPresenter((MvxApplicationDelegate)ApplicationDelegate, Window);}// Use the Panel attribute to indicate where a viewcontroller is shown on the screen

[MvxPanelPresentation(MvxPanelEnum.Left, MvxPanelHintType.ActivePanel, false)]public class LeftPanelView : BaseViewController<LeftPanelViewModel>

3535

Navigation drawer Tabs

Floating action button

3636

Android fragment presenter// To use a custom presenter override the IMvxAndroidViewPresenter in your Android setup.csprotected override IMvxAndroidViewPresenter CreateViewPresenter(){ var mvxFragmentsPresenter = new MvxFragmentsPresenter(AndroidViewAssemblies); Mvx.RegisterSingleton<IMvxAndroidViewPresenter>(mvxFragmentsPresenter); return mvxFragmentsPresenter;}// Use the Fragment attribute to show fragments within an Android Activity

[MvxFragment(typeof (MainViewModel), Resource.Id.content_frame, false)][Register("com.sample.droid.fragments.LoginFragment")]public class LoginFragment : BaseFragment<LoginViewModel>

37

■ Tabs / Panorama■ Split View / Master-Detail■ Fragments■ Modals■ Hamburger menu

Technical implementations

3838

Enables the best Native UI

Build beautiful Native Apps using Xamarin and

MvvmCross!

Easy to implement custom presenters

Enables you to customize the behavior of your app without making your app

multiple times

Most code reuseUsing the presenters saves

you budget because you only need to code navigation once

Recap of MvvmCross presenters

■MvvmCross uses CoC (Convention over Configuration) by default- LoginView > LoginViewModel

■Generics can be used too- LoginView : MvxActivity<LoginViewModel>- MainView : MvxActivity<SomeDifferentNameViewModel>

■Possible to override in setup.cs- protected override IDictionary<Type, Type>

GetViewModelViewLookup()39

Generics

1.Use interfaces

2.Define implementation of interfaces at runtime

3.Job done! :)

■Singleton: Mvx.RegisterSingleton<T>();

■Lazy: Mvx.ConstructAndRegisterSingleton<T>();

■Dynamic: Mvx.RegisterType<T>();

Mvx.Resolve<T>();40

IoC (Inversion of Control)

public class MyViewModel : MvxViewModel { public MyViewModel(IMvxJsonConverter jsonConverter, IMvxGeoLocationWatcher locationWatcher) { // Do stuff.... } }

41

Dependency Injection

■ Accelerometer

■ Download Cache

■ Email

■ File

■ Json

■ Localization

■ Location

Plugins available athttps://github.com/MvvmCross/MvvmCross-Plugins

■ Messenger

■ Phone Call

■ Picture Chooser

■ SQLite

■ Visibility

■ Web Browser

+ Many More!42

MvvmCross Plugins

public class LocationViewModel : MvxViewModel { private readonly MvxSubscriptionToken _token;

public LocationViewModel(IMvxMessenger messenger) { _token = messenger.Subscribe<LocationMessage>(OnLocationMessage); }

private void OnLocationMessage(LocationMessage locationMessage) { Lat = locationMessage.Lat; Lng = locationMessage.Lng; } }

43

Messenger

■ V7 AppCompat

- MvxCachingFragmentActivity

- android:Theme

- Toolbar

- DrawerToggle

■ Core.UI

- SwipeRefresh

- DrawerLayout

■ Core.Utils

- WakefulBroadcastReceiver

■ Fragments

- Support Fragment

- ViewPager (FragmentStatePager)

■ RecyclerView

- ItemTouchHelper for Xamarin

- Multiple item templates

■ Design

- NavigationView

- FloatingActionButton

■ Compat

■ Media.Compat

■ LeanBack

■ Preference

44

Material Design support for MvvmCross

See it in action,demo time!

45

Other Material &Android support libraries

■ Cardview

■ Pallete

■ Gridlayout

■ Mediarouter

■ V8 Support

■ V13 Support

■ Annotations support

■ Custom tabs

■ Percent support

■ Recommendation support

46

4747

Testingusing MvvmCross.Test.Core;using Moq;using NUnit.Framework;

[TestFixture]public class MyTest : MvxIoCSupportingTest{ [Test] public void TestViewModel() { base.Setup(); // from MvxIoCSupportingTest

// your test code }}

■ Github.com/MvvmCross

■ MvvmCross.com■ Slack (#mvvmcross)■ Stackoverflow■ Xamarin Forums

MvvmCross Resources

48

Tips

■ Keep it simple

■ Separation of Concerns

■ Don’t try to invent the wheel again, use plugins, samples, etc.

■ Use the Analysis plugin to fix common mistakes

49

Get help on Slack

xamarinchat.herokuapp.com #MvvmCross channel

Follow influencers#MvvmCross

@Mhvdijk@Cheesebaron@MvvmCross

Join the LinkedIn group

linkedin.com/groups/8456977MvvmCross & Xamarin group

Contribute on Github

github.com/MvvmCross/MvvmCross

50

Get involved!

Questions?Martijn van Dijk

github.com/martijn00speakerdeck.com/martijn00

@mhvdijkmhvdijk@gmail.com

51