mvvmcross seminar

50
MvvmCross Introduction 13 th December 2012 @slodge

Upload: xamarin

Post on 07-May-2015

22.750 views

Category:

Technology


0 download

DESCRIPTION

Video for this session: http://www.youtube.com/watch?v=jdiu_dH3z5k Code for this session: https://github.com/xamarin/Seminars/tree/master/2012-12-13-MVVMCross/ An introduction to one approach for using dependency injection, unit testing and MVVM in cross-platform mobile C# development with Stuart Lodge

TRANSCRIPT

Page 1: MvvmCross Seminar

MvvmCross Introduction

13th December 2012

@slodge

Page 3: MvvmCross Seminar

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

Page 4: MvvmCross Seminar

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:

Page 5: MvvmCross Seminar

MvvmCross Introduction

13th December 2012

@slodge

Evolving the dinosaur

Page 6: MvvmCross Seminar

What we’ll cover…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 7: MvvmCross Seminar

What we’ll cover…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 8: MvvmCross Seminar

M-V-VM

Page 9: MvvmCross Seminar

Detailed flow

Page 10: MvvmCross Seminar

What we’ll cover…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 11: MvvmCross Seminar

ViewModels Public Properties

private bool _isSearching; public bool IsSearching { get { return _isSearching; } set { _isSearching = value; RaisePropertyChanged("IsSearching"); } }

Page 12: MvvmCross Seminar

For ViewModel Changes

public interface INotifyPropertyChanged { event PropertyChangedEventHandler PropertyChanged; }

public class PropertyChangedEventArgs : EventArgs { public string PropertyName { get; } }

Page 13: MvvmCross Seminar

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; } }

Page 14: MvvmCross Seminar

For Actions

public interface ICommand { event EventHandler CanExecuteChanged; bool CanExecute(object parameter); void Execute(object parameter); }

Page 15: MvvmCross Seminar

.Net Implementation

ICommand Public Property Set

INotifyPropertyChanged INotifyCollectionChanged

Public Property Get

Page 16: MvvmCross Seminar

Why?

To Enable

• Awesome UI and Data Development

• Unit Testing of code

• Large applications to have a common architecture

• Different platforms can share code

Page 17: MvvmCross Seminar

What we’ll cover…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 18: MvvmCross Seminar

What is MvvmCross?

Code!

Page 19: MvvmCross Seminar

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

Page 20: MvvmCross Seminar

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

Page 21: MvvmCross Seminar

Code Evolution 3

• Cross Platform

• All UIs MVVM

• 100% shared application logic

• 100% shared test harness

Page 22: MvvmCross Seminar

Data-Binding

WP/WinRT 99% Xaml

Droid Mainly Axml Some .Dialog

Touch Some .Dialog

Some .XIB Some C#

Page 23: MvvmCross Seminar

What we’ll cover…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 24: MvvmCross Seminar

Portable Class Libraries

Page 26: MvvmCross Seminar

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

Page 27: MvvmCross Seminar

Sphero – Plugin Magic

• Plugin Magic

• Each Plugin:

– 1 PCL

– 1 Assembly per platform

Page 28: MvvmCross Seminar

Why?

To Enable

• Awesome UI and Data Development

• Unit Testing of code

• Large applications to have a common architecture

• Different platforms can share code

Page 29: MvvmCross Seminar

What we’ll cover…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 30: MvvmCross Seminar

MonoCross

Page 31: MvvmCross Seminar

A team in a galaxy far far away

@imaji @mrlacey @sichy @slodge @touch4apps …

Page 32: MvvmCross Seminar

Redth in Canada

https://github.com/Redth/WshLst/

Page 33: MvvmCross Seminar

Rune in Norway

https://github.com/runegri/CrossBox

Page 34: MvvmCross Seminar

Jason in UK

http://www.aviva.co.uk/drive/

Page 35: MvvmCross Seminar

CheeseBaron in Denmark

http://blog.ostebaronen.dk/

Page 37: MvvmCross Seminar

JSON.Net Downunder (?)

Page 39: MvvmCross Seminar

Dan in Italy

http://bit.ly/mvxDanA

Page 40: MvvmCross Seminar

Zoldeper in Hungary?

https://github.com/Zoldeper/Blooor

Page 42: MvvmCross Seminar

What we’ve covered…

• MVVM Theory

• .Net MVVM

• A practical example – some code!

• Interface Driven Development

– Portable Class Libraries

– Unit Testing

– Plugins

• Some examples

Page 43: MvvmCross Seminar

To join in…

• Tool up

• Share

• Reuse

• Test

• Architect

If you want to join in:

Page 44: MvvmCross Seminar

MS-PL on GitHub

http://github.com/slodge/MvvmCross

Page 45: MvvmCross Seminar

Some other talks available

http://bit.ly/mvxTweetPic

Page 46: MvvmCross Seminar

C# - 1 Stack - Cloud to Mobile

WP7 iOS Droid Win8

Data Access

Business Logic

Presentation

Service Consumption

Business Logic

Local Data/Services

UI Logic

Page 47: MvvmCross Seminar

Not as cool as dinosaurs

WP7 iOS Droid Win8

Data Access

Business Logic

Presentation

Service Consumption

Business Logic

Local Data/Services

UI Logic

Page 50: MvvmCross Seminar

Xamarin

Seminar

13th December 2012

Please give us your feedback

Follow us on Twitter

http://bit.ly/xamfeedback

@XamarinHQ