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.

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?

5. Common languages and
framework

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

9. Example - TipCalc

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

28. What about Xamarin
Forms?

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