software architectural design patterns(mvc, mvp, mvvm, viper) for ios
TRANSCRIPT
![Page 1: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/1.jpg)
Software Architectural Design Patterns(MVC, MVP, MVVM, VIPER)
Marquez
![Page 2: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/2.jpg)
2
Contents
MVC(Model-View-Controller)?Architecture Design in iOS with an example• MVC• MVP• MVVM
– Data binding– MVVM
• VIPER
Our application(simplified POC)
![Page 3: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/3.jpg)
3
MVC (Model-View-Controller)
View
Controller
Model
Sees
Uses
Updates
Manipulates
![Page 4: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/4.jpg)
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
![Page 5: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/5.jpg)
5
Example…
View
Label
Model
Controller
Button didTapButton
Person“Marquez”
![Page 6: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/6.jpg)
6
Example…
How to Test changing label??: high dependency on UI
![Page 7: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/7.jpg)
7
Example…
How to Test changing label??: high dependency on UIQuestion?
Unit test: How can we test change label
directly?
![Page 8: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/8.jpg)
8
Example…
How to Test changing label??: high dependency on UI
changeLabel
![Page 9: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/9.jpg)
9
Example..
![Page 10: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/10.jpg)
10
Example…
How to Test changing label??: still it has dependency on UI
changeLabel
![Page 11: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/11.jpg)
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
![Page 12: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/12.jpg)
12
Massive View Controller?
Network requestsParsing responsesAccessing data modelsFormatting data for the interfaceResponding to interface events
ViewModel
Controller
![Page 13: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/13.jpg)
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
![Page 14: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/14.jpg)
14
Example…
View
Label
Model
Presenter
Button didTapButton
Person“Marquez”
Virtual view
showGreeting
setGreeting
![Page 15: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/15.jpg)
15
Example…
No dependency on UI, but we need virtual view or view to see
![Page 16: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/16.jpg)
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
![Page 17: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/17.jpg)
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
![Page 18: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/18.jpg)
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.
![Page 19: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/19.jpg)
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
![Page 20: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/20.jpg)
20
Data binding
Data binding for Objective-C: KVO
![Page 21: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/21.jpg)
21
Data binding
Data binding for Swift 3: didSet
![Page 22: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/22.jpg)
22
Example…
View
Label
Model
ViewModel
Button
Person“Marquez”
showGreeting
Owned
Bind
greeting<String>Bind
Bind
User-action
Data
![Page 23: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/23.jpg)
23
Example…
![Page 24: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/24.jpg)
24
Example…
No needTo see
For testing
![Page 25: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/25.jpg)
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
![Page 26: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/26.jpg)
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
![Page 27: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/27.jpg)
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
![Page 28: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/28.jpg)
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
![Page 29: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/29.jpg)
29
MVVM is the solution?
![Page 30: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/30.jpg)
30
MVVM is the solution?
NO..But let’s try the MVVM architecture a little.
![Page 31: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/31.jpg)
31
Current Dashboard in Laundry app
View
DashboardVC.xib
Model
DashboardItemCellApplianceManager
Controller
DashboardViewController.h,m
Move pages
SignInVCAddApplianceVCUniversalSettingVCWasherStatusVCDryerStatusVCWasherTroubleshootingVCDryerTroubleshootingVCSecurityFailureVC
Network Logics
XmppNetworkLogicHttpsNetworkLogic
Update UIs
AppliancesTableViewDashboardItemCellAddApplianceButtonUniversalSettingButtonPopup
![Page 32: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/32.jpg)
32
Focus- Simplification for Demo
View
DashboardVC.xib
Model
DashboardItemCellApplianceManager
Controller
DashboardViewController.h,m
Move pages
SignInVCAddApplianceVCUniversalSettingVCWasherStatusVCDryerStatusVCWasherTroubleshootingVCDryerTroubleshootingVCSecurityFailureVC
Network Logics
HttpsXmpp
Update UIs
AppliancesTableViewDashboardItemCellAddApplianceButtonUniversalSettingButtonPopup
![Page 33: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/33.jpg)
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
![Page 34: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/34.jpg)
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
![Page 35: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/35.jpg)
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
![Page 36: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/36.jpg)
36
Test code
![Page 37: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/37.jpg)
37
End
![Page 38: Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS](https://reader034.vdocuments.us/reader034/viewer/2022042422/58ed286e1a28ab241c8b4625/html5/thumbnails/38.jpg)
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