MvvmCross and Material Design

Transcript

1. MvvmCross & Material design Building Native Cross-Platform Apps Martijn van Dijk @mhvdijk mhvdijk@gmail.com github.com/martijn00 speakerdeck.com/martijn00
2. Agenda ▪ What is MvvmCross ▪ Material Design explained ▪ Bringing Material design to life with Android support
3. 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
4. Why MvvmCross? ▪ Cross-platform awesomeness! ▪ Support for all major platforms ▪ Most advanced Mvvm library for Xamarin and .NET cross platform ▪ Large and engaged community ▪ Fast release cycle ▪ Clean and easy conventions Miguel de Icaza (Xamarin CTO) “I love MvvmCross” ▪ Used by many enterprise companies e.g: - Microsoft - Xamarin inc. - Dutch government - Olo - Nokia Scott Hanselman (Microsoft Developer Evangelist) “I am really impressed with MvvmCross”
5. MvvmCross supported platforms ▪ Android ▪ iOS ▪ Windows ▪ Xamarin.Forms ▪ tvOS ▪ Google wear ▪ iWatch ▪ Mac
6. MvvmCross details Highlights ▪ Flexible architecture ▪ PCL based ▪ Inversion of Control ▪ Dependency injection ▪ Value Converters ▪ Bindings ▪ Testable ▪ Plugins Resources ▪ Github.com/MvvmCross ▪ MvvmCross.com ▪ Slack (#mvvmcross) ▪ Stackoverflow ▪ Xamarin Forums
7. Presenters Specifications ▪ Customize view presentation ▪ Platform-specific ▪ Still retain View Model logic ▪ Presentation hints Examples ▪ Tabs / Panorama ▪ Split View / Master-Detail ▪ Fragments ▪ Modals ▪ Hamburger menu
8. Plugins ▪ Messenger ▪ Phone Call ▪ Picture Chooser ▪ SQLite ▪ Visibility ▪ Web Browser + Many More! MvvmCross ▪ Accelerometer ▪ Download Cache ▪ Email ▪ File ▪ Json ▪ Localization ▪ Location Plugins available at https://github.com/MvvmCross/MvvmCross-Plugins
9. 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()
10. 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>();
11. What is material design? and how it helps the user understand what’s happening.
12. It’s not only a “designer thingy”
13. The 3 principles of Material design
14. Principle 1 Material is the metaphor
15. met·a·phor noun A thing regarded as representative or symbolic of something else, especially something abstract.
17. The 3D space of Material design
20. Principle 2 Bold, graphic, intentional
24. Principle 3 Motion provides meaning
25. Material reacts to user input but is never distracting
28. Material & Android support for MvvmCross ▪ Design - NavigationView - FloatingActionButton ▪ AppCompat - android:Theme - Toolbar - DrawerToggle ▪ V4 - DrawerLayout - SwipeRefresh - ViewPager (FragmentStatePager) ▪ LeanBack ▪ Preference - Compat Fragments ▪ Fragging - V4 Fragments - MvxCachingFragmentActivity ▪ RecyclerView - ItemTouchHelper for Xamarin
29. Other Material & Android support libraries ▪ Cardview ▪ Pallete ▪ Gridlayout ▪ Mediarouter ▪ V8 Support ▪ V13 Support ▪ Annotations support ▪ Custom tabs ▪ Percent support ▪ Recommendation support
30. How to use it?
31. Tips ▪ Keep it simple ▪ Separation of Concerns ▪ Don’t try to invent the wheel again, use plugins, samples, etc ▪ Use Xamarin player or GenyMotion as emulator for Android ▪ Test all changes (UITest, Unit test, etc) ▪ Use a common PCL profile (profile7 or profile259) or .NET Platform Standard ▪ Enable “Analysis” XS > Preferences > Text Editor > Source Analysis > Enable ▪ Get help on Slack: https://xamarinchat.herokuapp.com/ ▪ Follow influencers on Twitter #Xamarin #MvvmCross
32. Xamarin & MvvmCross Hackathon ▪ Wednesday December 16th ▪ Thursday January 14th ▪ C#6 and Xamarin Plugins ▪ Get experience using real life scenarios ▪ Have fun! http://www.meetup.com/Xamarin-MvvmCross-Meetup/