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.

Cross platform Xamarin Apps With MVVM

521 views

Published on

MVVM allows you to increase the amount of cross-platform, unit-testable code in your apps.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cross platform Xamarin Apps With MVVM

  1. 1. Making your native apps even more cross-platform using MVVM
  2. 2. Jim Bennett Mobile Developer at EROAD @JimBobBennett https://JimBobBennett.io https://github.com/jimbobbennett
  3. 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. 4. Why do we use Xamarin?
  5. 5. Common languages and framework
  6. 6. Code can be shared across platforms
  7. 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. 8. MVVM increases the amount of testable shared code in your apps
  9. 9. Example - TipCalc
  10. 10. Business logic - in shared code in a PCL public class TipCalculator
 {
 public decimal Calculate(decimal amount) !=> amount*0.15m;
 }

  11. 11. UI - in platform-specific code in iOS/Android app projects
  12. 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. 13. Only the business logic can be unit tested
  14. 14. Only the business logic is cross-platform
  15. 15. The more cross-platform code the better
  16. 16. MVVM FTW!
  17. 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. 18. Model layer is business logic • Written using cross-platform code • Can be unit tested • TipCalculator would be part of the model layer
  19. 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. 20. ViewModel layer and bindings are where all the magic is
  21. 21. Each view is backed by a view model TipCalcView public class TipCalcViewModel : INotifyPropertyChanged
 {
 !!...
 } TipCalcViewModel
  22. 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. 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. 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. 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. 26. Demo time!
  27. 27. MVVM Frameworks
  28. 28. What about Xamarin Forms?
  29. 29. Xamarin Forms was built for MVVM!
  30. 30. MVVM increases the amount of testable shared code in your apps
  31. 31. Jim Bennett Mobile Application Developer at EROAD @JimBobBennett https://JimBobBennett.io Sample code at: https://github.com/jimbobbennett/CrossPlatformSummit
  32. 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

×