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

2. A bit about me

3. A bit about me General Manager@Deventure
Timisoara .Net Meetup organizer
Mobile and Web developer
Xamarin and Umbraco enthusiast
In love with technology
@flaviusdemian

4. Agenda

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

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

7. 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

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

9. Mobile Development Approaches

10. Mobile Development Approaches
Silo Approach

11. 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

12. Mobile Development Approaches
Web Approach

13. Web Approach “Write once, run anywhere”. 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

14. Xamarin’s Unique Approach

16. Xama…what?

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

19. The Xamarin Magic
Write Everything in C#

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

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

22. The Xamarin Magic
.NET + Windows APIs

23. 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 limitations on
Since you use C# on both, code reuse varies from 60% to 80%.

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 is 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 (PCL).

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 (PC)

33. Xamarin Studio (PC + Mac)

34. Code Sharing Techniques

35. Code Sharing Techniques
portable class libraries (PCL)
partial classes
compiler conditional blocks
shared projects

36. Xamarin Architecture Guide

37. Demo Time

38. What is MVVM?

40. MVVM Technical Details
properties
data binding
INotifyPropertyChanged
INotifyCollectionChanged
IValueConverter
ICommand
UI thread

41. Why MVVM?

42. MVVM Pros and Cons Pros: separation of concerns decoupling code reuse
testability
Cons:
MVVM is “overkill” for simple UI operations

43. The MvvmCross Magic

44. 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, s, gallery, network, SQLite, secure storage, phone calls etc.
#IF plugins -> less work for the developer, but also less control.

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

47. The MvvmCross Magic
Is has huge popularity and the community is very active
mcross/

48. Data Binding, Commands, Navigation

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

50. Data Binding - Properties
No C#, just XML
xmlns:local="
<EditText local:MvxBind="Text Password"

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

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

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

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

55. 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>

56. ViewModel Commands No C#, just XML
xmlns:local="
<Button local:MvxBind="Click LoginCommand" />

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

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

59. Navigation
Go back
CurrentViewModelInstance.Close(this);

60. MvvmCross App Architecture

61. App Architecture The project should be split in (at least) two parts:
Common Core which contains:
Models
Viewmodels
Business logic
Data Access Layer
UI-project per platform:
Each platform views
Demo Time

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

63. 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

64. 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

65. Xamarin Pros & Cons Cons: you need a Mac
It has a license fee per developer, per platform -> $$$
bugs can appear:
C# is needed

68. Thank you! A big thanks to Cloudbase! #theCodeAwakens
Flavius-Radu DEMIAN