Who’s this guy?

Who’s this guy… really?

James Montemagno

Developer Evangelist

james@xamarin.com http://motz.codes @JamesMontemagno

“MVVM is awesome and will revolutionize your application development process.”

-‐James Montemagno

Let’s talk architecture!

(﴾everyone loves architecture..)﴿

Why do we architect our code?

•  Organization & Maintainability of Code •  Abstract away all business logic •  Code re-‐use •  Make our views “dumb” and replaceable •  Our architect told us to

ALL THE PLATFORMS!

What is MVC?

Model-‐View-‐Controller

Model

View Controller

Updates

Sees Uses

Manipulates

What is MVVM?

Model-‐View-‐ViewModel

Model View ViewModel

How to display information

What to display Flow of interaction

Business Logic Data objects

Events

Data Data

Platform Specific Portable

Why MVVM?

!View Models!

(Properties, Commands, etc.)!!

Models: Data, Services, Etc. Models: Data, Services, Etc.

Why MVVM?

•  Organization & Maintainability of Code •  Abstract away all business logic •  Code re-‐use •  Make our views “dumb” and replaceable •  Our architect told us to

MVVM != Data Binding

MVVM Framework == Data Binding

Model-‐View-‐ViewModel

Model View ViewModel

Magic Binding Framework Here

Model-‐View-‐ViewModel

Model View ViewModel

1 Action

2 Event Handling

3 Command 4 Access Data

5 Notify change

6 Get Changed Data

7 Update UI

Click

Hello!

Magic Binder

Microsoft World

•  Built into: –  Windows Phone –  Windows Store –  WPF

•  Provides: –  Data Binding –  Command

•  Does NOT Provide –  Navigation –  IoC –  Messaging –  Other Fun Stuff

Live Coding Adventure

What Did We Just See?

•  INotifyPropertyChanged –  Notifies UI of Changes –  Check value changed

before value changes –  Enables Databinding

•  ICommand –  Contract for “Commanding” –  Optional parameters –  Can Execute

•  Used to enable/disable •  Manually must trigger when

property changes

Services

ViewModel IStockService

Yahoo

SQLite

Azure

TestStockServices

View Services

ViewModel IDialog

WPF

iOS/Android

Windows Phone

TestDialogServices

View Services In Action

var  av  =  new  UIAlertView(          title,          message,          null,          buttonText,          null);    av.Show();  

var  builder  =  new  AlertDialog.Builder(          ActivityBase.CurrentActivity);    builder.SetMessage(message);    if  (!string.IsNullOrEmpty(title))  {          builder.SetTitle(title);  }    builder.SetPositiveButton(          buttonConfirmText,          null);    return  builder;  

MessageBox.Show(          message,            title  ??  string.Empty,            MessageBoxButton.OK);  

Android iOS Windows Phone

View Services In Action

What about….

Silo Approach

Build Apps !Multiple Times!

Not Really Built for MVVM L

Native With !Code Sharing!

Xamarin’s Unique Approach

Bind

•  Simple two-‐way data binding •  Open source: https://github.com/praeclarum/Bind

Live Coding Adventure

Full Frameworks

•  Data Binding •  Commands •  Navigation •  IoC •  Plugins •  So Much More…

Even More

MVVM Light MVVMCross Xamarin.Forms

Live Coding Adventure

What about the Web?

To Recap

•  MVVM –  More maintainable code –  More testable code –  Ability to abstract platform differences –  Just a pattern

•  MVVM Framework –  Brings in data binding –  Speeds up repetitive work

MVVM ==

Tim & Eric Awesome Show GIF

Resources

•  MVVM –  Awesome Microsoft Docs

•  bit.ly/ms-‐mvvm –  MVVM Light + Xamarin

•  bit.ly/mvvmlight-‐xamarin –  Xamarin.Forms + XAML & MVVM

•  bit.ly/xamarin-‐forms-‐mvvm –  MVVMCross

•  https://github.com/MvvmCross/MvvmCross –  MVVM Announcement Blog by John Gossman

•  http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx

Get Started Xamarin.com

Thank you! Q&A

James Montemagno

Developer Evangelist

james@xamarin.com http://motz.codes @JamesMontemagno