Transcript Xamarin + MvvmCross - Flavius Demian

/DEV/TM #1
Building Cross-Platform Apps with Xamarin and MvvmCross
Flavius-Radu DEMIAN
A bit about me
A bit about me
•
General Manager@Deventure
•
Timisoara .Net Meetup organizer
•
Mobile and Web developer
•
Xamarin and Umbraco enthusiast
•
In love with technology
[email protected]
@flaviusdemian
Agenda
Agenda
•
Mobile Development Approaches
•
Xamarin’s Unique Approach
•
The Xamarin Magic
•
How it Works on iOS
•
How it Works on Android
•
Code Sharing Techniques
Agenda
•
What is MVVM?
•
Why MVVM?
•
The MvvmCross Magic
•
Data-Binding, Commands, Navigation
•
Advantages
•
Disadvantages
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
Expectations
My ultimate goal is to make you
curious.
Go home and try it yourself!
Mobile Development
Approaches
Mobile Development Approaches
Silo Approach
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
Mobile Development Approaches
Web Approach
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
Xamarin’s Unique Approach
Xama…what?
Xamarin’s Unique Approach
•
native user interface
•
native performance
•
shared code across platforms
•
usage of C# & .NET framework
•
full API coverage
•
fewer developers
The Xamarin Magic
Write Everything in C#
The Xamarin Magic
•
.NET + iOS APIs
•
100% coverage
The Xamarin Magic
•
.NET + Android APIs
•
100% coverage
The Xamarin Magic
•
.NET + Windows APIs
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 www.xamarin.com).
•
Since you use C# on both, code reuse varies from 60% to 80%.
How Xamarin Works on iOS
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
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).
How Xamarin
Works on Android
Android Build + Execution Model
•
Xamarin.Android takes advantage
of Just In Time (JIT) compilation on
the Android device.
Android Build + Execution Model
•
MCW – managed callable
wrappers, mostly managed by
Mono.Android.dll
•
ACW – Android callable wrappers
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
Development Environments
Visual Studio 201X (PC)
Xamarin Studio (PC + Mac)
Code Sharing
Techniques
Code Sharing Techniques
•
portable class libraries (PCL)
•
partial classes
•
compiler conditional blocks
•
shared projects
Xamarin Architecture Guide
Demo Time
What is MVVM?
MVVM Technical Details
•
properties
•
data binding
•
INotifyPropertyChanged
•
INotifyCollectionChanged
•
IValueConverter
•
ICommand
•
UI thread
Why MVVM?
MVVM Pros and Cons
Pros:
•
separation of concerns
•
decoupling
•
code reuse
•
testability
Cons:
•
MVVM is “overkill” for simple UI operations
The MvvmCross
Magic
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.
The MvvmCross Magic
MvvmCross has support for:
•
Xamarin.iOS
•
Xamarin.Mac
•
Xamarin.Android
•
Windows Phone and Windows 8
•
Windows Presentation Foundation
•
Universal Windows Platform
The MvvmCross Magic
•
Is has huge popularity and the community
is very active
•
https://jabbr.net/#/rooms/mvvmcross
•
https://github.com/MvvmCross/MvvmCross
•
https://xamarinchat.slack.com/messages/mvv
mcross/
Data Binding, Commands,
Navigation
Data Binding - Properties
No C#, just XAML
<TextBox Text="{Binding Password, Mode=TwoWay}" />
Data Binding - Properties
No C#, just XML
xmlns:local="http://schemas.android.com/apk/res-auto"
<EditText local:MvxBind="Text Password"
Data Binding - Properties
Just C#
var set = this.CreateBindingSet<LoginViewController, LoginViewModel>();
set.Bind(textField_Password).To(vm => vm.Password);
Data Binding - Listviews
No C#, just XAML
<ListBox
ItemsSource="{Binding MyCollection}"
<ListBox.ItemTemplate>
<DataTemplate> …..
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Data Binding - Listviews
No C#, just XML
<Mvx.MvxListView
local:MvxBind="ItemsSource MyCollection; ItemClick ViewDetailsCommand"
local:MvxItemTemplate="@layout/item_template_row" />
Data Binding - Listviews
Just C#
var set = this.CreateBindingSet<XViewController, XViewModel>();
set.Bind(source).To(x => x.MyCollection);
set.Apply();
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>
ViewModel Commands
No C#, just XML
xmlns:local="http://schemas.android.com/apk/res-auto"
<Button local:MvxBind="Click LoginCommand" />
ViewModel Commands
Just C#
var set = this.CreateBindingSet<LoginViewController, LoginViewModel>();
set.Bind(btn_Login).To(x => x.LoginCommand);
set.Apply();
Navigation
Go forward
CurrentViewModelInstance.ShowViewModel<NewViewModel>();
Navigation
Go back
CurrentViewModelInstance.Close(this);
MvvmCross App
Architecture
App Architecture
The project should be split in (at least) two parts:
1.
2.
Common Core which contains:
•
Models
•
Viewmodels
•
Business logic
•
Data Access Layer
UI-project per platform:
•
Each platform views
Demo Time
MvvmCross Pros & Cons
Pros:
•
interchangeable code module
•
supports Test Driven Development (TDD)
•
it follows the Core pattern
•
it has data binding
MvvmCross Pros & Cons
Cons:
•
it is a non-native pattern for iOS – MVC- and Android –aprox MVCrd
3
•
core
party dependency
•
lot’s of glue code for custom bindings
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
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
Thank you!
A big thanks to Cloudbase!
#theCodeAwakens
Flavius-Radu DEMIAN