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.
Making your native apps
even more cross-platform
using MVVM
Jim Bennett
Mobile Developer at EROAD
@JimBobBennett
https://JimBobBennett.io
https://github.com/jimbobbennett
Author of Xamarin in Action
Learn how to build production-quality Xamarin apps using MVVM
to increase the amount of cross-...
Why do we use Xamarin?
Common languages and
framework
Code can be shared across
platforms
Xamarin Cross-Platform apps
• Xamarin apps are native apps
• Code written using the core libraries
can be shared across al...
MVVM increases the amount of
testable shared code in your apps
Example - TipCalc
Business logic - in shared
code in a PCL
public class TipCalculator

{

public decimal Calculate(decimal amount) !=> amoun...
UI - in platform-specific code
in iOS/Android app projects
UI is wired up to business
logic in platform-specific code
!// Android

Calculate.Click += (s, e) !=>

{

var amount = Conv...
Only the business logic can
be unit tested
Only the business logic is
cross-platform
The more cross-platform
code the better
MVVM FTW!
What is MVVM?
• Design pattern used for building UI
based apps - originally invented by
Microsoft for WPF
• Model is busin...
Model layer is business logic
• Written using cross-platform code
• Can be unit tested
• TipCalculator would be part of th...
View layer is pure UI
• Written using platform-specific code
• Cannot be unit tested
• iOS ViewController/Storyboard and An...
ViewModel layer and bindings
are where all the magic is
Each view is backed by a
view model
TipCalcView
public class TipCalcViewModel :
INotifyPropertyChanged

{

!!...

}
TipCal...
State comes from properties
• When these properties change an event is raised
• The binding layer listens to this event an...
Behaviour comes from
commands
• Commands are objects that wrap actions
• Commands can control if they can be executed
• Th...
View models can also handle
navigation
• Each view has one view model
• Navigation is from view model to view model
• The ...
Xamarin Cross-Platform apps
with MVVM
• Business logic and UI logic can be in
platform specific code
• Commands and propert...
Demo time!
MVVM Frameworks
What about Xamarin
Forms?
Xamarin Forms was
built for MVVM!
MVVM increases the amount of
testable shared code in your apps
Jim Bennett
Mobile Application Developer at EROAD
@JimBobBennett
https://JimBobBennett.io
Sample code at:
https://github.c...
Author of Xamarin in Action
Learn how to build production-quality Xamarin apps using MVVM
to increase the amount of cross-...
Upcoming SlideShare
Loading in …5
×

of

Cross platform Xamarin Apps With MVVM Slide 1 Cross platform Xamarin Apps With MVVM Slide 2 Cross platform Xamarin Apps With MVVM Slide 3 Cross platform Xamarin Apps With MVVM Slide 4 Cross platform Xamarin Apps With MVVM Slide 5 Cross platform Xamarin Apps With MVVM Slide 6 Cross platform Xamarin Apps With MVVM Slide 7 Cross platform Xamarin Apps With MVVM Slide 8 Cross platform Xamarin Apps With MVVM Slide 9 Cross platform Xamarin Apps With MVVM Slide 10 Cross platform Xamarin Apps With MVVM Slide 11 Cross platform Xamarin Apps With MVVM Slide 12 Cross platform Xamarin Apps With MVVM Slide 13 Cross platform Xamarin Apps With MVVM Slide 14 Cross platform Xamarin Apps With MVVM Slide 15 Cross platform Xamarin Apps With MVVM Slide 16 Cross platform Xamarin Apps With MVVM Slide 17 Cross platform Xamarin Apps With MVVM Slide 18 Cross platform Xamarin Apps With MVVM Slide 19 Cross platform Xamarin Apps With MVVM Slide 20 Cross platform Xamarin Apps With MVVM Slide 21 Cross platform Xamarin Apps With MVVM Slide 22 Cross platform Xamarin Apps With MVVM Slide 23 Cross platform Xamarin Apps With MVVM Slide 24 Cross platform Xamarin Apps With MVVM Slide 25 Cross platform Xamarin Apps With MVVM Slide 26 Cross platform Xamarin Apps With MVVM Slide 27 Cross platform Xamarin Apps With MVVM Slide 28 Cross platform Xamarin Apps With MVVM Slide 29 Cross platform Xamarin Apps With MVVM Slide 30 Cross platform Xamarin Apps With MVVM Slide 31 Cross platform Xamarin Apps With MVVM Slide 32
Upcoming SlideShare
Hybrid Mobile App Development - Xamarin
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Cross platform Xamarin Apps With MVVM

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

854

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

20

Shares

0

Comments

0

Likes

0

×