mvvmcross introduction
TRANSCRIPT
MvvmCross Introduction
13th December 2012
@slodge
Presentation Model
Represent the state and behavior of the presentation
independently of the GUI controls used in the
interface.
http://martinfowler.com/eaaDev/PresentationModel.html
In 2005…
Model/View/ViewModel is a variation of
Model/View/Controller that is tailored for modern UI
development platforms where the View is the
responsibility of a designer rather than a classic developer.
Tales from the Smart Client, John Grossman
http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx
Also in 2005…
• 10 years of dev – C++, C, VB, Java, JavaScript, LISP, SmallTalk, Delphi, …
• A year off travelling
– from Argentina to Zambia
• DeveloperDeveloperDeveloper
• 1 conclusion:
MvvmCross Introduction
13th December 2012
@slodge
Evolving the dinosaur
What we’ll cover…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
What we’ll cover…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
M-V-VM
Detailed flow
What we’ll cover…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
ViewModels Public Properties
private bool _isSearching; public bool IsSearching { get { return _isSearching; } set { _isSearching = value; RaisePropertyChanged("IsSearching"); } }
For ViewModel Changes
public interface INotifyPropertyChanged { event PropertyChangedEventHandler PropertyChanged; }
public class PropertyChangedEventArgs : EventArgs { public string PropertyName { get; } }
For Collections
public interface INotifyCollectionChanged { event NotifyCollectionChangedEventHandler CollectionChanged; }
public enum NotifyCollectionChangedAction { Add, Remove, Replace, Move, Reset, }
public class NotifyCollectionChangedEventArgs : EventArg { public NotifyCollectionChangedAction Action { get; } public IList NewItems { get; } public IList OldItems { get; } public int NewStartingIndex { get; } public int OldStartingIndex { get; } }
For Actions
public interface ICommand { event EventHandler CanExecuteChanged; bool CanExecute(object parameter); void Execute(object parameter); }
.Net Implementation
ICommand Public Property Set
INotifyPropertyChanged INotifyCollectionChanged
Public Property Get
Why?
To Enable
• Awesome UI and Data Development
• Unit Testing of code
• Large applications to have a common architecture
• Different platforms can share code
What we’ll cover…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
What is MvvmCross?
Code!
Code evolution I
• Single Mono for Android Project
• Good separation of UI from ‘Model’ code
• Simple – it works
• But:
– No testing
– No testability
– Portability by cut/paste
Code Evolution 2
• MvvmCross Library switched in – PCL code
– Formal DI/IoC used
• On UI: – DataBinding arrived
– Code got much thinner!
– XML got bigger
• Not all win: – External Dependencies got larger
– Code overall increased in size
Code Evolution 3
• Cross Platform
• All UIs MVVM
• 100% shared application logic
• 100% shared test harness
Data-Binding
WP/WinRT 99% Xaml
Droid Mainly Axml Some .Dialog
Touch Some .Dialog
Some .XIB Some C#
What we’ll cover…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
Portable Class Libraries
Unit Testing
“I get paid for code that works, not for tests, so my
philosophy is to test as little as possible to reach a
given level of confidence.
…
When coding on a team, I modify my strategy to
carefully test code that we, collectively, tend to get
wrong.”
Kent Beck http://stackoverflow.com/questions/153234/how-deep-are-your-unit-tests
Plugin – Native abstractions
public interface IMvxComposeEmailTask { void ComposeEmail(string to, string cc, string subject, string body, bool isHtml); }
protected void ComposeEmail(string to, string subject, string body) { Cirrious.MvvmCross.Plugins.Email.PluginLoader.Instance.EnsureLoaded(); var task = this.GetService<IMvxComposeEmailTask>(); task.ComposeEmail(to, null, subject, body, false); }
public class MvxComposeEmailTask : MvxWindowsPhoneTask, IMvxComposeEmailTask { public void ComposeEmail(string to, string cc, string subject, string body, bool isHtml) { var task = new EmailComposeTask() { To = to, Subject = subject, Cc = cc, Body = body }; DoWithInvalidOperationProtection(task.Show); } }
1. Declare common functionality (an interface)
2. Write platform specific implementations
3. In apps, use the interface and not the implementation
Sphero – Plugin Magic
• Plugin Magic
• Each Plugin:
– 1 PCL
– 1 Assembly per platform
Why?
To Enable
• Awesome UI and Data Development
• Unit Testing of code
• Large applications to have a common architecture
• Different platforms can share code
What we’ll cover…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
MonoCross
A team in a galaxy far far away
@imaji @mrlacey @sichy @slodge @touch4apps …
CheeseBaron in Denmark
http://blog.ostebaronen.dk/
Greg in NYC
http://bit.ly/mvxgshac
JSON.Net Downunder (?)
Olivier in France
http://www.e-naxos.com/UsIndex.html
Zoldeper in Hungary?
https://github.com/Zoldeper/Blooor
Daniel in Redmond
http://channel9.msdn.com/Events/Build/2012/3-004
What we’ve covered…
• MVVM Theory
• .Net MVVM
• A practical example – some code!
• Interface Driven Development
– Portable Class Libraries
– Unit Testing
– Plugins
• Some examples
To join in…
• Tool up
• Share
• Reuse
• Test
• Architect
If you want to join in:
C# - 1 Stack - Cloud to Mobile
WP7 iOS Droid Win8
Data Access
Business Logic
Presentation
Service Consumption
Business Logic
Local Data/Services
UI Logic
Not as cool as dinosaurs
WP7 iOS Droid Win8
Data Access
Business Logic
Presentation
Service Consumption
Business Logic
Local Data/Services
UI Logic
Some credits
Images from Wikipedia Commons: • http://en.wikipedia.org/wiki/File:Macronaria_scrubbed_enh.jpg
• http://en.wikipedia.org/wiki/File:Human-eoraptor_size_comparison%28v2%29.png
Diagrams from Java – ZK • http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVVM
Sample projects as credited inline
Thanks for listening…
http://cirrious.com
http://slodge.blogspot.com
http://github.com/slodge/mvvmcross
@slodge
Stuart Lodge, I’m a Dinosaur
Xamarin
Seminar
13th December 2012
Please give us your feedback
Follow us on Twitter
http://bit.ly/xamfeedback
@XamarinHQ