- Introduction of clean VIP architecture - Explanation of its relationships wth MVC, MVP, VIPER

1. VIP architecture
Jianbin LIN

2. MVC

3. Responsibilities of MVP
View: Display content
Model: Data services, API services
Controller: ?
Everything else

4. Expected controller

5. Controller in reality

6. Main issues
MVC = Massive view controller
Low testability

7. Main Goal

8. Controller
Presenting
Routing
Data retrieving
Data updating
Data marshaling
…
Data passing
Data displaying

9. Presenting
Routing(Navigating)
Data retrieving
Data updating
Data marshaling
…
View(View
Controller)
Data passing
Presenter
Data Displaying

10. MVP ?
(model-view-presenter)
Massive presenter

11. Further decoupling by VIPER
Routing(Navigating)
Data passing
Router
Interactor
Data retrieving
Data updating
Data integrating

12. VIPER

13. View/
ViewController
- Listen to user action
- Call presenter to react to user action
- Display view as per ViewModel
- Contain UIKit related codes

14. - Update/Retrieve data entities via interactorPresenter
- Listen/react to user action
- Transform data entities into view model
(simple data structure for displaying)
- Synchronise view displaying/navigating

15. - Retrieve data entity from
services
- Update data modelInteractor
- A single business use case
- Integrate data

16. - Navigate to the destination
(handle transition)
- Pass data to destinationRouter
- Locate destination

17. VIPER is Great
Good division of responsibilities
Less codes on each class
Make presentation layer more testable
Presenter/Interactor are independent of any UI
Presenter/Interactor contains pure logics

18. Cons of VIPER
Many files, hard to set up
Not easy to identify use case
Complex controls among view/presenter/
interactor

19. High dependency on
Presenter
Bidirectional connections
- View to Presenter
- Interactor to Presenter

20. Responsibilities of
Presenter
- Receive and handle user actions from View
- Coordinate all the interactors(business use cases)
- Synchronize presentation and navigations

21. Solution by Raymond Law
Clean VIP cycle
Pass UI events
Fetch/Update entities from data model
Pass entity entities
& view state
Maintain data/state
Transform entity
into view models
Listen to UI events
Display view model
Pass view model

22. Complete Clean VIP cycle

23. Example on native
register

24. Scenario
When user taps on confirm button
Verify email
If email is valid
Navigate to names input view
Else
Display error message

25. View controller
cell.onTap = {
interactor.confirmButtonDidTap()
}
Listen to UI event

26. Interactor
Use validator service to verify the email
func confirmButtonDidTap() {
let error: Error = validator.validate(emailAddress, profile)
if error != nil {
presenter.presentInputError(error)
} else {
presenter.presentNameInputs()
}
}
}

27. Presenter(1)
Present input error
func presentError(error: Error?) {
// Transform entity into view model
let message = error.localizedMsg
// Display view model via viewController
viewController.displayToastError(message)
}

28. View Controller(1)
Display toast error message
func displayToastError(errorMsg: String) {
notificationBar.displayToastNotification(errorMsg)
}

29. Interactor(2)
Use validator service to verify the email
func confirmButtonDidTap() {
let error: Error = validator.validate(emailAddress, profile)
if error != nil {
presenter.presentInputError(error)
} else {
presenter.presentNameInputs()
}
}
}

30. Presenter(2)
Present Names Input view
func presentNameInputs() {
router.navigateToNameInputs()
}

31. Router(2)
Navigate to names input view
func navigateToNameInputs() {
// Locate destination
// Pass data entity to data store of destination
let destinationVC = segue.destination
let profile = self?.dataStore?.profile
destinationVC.router.datastore.profile = profile
// Perform navigation
performSegue(identifier: "RegisterNameInputsSegue")
}

32. That is it

33. Clean VIP is Greater
than VIPER
Better responsibility division
Unidirectional control flow
Low dependency(simple interactions) among
components
Dramatically simply debugging
Better testability

34. Some tips
VIP stack can be set up by templates
No UIKit in presenter and interactor
UITableView datasource/delegate stays in
ViewController
Don’t pass data entity to view controller
Set up the complete stack even view is simple

35. Thank you !