Upload
jinkyu-kim
View
196
Download
17
Embed Size (px)
Citation preview
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