Common iOS Architecture: From MVC to VIPER, with Redux @ iPlayground 2019 This slide explains how an iOS app is refactoring from MVC to VIPER pattern. It also explains what is Redux pattern and how to adopt this pattern to iOS development.

1. Common
iOS Architectures
From MVC to VIPER, with Redux

2. Who am I
• App developer since iOS 4
• Years of working experience in startups
• ! @nelsont
• ! chiahsien.github.io

3. Agenda
• From MVC to VIPER
• Redux
• Summary

4. Agenda
• From MVC to VIPER
• Redux
• Summary
NO CODING
TODAY

5. Why this topic?

6. From MVC to VIPER
• Series of refactoring
• Pick one that suit your team

7. MVC

9. Model View Controller
Data structure UI Life cycle
Data manipulation
Setup view &
animation
UI Navigation
API call & biz logic
Data conversion
Data source &
Delegate
etc.

10. Massive
View Controller

11. Deal with Massive VC
• VC focus on UI related tasks
• Move non-UI related tasks to another
object
• VC communicate with this object

12. This object
• API call
• Biz logic
• Data conversion
• Data source

13. Presenter / View Model
• API call
• Biz logic
• Data conversion
• Data source

17. MVP ≈ MVVM

18. Model View VM / Presenter
Data structure UI API call
Data manipulation Life cycle Biz logic
Setup view &
animation
Data conversion
UI Navigation Data source
Delegate
etc.

19. UI Navigation
• Push / Pop
• Present / Dismiss
• Master / Detail

20. Problem
• Hard to reuse
• Lack of flexibility
• Hard to co-work
• Doesn’t make sense

21. Solution
• Each VC should be independent
• An object having bird’s view manages
VCs’ flow

23. Coordinator
• Create and setup VCs
• Manage VCs’ flow
• Manage child coordinators

24. Model View
VM /
Presenter
Coordinator
Data structure UI API call UI Navigation
Data
manipulation
Life cycle Biz logic
Setup view &
animation
Data conversion
Delegate Data source
etc.

25. Common codes
• API call
• Biz logic
• Data manipulation

26. Manager / Service / Helper
• API call
• Biz logic
• Data manipulation

27. Model View Presenter Coordinator
Manager /
Service
Data
structure
UI
Data
conversion
UI Navigation API call
Life cycle Data source Biz logic
Setup view &
animation
Data
manipulation
Delegate
etc.

28. Entity View Presenter Coordinator
Manager /
Service
Data
structure
UI
Data
conversion
UI Navigation API call
Life cycle Data source Biz logic
Setup view &
animation
Data
manipulation
Delegate
etc.

29. Entity View Presenter Router
Manager /
Service
Data
structure
UI
Data
conversion
UI Navigation API call
Life cycle Data source Biz logic
Setup view &
animation
Data
manipulation
Delegate
etc.

30. Entity View Presenter Router Interactor
Data
structure
UI
Data
conversion
UI Navigation API call
Life cycle Data source Biz logic
Setup view &
animation
Data
manipulation
Delegate
etc.

31. VIPER

33. MVC ➔ VIPER
Series of refactoring

34. State Management

35. State management
• MV(C/VM/P) / VIPER are UI related
patterns
• We need to find a way to manage state

36. Redux
•A state management framework
•Single source of truth
•Single place to modify state
•Unidirectional data flow

43. Redux integration
• Presenter / Interactor send Actions to
Store
• Presenter / Interactor receive State
update notification

44. Redux

45. Summary
• A series of refactoring
• Find a pattern that suit your team
• Both VM & Presenter are great
• Recommend Coordinator for beginner
• Manage state with care

46. Q & A
! @nelsont ! chiahsien.github.io