Cross platform Xamarin Apps With MVVM
0 likes941 views
The document discusses using the Model-View-ViewModel (MVVM) pattern to increase cross-platform code sharing in Xamarin apps. MVVM separates app logic, UI logic, and UI, allowing business logic to be shared via portable class libraries and UI logic to interact with it in a cross-platform manner via bindings and commands. This produces more testable and maintainable apps with less platform-specific code than traditional approaches. The document provides an example tip calculator app to illustrate MVVM concepts and benefits.
Ad
More Related Content
What's hot (20)
Viewers also liked (12)
Ad
Similar to Cross platform Xamarin Apps With MVVM (20)
Ad
More from Jim Bennett (10)
Recently uploaded (20)
Cross platform Xamarin Apps With MVVM
- 1. Making your native apps even more cross-platform using MVVM
- 2. Jim Bennett Mobile Developer at EROAD @JimBobBennett https://JimBobBennett.io https://github.com/jimbobbennett
- 3. Author of Xamarin in Action Learn how to build production-quality Xamarin apps using MVVM to increase the amount of cross-platform code Now available as part of the Manning Early Access Program http://xam.jbb.io
- 4. Why do we use Xamarin?
- 6. Code can be shared across platforms
- 7. Xamarin Cross-Platform apps • Xamarin apps are native apps • Code written using the core libraries can be shared across all platforms using PCLs • Only the platform specific stuff is not cross platform
- 8. MVVM increases the amount of testable shared code in your apps
- 10. Business logic - in shared code in a PCL public class TipCalculator { public decimal Calculate(decimal amount) !=> amount*0.15m; }
- 11. UI - in platform-specific code in iOS/Android app projects
- 12. UI is wired up to business logic in platform-specific code !// Android Calculate.Click += (s, e) !=> { var amount = Convert.ToDecimal(BillAmount.Text); TipAmount.Text = _tipCalculator.Calculate(amount).ToString("C2"); }; Calculate.Enabled = false; BillAmount.TextChanged += (s, e) !=> Calculate.Enabled = !string.IsNullOrEmpty(BillAmount.Text); !// iOS Calculate.TouchUpInside += (s, e) !=> { var amount = Convert.ToDecimal(BillAmount.Text); TipAmount.Text = _tipCalculator.Calculate(amount).ToString("C2"); }; Calculate.Enabled = false; BillAmount.AddTarget((s, e) !=> Calculate.Enabled = !string.IsNullOrEmpty(BillAmount.Text), UIControlEvent.EditingChanged);
- 13. Only the business logic can be unit tested
- 14. Only the business logic is cross-platform
- 15. The more cross-platform code the better
- 16. MVVM FTW!
- 17. What is MVVM? • Design pattern used for building UI based apps - originally invented by Microsoft for WPF • Model is business logic • View is pure UI, no logic • View Model is UI logic • Binding wires up view to view model
- 18. Model layer is business logic • Written using cross-platform code • Can be unit tested • TipCalculator would be part of the model layer
- 19. View layer is pure UI • Written using platform-specific code • Cannot be unit tested • iOS ViewController/Storyboard and Android Activity/layout would be part of the view layer
- 20. ViewModel layer and bindings are where all the magic is
- 21. Each view is backed by a view model TipCalcView public class TipCalcViewModel : INotifyPropertyChanged { !!... } TipCalcViewModel
- 22. State comes from properties • When these properties change an event is raised • The binding layer listens to this event and updates the UI • Can be used for data, or properties that define the UI • Value converters can be used to change the type
- 23. Behaviour comes from commands • Commands are objects that wrap actions • Commands can control if they can be executed • The binding layer listens to UI events and executes commands • If the commands cannot be execute the binding layer can update the UI to reflect this
- 24. View models can also handle navigation • Each view has one view model • Navigation is from view model to view model • The MVVM framework finds the right view for a view model and shows it
- 25. Xamarin Cross-Platform apps with MVVM • Business logic and UI logic can be in platform specific code • Commands and property notifications provide a cross-platform way to interact with the UI • Some application logic is shared • Less platform specific code
- 26. Demo time!
- 27. MVVM Frameworks
- 29. Xamarin Forms was built for MVVM!
- 30. MVVM increases the amount of testable shared code in your apps
- 31. Jim Bennett Mobile Application Developer at EROAD @JimBobBennett https://JimBobBennett.io Sample code at: https://github.com/jimbobbennett/CrossPlatformSummit
- 32. Author of Xamarin in Action Learn how to build production-quality Xamarin apps using MVVM to increase the amount of cross-platform code Now available as part of the Manning Early Access Program http://xam.jbb.io