Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Martijn Van Dijk - MvvmCross Singapore Dev Days 2016

762 views

Published on

Martijn Van Dijk - MvvmCross
Building Native Cross Platform Apps

Presented at Xamarin Dev Day Singapore:
http://www.meetup.com/SingaporeMobileDev/events/231439633

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Martijn Van Dijk - MvvmCross Singapore Dev Days 2016

  1. 1. MvvmCross Building Native Cross-Platform Apps Martijn van Dijk github.com/martijn00 speakerdeck.com/martijn00 @mhvdijk mhvdijk@gmail.com 1
  2. 2. 22 Progress is teamwork
  3. 3. The history of MvvmCross 3
  4. 4. Started by Stuart Lodge Started as fork of MonoCross (Mvc framework) November 2012 4
  5. 5. Evolved into MvvmCross Taken over by ● Tomasz Cielecki / Cheesebaron ● Martijn van Dijk / Martijn00 + Many others June 2013 5
  6. 6. Android support added June 2015 Xamarin.Forms added August 2015 Plugin structure added September 2015 6
  7. 7. iOS support added February 2016 And more in the future! 7
  8. 8. 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
  9. 9. Why MvvmCross? 9
  10. 10. 10 Cross platform awesomeness! Support for all major platforms Most advanced Mvvm library for Xamarin and .NET cross platform
  11. 11. 11 Large and engaged community Fast release cycle Clean & easy conventions
  12. 12. 12
  13. 13. I love MvvmCross I am really impressed with MvvmCross Miguel de Icaza Xamarin CTO Scott Hanselman Microsoft Developer Evangelist 13
  14. 14. MvvmCross Supported platforms ■ Android ■ iOS ■ Windows ■ Xamarin.Forms ■ Mac ■ And more! 14
  15. 15. MvvmCross Highlights ■ Flexible architecture ■ PCL based ■ Inversion of Control ■ Dependency injection ■ Value Converters ■ Bindings ■ Testable ■ Plugins 15
  16. 16. Let take a look at setting up a basic project 16
  17. 17. 1717 Bindings iOS: var set = this.CreateBindingSet<MainViewController, MainViewModel>(); set.Bind(Label).To(vm => vm.Title); set.Apply(); Android: local:MvxBind="Text Title"
  18. 18. 18 Device & platform fragmentation
  19. 19. 19 ■ Customize view presentation ■ Platform-specific ■ Still retain View Model logic ■ Presentation hints The solution? MvvmCross presenters
  20. 20. 2020 Let’s take a look at some samples
  21. 21. 2121 Hamburger menu Segmented control Tab bar
  22. 22. 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>
  23. 23. 2323 Navigation drawer Tabs Floating action button
  24. 24. 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>
  25. 25. 25 ■ Tabs / Panorama ■ Split View / Master-Detail ■ Fragments ■ Modals ■ Hamburger menu Technical implementations
  26. 26. 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 reuse Using the presenters saves you budget because you only need to code navigation once Recap of MvvmCross presenters
  27. 27. 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
  28. 28. IoC (Inversion of Control) 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>(); 28
  29. 29. Dependency Injection public class MyViewModel : MvxViewModel { public MyViewModel(IMvxJsonConverter jsonConverter, IMvxGeoLocationWatcher locationWatcher) { // Do stuff.... } } 29
  30. 30. ■ Accelerometer ■ Download Cache ■ Email ■ File ■ Json ■ Localization ■ Location Plugins available at https://github.com/MvvmCross/MvvmCross-Plugins ■ Messenger ■ Phone Call ■ Picture Chooser ■ SQLite ■ Visibility ■ Web Browser + Many More! 30 MvvmCross Plugins
  31. 31. Messenger 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; } } 31
  32. 32. 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
  33. 33. See it in action, demo time! 33
  34. 34. Other Material & Android support libraries ■ Cardview ■ Pallete ■ Gridlayout ■ Mediarouter ■ V8 Support ■ V13 Support ■ Annotations support ■ Custom tabs ■ Percent support ■ Recommendation support 34
  35. 35. 3535 Testing using MvvmCross.Test.Core; using Moq; using NUnit.Framework; [TestFixture] public class MyTest : MvxIoCSupportingTest { [Test] public void TestViewModel() { base.Setup(); // from MvxIoCSupportingTest // your test code } }
  36. 36. ■ Github.com/MvvmCross ■ MvvmCross.com ■ Slack (#mvvmcross) ■ Stackoverflow ■ Xamarin Forums MvvmCross Resources 36
  37. 37. 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
  38. 38. Get help on Slack xamarinchat.herokuapp.com #MvvmCross channel Follow influencers #MvvmCross @Mhvdijk @Cheesebaron @MvvmCross Join the LinkedIn group linkedin.com/groups/8456977 MvvmCross & Xamarin group Contribute on Github github.com/MvvmCross/MvvmCross 38 Get involved!
  39. 39. Questions? Martijn van Dijk github.com/martijn00 speakerdeck.com/martijn00 @mhvdijk mhvdijk@gmail.com 39

×