Practical MVP and MVVM Patterns for your iOS Apps 1 www.priyaontech.com Priya Rajagopal Twitter: @rajagp blog: www.priyaontech.com www.priyaontech.com Software Pattern • Template to solve a repeatable problem • Architectural Patterns • Design Patterns www.priyaontech.com App Architecture UI/ Presentation Database/ Business Application Logic Layer Logic www.priyaontech.com MovieBuff - App Logic SearchViewController MovieListViewController “Search” tapped “Done” tapped “Back” tapped MovieDetailViewController Long Press/ Tap Cell Demo: MVC Model View Controller User Actions Controller Updates Updates Notify View Model • UI/ Presentation Layer : View • Data/ Business Logic Layer: Model • Application Logic: Controller • Theoretically, Model - View Direct Communication Allowed • iOS advocates all communication through controller • iOS UIViewController = View or Controller ? • View: Controller = Many:1 • Views not passive Source: developer.apple.com www.priyaontech.com MVC Model View Controller User Actions Controller Updates Updates Notify View Model • UI/ Presentation Layer : View • Data/ Business Logic Layer: Model • Application Logic: Controller • Theoretically, Model - View Direct Communication Allowed • iOS advocates all communication through controller • iOS UIViewController = View or Controller ? • View: Controller = Many:1 • Views not passive Source: developer.apple.com www.priyaontech.com The Controller • Delegate • Data Source • Navigation • Target-Actions www.priyaontech.com The Controller • Delegate • Data Source • Navigation • Target-Actions Easy To go wrong … www.priyaontech.com The Controller • Delegate • Data Source • Navigation • Target-Actions Easy To go wrong … www.priyaontech.com MVC in MovieBuff View Controller UITextField CustomPickerView SearchViewController UITableView [MovieInfoTableViewCell] MovieDetailViewController MovieListView UITableView Controller Model MovieData ServerManager www.priyaontech.com MVP Model View Presenter View Updates User Actions Changes Model Presenter Updates • A Variant of MVC • UI/ Presentation Layer : View • Data/ Business Logic Layer: Model • Application Logic: Presenter • Presenter ideally should handle all presentation logic • View is passive • View: Presenter typically 1:1 • Strict separation between View and Model www.priyaontech.com MVP in MovieBuff View Presenter SearchView UITextField CustomPickerView Controller UITableView MovieDetail [MovieInfoTableViewCell] ViewControl MoviesPresenter MovieListView UITableView Controller Model MovieData ServerManager www.priyaontech.com View-Presenter w/ Delegation Pattern FetchData Protocol Presenter View/ View Presenter Controllers updateUI Presenting View Protocol View Presenting www.priyaontech.com MVP Flow MovieListViewController MoviesPresenter ServerManager (View) (Presenter) (Model) delegate.attachPresentingView (self) Request to load movies delegate.fetchMoviesWithTitle searchForMatchesWithTitle view.dataStartedLoading Movies Show loading spinner view.dataFinishedLoading Stop loading spinner view.updateUIWithMovies Display movies www.priyaontech.com MVVM Model View View Model View Updates Data Binding Changes Model View Model Updates • A Variant of MVC • UI/ Presentation Layer : View • Data/ Business Logic Layer: Model • Application Logic: Model View • “Binding” between view and view-model • View: Model View could be 1:Many www.priyaontech.com MVVM in MovieBuff View ViewModel SearchView UITextField CustomPickerView Controller UITableView MovieDetail MovieDataView [MovieInfoTableViewCell] ViewControl Model MovieListView UITableView Controller Model MovieData ServerManager www.priyaontech.com View-View Model Binding using Key-Value Observing (KVO) • KVO in Cocoa : • Object can be automatically notified of changes to state of another object • Observe properties on other object • In ObjC - built into the runtime • Swift - Not out of the box • One option dynamic modifier , NSObject only , ugly syntax • Another option … www.priyaontech.com Wrapper around Observable Properties public struct DynamicType<T> { typealias ModelEventListener = (T)->Void typealias Listeners = [ModelEventListener] private var listeners:Listeners = [] var value:T? { didSet { for (_,observer) in listeners.enumerated() { if let value = value { observer(value) } } } } mutating func bind(_ listener:@escaping (T)->Void) { listeners.append(listener) if let value = value { listener(value) } } } www.priyaontech.com MVVM Flow Example MovieListViewController MovieDataViewModel ServerManager (View) (View Model) (Model) movies.bind (callback) Request to load movies fetchMoviesWithTitle searchForMatchesWithTitle Movies Show loading spinner Movies data updated callback Stop loading spinner Display movies www.priyaontech.com In Summary…. • MVC, MVP, MVVM have a common goal • Separation of concerns • Centerpiece is Controller/Presenter/ View Model • MVP and MVVM are variants of MVC • Don’t get bogged down by semantics • On iOS • MVP using Delegation Pattern • MVVM using Key-Value Observer Pattern www.priyaontech.com Thank You ! Priya Rajagopal Twitter: @rajagp .