Common iOS architectures: From MVC to VIPER, with Redux

Common iOS Architecture: From MVC to VIPER, with Redux @ iPlayground 2019

這幾年大家逐漸重視 iOS 的架構設計，從最基本的 MVC 到開始普及的 MVP / MVVM，到分工細膩的 VIPER，每個 pattern 都有擁護者；近期也有為了解決畫面轉換的 Router / Coordinator 以及為了解決資料一致性的 Redux。

讓我們來聊聊這幾種 pattern 及其演化過程。

文字稿這裡
https://chiahsien.github.io/post/common-ios-architecture-from-mvc-to-viper-with-redux/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Why this topic?
   

   View Slide

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

   View Slide

7. MVC
   

   View Slide

8. View Slide

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.
   

   View Slide

10. Massive
    View Controller
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. MVP ≈ MVVM
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

31. VIPER
    

    View Slide

32. View Slide

33. MVC ➔ VIPER
    Series of refactoring
    

    View Slide

34. State Management
    

    View Slide

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

    View Slide

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

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

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

    View Slide

44. Redux
    

    View Slide

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
    

    View Slide

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

    View Slide