The document discusses building cross-platform apps with Xamarin and MvvmCross. Xamarin allows writing code once in C# that can target iOS, Android and Windows platforms. It works by compiling C# to native code for each platform, allowing full access to native APIs and good performance. MvvmCross is an MVVM framework that works with Xamarin to enable code sharing through shared view models and data binding across platforms. It handles navigation and communicating with views. The document outlines the architectures of Xamarin and MvvmCross, and their advantages like testability and code reuse but also disadvantages like additional complexity.

1. Building Cross-Platform Apps
with Xamarin and MvvmCross
Flavius-Radu DEMIAN

2. A bit about me
• General Manager@Deventure
• Timisoara .Net Meetup organizer
• Mobile and Web developer
• Xamarin and Umbraco enthusiast
• In love with technology
flavius.demian@deventure.co @flaviusdemian

3. Agenda
Mobile Development Approaches
Xamarin’s Unique Approach
The Xamarin Magic
How it Works on iOS
How it Works on Android
Code Sharing Techniques

4. Agenda
What is MVVM?
Why MVVM?
The MvvmCross magic
Data-Binding, Commands, Navigation
Advantages
Disadvantages

5. Expectations
I wish to have an interactive presentation.
Please feel free to ask questions any time.
After this presentation, you should know:
• what Xamarin is and how to use it
• the advantages and disadvantages of Xamarin
• what is MVVM
• what Mvvmcross is and how to use it

6. Expectations
My ultimate goal is to make you
curios.
Go home and try it yourself!

7. Mobile Development Approaches

8. Mobile Development Approaches
Silo Approach

9. Silo Approach
• each platform with it’s own stack – in it’s own silo
• no code sharing
• multiple teams => many developers
• multiple codebase => synchronization problem
• different toolsets

10. Mobile Development Approaches
Web Approach

11. Web Approach
“Write once, run anywhere”.
• no apps to deploy to the stores
• shared codebase
• basically a native app with a Webview
• native look is simulated with CSS
• most times you can tell it is written in HTML
• fewer developers

12. Xamarin’s Unique Approach

13. Xamarin’s Unique Approach

14. Xama…what?

15. Xamarin Timeline

16. Xamarin’s Unique Approach
• native user interface
• native performance
• shared code across platforms
• usage of C# & .NET framework
• full API coverage
• fewer developers

17. Xamarin’s Unique Approach
Probably the best way in a “Mobile First. Cloud First. People First”
Satya Nadella

18. The Xamarin Magic
Write Everything in C#

19. The Xamarin Magic
.NET + iOS APIs
100% coverage

20. The Xamarin Magic
.NET + Android APIs
100% coverage

21. The Xamarin Magic
.NET + Windows APIs

22. The Xamarin Magic
Xamarin takes the C# code and it compiles it down to native on iOS
and Android.
The magic is that you can also use it on the Windows platform.
(Almost) everything you can do in Objective-C, Swift or Java can be
also done in C# with Xamarin.
Check the limitations on www.xamarin.com .
Since you use C# on all the platforms, code reuse varies from 60% to
90%.

23. JIT compilation
AOT compilation

24. How Xamarin Works on iOS

25. iOS Build + Execution Model
• code runs as 100% native app
• full Ahead of Time (AOT)
compilation to produce an ARM
binary for Apple’s App Store
• Mono Framework included
• exposes CocoaTouch SDK

26. iOS Build + Execution Model
We can take advantage of the APIs
exposed by Mono besides the fully
covered iOS APIs.
Since we have Mono involved, we
can use Portable Class Libraries
(PCLs).

27. How Xamarin Works on Android

28. Android Build + Execution Model
Xamarin.Android takes advantage
of Just In Time (JIT) compilation on
the Android device.

29. Android Build + Execution Model
• MCW – managed callable wrappers,
mostly managed by Mono.Android.dll
• ACW – Android callable wrappers

30. Always Up-to-Date
Xamarin.iOS offered same-day support for :
iOS 5 / iOS 6 / iOS 7 / iOS 7.1 / iOS 8 / iOS 9
Xamarin offers full support for:
• Google Glass
• Android Wear
• Amazon Fire TV
• Apple Watch and more

31. Development Environments

32. Visual Studio 201X

33. Xamarin Studio (PC + Mac)

34. Code Sharing Techniques

35. Code Sharing Techniques
There are multiple ways in which you can share code:
• portable class libraries (PCLs)
• partial classes
• compiler conditional blocks
• shared projects

36. Xamarin Architecture Guide

37. Xamarin Architecture Guide

38. Demo Time

39. What is MVVM?

40. MVVM vs MVC
In the MVVM the logic is stored in the presenter and the view is
completely isolated from the model.

41. Model View ViewModel

42. MVVM Technical Details
It is derived from the Model View Controller Pattern.
• properties
• data binding
• INotifyPropertyChanged
• INotifyCollectionChanged
• IValueConverter
• ICommand
• UI thread

43. Why MVVM?

44. MVVM Pros and Cons
There is a reason why it’s called a pattern.
Pros:
• separation of concerns
• decoupling
• code reuse
• testability
Cons:
• MVVM is "overkill" for simple UI operations

45. The MvvmCross Magic

46. The MvvmCross Magic
It’s an open-source framework maintained by Stuart Lodge & Co.
It has Dependency Injection built-in -> Interface Driven Design.
It has a lot of plugins already written such as location, emails, gallery,
network, SQLite, secure storage, phone calls etc.
#IF plugins -> less work for the developer, but also less control.

47. The MvvmCross Magic

48. The MvvmCross Magic
MvvmCross has support for:
• Xamarin.iOS
• Mac
• Xamarin.Android
• Windows Presentation Foundation
• Windows Phone
• Windows 8
• Universal Windows Platform

49. The MvvmCross Magic
It has huge popularity and the community is very active.
https://jabbr.net/#/rooms/mvvmcross
https://xamarinchat.slack.com/messages/mvvmcross/
https://github.com/MvvmCross/MvvmCross

50. Data Binding, Commands, Navigation

51. Data Binding - Properties
No C#, just XAML
<TextBox Text="{Binding Password, Mode=TwoWay}" />

52. Data Binding - Properties
No C#, just XML
xmlns:local="http://schemas.android.com/apk/res-auto"
<EditText local:MvxBind="Text Password"

53. Data Binding - Properties
Just C#
var set = this.CreateBindingSet<LoginViewController, LoginViewModel>();
set.Bind(textField_Password).To(vm => vm.Password);

54. Data Binding - Listviews
No C#, just XAML
<ListBox
ItemsSource="{Binding MyCollection}"
<ListBox.ItemTemplate>
<DataTemplate> …..
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

55. Data Binding - Listviews
No C#, just XML
<Mvx.MvxListView local:MvxBind="ItemsSource MyCollection;
ItemClick ViewDetailsCommand"
local:MvxItemTemplate="@layout/item_template_row" />

56. Data Binding - Listviews
Just C#
var set = this.CreateBindingSet<XViewController, XViewModel>();
set.Bind(source).To(x => x.MyCollection);
set.Apply();

57. ViewModel Commands
No C#, just XAML
xmlns:i="clr-namespace:System.Windows.Interactivity;
assembly=System.Windows.Interactivity"
xmlns:commandbinding="clr-namespace:Cirrious.MvvmCross.WindowsPhone.Commands;
assembly=Cirrious.MvvmCross.WindowsPhone"
<TextBlock Text="{Binding Name}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<commandbinding:MvxEventToCommand Command="{Binding
MyCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>

58. ViewModel Commands
No C#, just XML
xmlns:local="http://schemas.android.com/apk/res-auto"
<Button local:MvxBind="Click LoginCommand" />

59. ViewModel Commands
Just C#
var set = this.CreateBindingSet<LoginViewController, LoginViewModel>();
set.Bind(btn_Login).To(x => x.LoginCommand);
set.Apply();

60. Navigation
Go forward:
CurrentViewModelInstance.ShowViewModel<NewViewModel>();

61. Navigation
Go back:
CurrentViewModelInstance.Close(this);

62. MvvmCross App Architecture

63. App Architecture
The project should be split in 2:
Common core which contains:
• models
• viewmodels
• business logic
• data access layer
UI-project per platform:
• each platform views

64. Small Demo Time

65. MvvmCross Pros & Cons
Pros:
• interchangeable code module
• supports Test Driven Development (TDD)
• it follows the Core pattern
• it has data binding

66. MvvmCross Pros & Cons
Cons:
• it is a non-native pattern for iOS -MVC- and Android -aprox MVC-
• core 3rd party dependency
• lot’s of glue code for custom bindings

67. Xamarin Pros & Cons
Pros:
• native experience
• you can use a lot of components that .NET developers already use
• shared code base
• only one programming language

68. Xamarin Pros & Cons
Cons:
• you need a Mac
• it has a license fee per developer, per platform -> $
• bugs can appear: https://bugzilla.xamarin.com/
• C# is needed

69. Xamarin Pros

70. Thank you very much!