Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Common iOS architectures: From MVC to VIPER, with Redux

Nelson
September 21, 2019

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/

Nelson

September 21, 2019
Tweet

Other Decks in Programming

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