software architectural design patterns(mvc, mvp, mvvm, viper) for ios

Software Architectural Design Patterns(MVC, MVP, MVVM, VIPER)

Marquez

2

Contents

MVC(Model-View-Controller)?Architecture Design in iOS with an example• MVC• MVP• MVVM

– Data binding– MVVM

• VIPER

Our application(simplified POC)

3

MVC (Model-View-Controller)

View

Controller

Model

Sees

Uses

Updates

Manipulates

4

MVC (Model-View-Controller) in iOS

View

Main.storyboardor xib

Model

Model.swiftModel.xdatamodeld

Controller

ViewController.swiftSees

Uses

Setup Fetch

Load

Model – The entitiesView – The interface with which the user interactsController – Responsible for connecting the other two pieces

5

Example…

View

Label

Model

Controller

Button didTapButton

Person“Marquez”

6

Example…

How to Test changing label??: high dependency on UI

7

Example…

How to Test changing label??: high dependency on UIQuestion?

Unit test: How can we test change label

directly?

8

Example…

How to Test changing label??: high dependency on UI

changeLabel

9

Example..

10

Example…

How to Test changing label??: still it has dependency on UI

changeLabel

11

MVC

Pros• Separated Model & View• Ease of testing for Model

Cons (especially, Controller)• Difficult to test- high dependency on the iOS API(UIKit, UIView) • Modularity and flexibility- tightly bonded between View and Controller• Maintenance- a lots of codes in Controller

12

Massive View Controller?

Network requestsParsing responsesAccessing data modelsFormatting data for the interfaceResponding to interface events

ViewModel

Controller

13

MVP (Model-View-Presenter) in iOS

View

Main.storyboardViewController.swift

View <Protocol>

Model

Model.swiftModel.xdatamodeld

Presenter

ViewPresenter.swiftPresenter <Protocol>

View <Protocol>

Sees

Uses

Fetch

Load

Own &send actions

Update

Model – The entitiesView – V+VC, create virtual view to connect with presenterPresenter – use unowned virtual view, no direct connection with view

14

Example…

View

Label

Model

Presenter

Button didTapButton

Person“Marquez”

Virtual view

showGreeting

setGreeting

15

Example…

No dependency on UI, but we need virtual view or view to see

16

MVP

Pros• Simple and Clear for intentions of action• Pass to view only what to display, instead of how to display• Ease of testing for logics in Model, Presenter(No dependency on the iOS API)

Cons (especially, Presenter)• Maintenance- a lots of codes in Presenter• Virtual view needed

17

MVVM(Model-View-ViewModel)

Model – The entitiesView – Binding data&user action with ViewModelViewModel– wrapping view, observable data for view, hook event from view to model, no dependency for view

View

Main.storyboardViewController.swift

Model

Model.swiftModel.xdatamodeld

ViewModel

ViewModel.swiftViewModel<protocol>

Sees

Uses

Fetch

Load

Owns

Data &user actionbinding

18

Data binding

Data binding?

Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically.

19

Data binding

Data binding methods for iOS

• IOS SDK framework• Objective-C: Key-Value Obseving(KVO)• Swift 3: didSet

• Frameworks• Bind framework: AKABeacon, RZDataBinding• Observerble framework: ReactiveCocoa

20

Data binding

Data binding for Objective-C: KVO

21

Data binding

Data binding for Swift 3: didSet

22

Example…

View

Label

Model

ViewModel

Button

Person“Marquez”

showGreeting

Owned

Bind

greeting<String>Bind

Bind

User-action

Data

23

Example…

24

Example…

No needTo see

For testing

25

MVVM

Pros• Unit test is more easier (ViewModel doesn’t need to know about view)• No need to make virtual view• Fast-reactive programming model, less code than MVP

(because of data-binding)

Cons• View has more responsibilities(view need to update itself)• Complex to express view binding

26

VIPER (View-Interactor-Presentor-Entity-Router)

View

Main.storyboardViewController.swift

View<Protocol>

Interactor

Interactor.swift

Presenter

ViewPresenter.swiftPresenter<protocol>

View<protocol>

Sees

Uses

Owns

Notify

Own &send actions

Update

Router

Router.swift

Entity

Entity.swiftEntity.xdatamodeld

Segues between modules

Knows about

27

VIPER

Pros• Better distribution, better testability• Very small responsibilities for each class

Cons• Huge amount of interface for classes even for a simple application

28

Current application

Leak of Test

• Unit test– Testing a few logics of Commonframework module– No Unit test for every modules (ex. add appliance cell, network …)

• UI test– Testing the behavior with real(virtual) appliances

29

MVVM is the solution?

30

MVVM is the solution?

NO..But let’s try the MVVM architecture a little.

31

Current Dashboard in Laundry app

View

DashboardVC.xib

Model

DashboardItemCellApplianceManager

Controller

DashboardViewController.h,m

Move pages

SignInVCAddApplianceVCUniversalSettingVCWasherStatusVCDryerStatusVCWasherTroubleshootingVCDryerTroubleshootingVCSecurityFailureVC

Network Logics

XmppNetworkLogicHttpsNetworkLogic

Update UIs

AppliancesTableViewDashboardItemCellAddApplianceButtonUniversalSettingButtonPopup

32

Focus- Simplification for Demo

View

DashboardVC.xib

Model

DashboardItemCellApplianceManager

Controller

DashboardViewController.h,m

Move pages

SignInVCAddApplianceVCUniversalSettingVCWasherStatusVCDryerStatusVCWasherTroubleshootingVCDryerTroubleshootingVCSecurityFailureVC

Network Logics

HttpsXmpp

Update UIs

AppliancesTableViewDashboardItemCellAddApplianceButtonUniversalSettingButtonPopup

33

Focus- Demo: Appliances Table using DashboardItemCell

View

DashboardVC.xib

Model

DashboardItemCellApplianceManager

Controller

DashboardViewController.h,m

Move pages

SignInVCAddApplianceVCUniversalSettingVCWasherStatusVCDryerStatusVCWasherTroubleshootingVCDryerTroubleshootingVCSecurityFailureVC

Network Logics

HttpsXmpp

Update UIs

AppliancesTableViewDashboardItemCellAddApplianceButtonUniversalSettingButtonPopup

DashboardItemCell

Appliances Table

34

Refactored Dashboard with MVVM

ViewDashboardVC.xib

DashboardViewController.h,m

Model

DashboardModel.h,mDashboardItemCellApplianceManager

ViewModel

DashboardViewModel.h,m

Move pages

AddApplianceVCUniversalSettingVCWasherStatusVCDryerStatusVCWasherTroubleshootingVCDryerTroubleshootingVCSecurityFailureVC

Network Logics

HttpsXmpp

Update UIs

AppliancesTableViewAddApplianceButtonUniversalSettingButtonPopup

Update Models

DashboardItemCell

Update Models

DashboardItemCellArray

35

MVVM design for showing ApplianceList table

View

UITableView:UITableViewCell

ModelViewModel

DashboardVC

DashboardItemCell<Dryer, Washer>

requestNetworkList

Owned

Bind

Array<DashboardItemCell

>Bind

Data

ApplianceManagerupdate

Add to Array

update

36

Test code

37

End

38

References

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52#.

b5a5de26bhttps://github.com/mutech/aka-ios-beaconhttps://github.com/ReactiveCocoa/ReactiveCocoa