cross-platform apps using xamarin and mvvmcross - martijn van dijk - codemotion milan 2016
TRANSCRIPT
Cross-platform Apps using Xamarin and MvvmCrossMartijn van Dijk
MILAN 25-26 NOVEMBER 2016
github.com/martijn00speakerdeck.com/martijn00
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
■ 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
51