martijn van dijk - mvvmcross singapore dev days 2016
TRANSCRIPT
![Page 1: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/1.jpg)
MvvmCrossBuilding Native Cross-Platform Apps
Martijn van Dijkgithub.com/martijn00speakerdeck.com/martijn00
1
![Page 2: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/2.jpg)
22
Progress is teamwork
![Page 3: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/3.jpg)
The history ofMvvmCross
3
![Page 4: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/4.jpg)
Started by Stuart Lodge
Started as fork of MonoCross (Mvc framework)
November 2012
4
![Page 5: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/5.jpg)
Evolved into MvvmCross
Taken over by
● Tomasz Cielecki / Cheesebaron
● Martijn van Dijk / Martijn00
+ Many others
June 2013
5
![Page 6: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/6.jpg)
Android support added
June 2015
Xamarin.Forms added
August 2015
Plugin structure added
September 2015
6
![Page 7: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/7.jpg)
iOS supportadded
February 2016 And more in the future!
7
![Page 8: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/8.jpg)
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
8
![Page 9: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/9.jpg)
WhyMvvmCross?
9
![Page 10: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/10.jpg)
10
Cross platform awesomeness!
Support for all major platforms
Most advanced Mvvm library for Xamarin and
.NET cross platform
![Page 11: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/11.jpg)
11
Large and engaged community
Fast release cycle
Clean & easy conventions
![Page 12: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/12.jpg)
12
![Page 13: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/13.jpg)
I love MvvmCross
I am really impressed
with MvvmCross
Miguel de IcazaXamarin CTO
Scott HanselmanMicrosoft Developer
Evangelist
13
![Page 14: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/14.jpg)
MvvmCross Supported platforms■ Android■ iOS■ Windows■ Xamarin.Forms■ Mac■ And more!
14
![Page 15: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/15.jpg)
MvvmCross Highlights
■ Flexible architecture■ PCL based■ Inversion of Control■ Dependency injection
■ Value Converters■ Bindings■ Testable■ Plugins
15
![Page 16: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/16.jpg)
Let take a look at setting up a basic project
16
![Page 17: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/17.jpg)
1717
BindingsiOS:
var set = this.CreateBindingSet<MainViewController, MainViewModel>();set.Bind(Label).To(vm => vm.Title);set.Apply();
Android:
local:MvxBind="Text Title"
![Page 18: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/18.jpg)
18
Device & platform fragmentation
![Page 19: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/19.jpg)
19
■ Customize view presentation■ Platform-specific■ Still retain View Model logic■ Presentation hints
The solution?MvvmCross presenters
![Page 20: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/20.jpg)
2020
Let’s take a look at some samples
![Page 21: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/21.jpg)
2121
Hamburger menu Segmented
control
Tab bar
![Page 22: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/22.jpg)
2222
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>
![Page 23: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/23.jpg)
2323
Navigation drawer Tabs
Floating action button
![Page 24: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/24.jpg)
2424
Android fragment presenter
// To use a custom presenter override the IMvxAndroidViewPresenter in your Android setup.cs
protected 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>
![Page 25: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/25.jpg)
25
■ Tabs / Panorama■ Split View / Master-Detail■ Fragments■ Modals■ Hamburger menu
Technical implementations
![Page 26: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/26.jpg)
2626
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
![Page 27: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/27.jpg)
Generics
■ 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()27
![Page 28: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/28.jpg)
IoC (Inversion of Control)
1. Use interfaces2. Define implementation of interfaces at runtime3. Job done! :)
■ Singleton: Mvx.RegisterSingleton<T>();■ Lazy: Mvx.ConstructAndRegisterSingleton<T>();■ Dynamic: Mvx.RegisterType<T>();
Mvx.Resolve<T>();28
![Page 29: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/29.jpg)
Dependency Injection
public class MyViewModel : MvxViewModel { public MyViewModel(IMvxJsonConverter jsonConverter, IMvxGeoLocationWatcher locationWatcher) { // Do stuff.... } }
29
![Page 30: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/30.jpg)
■ 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!
30
MvvmCross Plugins
![Page 31: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/31.jpg)
Messengerpublic 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; } } 31
![Page 32: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/32.jpg)
Material Design support for MvvmCross■ 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
32
![Page 33: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/33.jpg)
See it in action,demo time!
33
![Page 34: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/34.jpg)
Other Material &Android support libraries
■ Cardview■ Pallete■ Gridlayout■ Mediarouter■ V8 Support
■ V13 Support■ Annotations support■ Custom tabs■ Percent support■ Recommendation support
34
![Page 35: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/35.jpg)
3535
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 }}
![Page 36: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/36.jpg)
■ Github.com/MvvmCross■ MvvmCross.com■ Slack (#mvvmcross)■ Stackoverflow■ Xamarin Forums
MvvmCross Resources
36
![Page 37: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/37.jpg)
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
37
![Page 38: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/38.jpg)
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
38
Get involved!
![Page 39: Martijn Van Dijk - MvvmCross Singapore Dev Days 2016](https://reader036.vdocument.in/reader036/viewer/2022081513/587156bc1a28ab8e5b8b549d/html5/thumbnails/39.jpg)
Questions?Martijn van Dijk
github.com/martijn00speakerdeck.com/martijn00
39