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

Finding Nemo

Finding Nemo

These days, mobile engineers are working on apps which are increasing in complexity and requiring special solutions for specific functionalities for which there is no cookie-cutter architecture to support. In this talk, I'll be discussing how we came up with our own custom architecture solution to cater towards our app's needs instead of shoehorning in an off-the-shelf industry standard.

Andyy Hope

May 17, 2018
Tweet

More Decks by Andyy Hope

Other Decks in Programming

Transcript

  1. A R C H I T E C T U R E
    Architecture is both the process and the product of planning,
    designing, and constructing buildings or any other structures.
    Architectural works, in the material form of buildings, are often
    perceived as cultural symbols and as works of art.
    Historical civilisations are often identified with their surviving
    architectural achievements.
    W I K I P E D I A

    View full-size slide

  2. N E M O
    F I N D I N G
    @ A N D Y Y H O P E
    C R A F T C O N F E R E N C E
    M AY 2 0 1 8

    View full-size slide

  3. I O S H A S A N A R C H I T E C T U R E P R O B L E M
    ( K I N D A . . . )

    View full-size slide

  4. M V C : M O D E L - V I E W- C O N T R O L L E R
    1 9 7 0 S
    • Traditional architecture for GUI applications
    • Used in different environments

    Java, ASP, C#, PHP, all the classics
    • Model layer represents data
    • View is what the user sees
    • Controller is for View interaction or Model manipulation

    View full-size slide

  5. V I E W M O D E L
    Owns and
    User interaction
    updates
    C O N T R O L L E R
    Notification
    M V C : M O D E L - V I E W- C O N T R O L L E R
    Owns and
    updates

    View full-size slide

  6. M V C : M O D E L - V I E W- C O N T R O L L E R
    T H E G O O D
    • Simple
    • Easy to use and understand
    • Officially supported by Apple frameworks

    View full-size slide

  7. M V C : M O D E L - V I E W- C O N T R O L L E R
    T H E B A D
    • Hasn’t aged well
    • Data isn’t always readily available
    • Logic has become more complex
    • View and Controller are bound 

    by UIKit (UIViewController)
    • Difficult to write tests for
    • Suffers from Massive View Controller
    • Difficulties with scale

    View full-size slide

  8. M O D E L
    User interaction
    V I E W C O N T R O L L E R
    V I E W
    Notification
    Owns and
    M V C : M O D E L - V I E W- C O N T R O L L E R
    R E A L I T Y
    updates

    View full-size slide

  9. M V C : M O D E L - V I E W- C O N T R O L L E R
    S P I N - O F F S
    • Hierarchical Model-View-Controller
    • Model-View-Adaptor
    • Model-View-Presenter
    • Model-View-ViewModel

    View full-size slide

  10. M V V M : M O D E L - V I E W- V I E W M O D E L
    2 0 0 5
    • Built for event-driven programming of user interfaces (2005)
    • Designed by Microsoft
    • Model represents business logic
    • View represents what the user sees and interacts with
    • ViewModel converts the Model for View representation

    View full-size slide

  11. V I E W M O D E L
    User interaction
    Owns
    Notification
    V I E W M O D E L
    Owns and updates
    M V V M : M O D E L - V I E W- V I E W M O D E L
    and data binding

    View full-size slide

  12. M V V M : M O D E L - V I E W- V I E W M O D E L
    T H E G O O D
    • Reactive UI data binding
    • Increased testability!
    • First viable contender to MVC (within iOS)
    • Post-MVC movement on iOS primarily started by Ash Furrow

    View full-size slide

  13. M V V M : M O D E L - V I E W- V I E W M O D E L
    T H E B A D
    • Very idealogical
    • Community has different ideas on implementation
    • Some felt that the ViewModel shouldn't import UIKit
    • Some suggested putting network request logic inside the ViewModel
    • Felt like we were trying to wedge it into iOS

    View full-size slide

  14. V I P E R
    2 0 1 2
    • Derivative of Uncle Bob’s (Robert C. Martin) Clean architecture (2012)
    • View presents user interface to user
    • Interactor performs business logic
    • Presenter works with Interactor and prepares the data
    • Entities represents data models
    • Router provides ability to move between scenes

    View full-size slide

  15. V I E W
    I N T E R A C T O R
    E N T I T Y
    P R E S E N T E R
    R O U T E R
    Navigation
    Updates
    User interaction
    lifecycle updates
    Request data
    Owns
    V I P E R

    View full-size slide

  16. V I P E R
    T H E G O O D
    • Has a really cool name
    • Follows great programming practices
    • Well-defined separation of responsibility
    • Modular
    • Testable

    View full-size slide

  17. V I P E R
    T H E B A D
    • Presenter is tightly coupled with View
    • Spaghetti code
    • Lots of classes
    • Difficult to onboard engineers

    View full-size slide

  18. G R A P H O F A R C H I T E C T U R E
    O V E R - S I M P L I F I E D
    FILES AND
    COMPLEXITY
    MVC
    MVVM
    VIPER
    TESTABILITY

    View full-size slide

  19. H O W D O W E D E C I D E O N
    W H I C H T O A D O P T ?

    View full-size slide

  20. O U R P R O D U C T
    P U N T E R S
    • Consumer focused
    • News articles
    • Statistical data
    • Community platform for enthusiasts
    • 130+ Screens
    • Reused views
    • Interactive
    • Updated via web sockets
    • Backend For Frontend (BFF) server architecture

    View full-size slide

  21. C H O O S I N G A N A R C H I T E C T U R E
    R E Q U I R E M E N T S
    • Testability
    • Code reusability
    • Easy to onboard
    • Modular
    • Expandable
    • Compatible
    • iOS first and foremost
    • Enforce unidirectional flow
    • Utilise immutability
    • Include reactive elements
    • Embrace Swift’s functionality
    • Strong guidelines
    P R I N C I P L E S

    View full-size slide

  22. C O N S U M E
    P R O S
    • Plenty of documentation available
    • Officially sanctioned or community driven
    • Environment integration
    • Known limitations and edge cases
    • Doesn't meet all requirements
    • Retrofitted design
    • Layers of abstraction
    C O N S
    U S I N G A P R E - E X I S T I N G A R C H I T E C T U R E

    View full-size slide

  23. C O N S T R U C T
    P R O S
    • Potentially meet all requirements
    • Design around an ideology
    • Plenty of resources to learn from
    • Ad-hoc solutions
    • No documentation
    • Errors can be expensive
    • Requires a lot of thought and planning
    • Onboarding other developers
    C O N S
    Y O L O

    View full-size slide

  24. W E I G H I N G T H E D E C I S I O N S
    M V C
    • Simple but not scaleable
    • Better but not best
    M V V M
    V I P E R
    • Rich in theory
    • Poor in practice

    View full-size slide

  25. W E ’ R E G O N N A C O N S T R U C T
    • We could afford the time to draft and prototype
    • Foreknowledge of current and future requirements
    • Understanding of edge cases
    • Team backed the decision
    • Hybridise architectures
    J U S T I F Y I N G O U R D E C I S I O N

    View full-size slide

  26. O U R P R O D U C T ’ S S T R U C T U R E
    • Our screens were similar to a GitHub repository page
    • Hierarchical structure for:
    • Design
    • Data
    C O M PA R I N G T O G I T H U B

    View full-size slide

  27. P R O D U C T ’ S S T R U C T U R E
    U N I V E R S A L F U N C T I O N A L I T Y

    View full-size slide

  28. P R O D U C T ’ S S T R U C T U R E
    T O P - L E V E L I N F O R M AT I O N A N D A C T I O N S

    View full-size slide

  29. P R O D U C T ’ S S T R U C T U R E
    S E C T I O N S L I S T

    View full-size slide

  30. P R O D U C T ’ S S T R U C T U R E
    S E C T I O N C O N T E N T

    View full-size slide

  31. S E G M E N T I N G T H E P R O D U C T
    S E C T I O N S L I S T
    • Code
    • Issues
    • Pull Requests
    • Projects
    • Wiki
    • Insights

    View full-size slide

  32. G I T H U B R E P O S I T O RY
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S

    View full-size slide

  33. C O D E
    S E C T I O N

    View full-size slide

  34. C O D E
    H E A D E R

    View full-size slide

  35. C O D E
    A C T I O N S

    View full-size slide

  36. C O D E
    T I T L E R O W S

    View full-size slide

  37. C O D E
    F I L E R O W S

    View full-size slide

  38. C O D E
    C O N T E N T

    View full-size slide

  39. G I T H U B R E P O S I T O RY
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S
    C O D E
    C O N T E N T
    F I L E R O W S
    C O D E A C T I O N S
    T I T L E R O W
    H E A D E R

    View full-size slide

  40. I S S U E S
    S E C T I O N

    View full-size slide

  41. I S S U E S
    A C T I O N S

    View full-size slide

  42. I S S U E S
    T I T L E R O W

    View full-size slide

  43. I S S U E S
    I T E M R O W S

    View full-size slide

  44. I S S U E S
    F O O T E R

    View full-size slide

  45. G I T H U B R E P O S I T O RY
    I S S U E S
    A C T I O N S
    T I T L E R O W
    I T E M R O W S
    F O O T E R
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S
    C O D E
    C O N T E N T
    F I L E R O W S
    C O D E A C T I O N S
    T I T L E R O W
    H E A D E R

    View full-size slide

  46. P U L L R E Q U E S T S
    S E C T I O N

    View full-size slide

  47. P U L L R E Q U E S T S
    A C T I O N S

    View full-size slide

  48. P U L L R E Q U E S T S
    T I T L E R O W

    View full-size slide

  49. P U L L R E Q U E S T S
    I T E M R O W S

    View full-size slide

  50. P U L L R E Q U E S T S
    F O O T E R

    View full-size slide

  51. G I T H U B R E P O S I T O RY
    I S S U E S P U L L R E Q U E S T S
    A C T I O N S
    T I T L E R O W
    I T E M R O W S
    F O O T E R
    A C T I O N S
    T I T L E R O W
    I T E M R O W S
    F O O T E R
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S
    C O D E
    C O N T E N T
    F I L E R O W S
    C O D E A C T I O N S
    T I T L E R O W
    H E A D E R

    View full-size slide

  52. G I T H U B R E P O S I T O RY
    I S S U E S P U L L R E Q U E S T S
    A C T I O N S
    T I T L E R O W
    I T E M R O W S
    F O O T E R
    A C T I O N S
    T I T L E R O W
    I T E M R O W S
    F O O T E R
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S
    C O D E
    C O N T E N T
    F I L E R O W S
    H E A D E R
    T I T L E R O W
    A C T I O N S

    View full-size slide

  53. P U S H I N G D E TA I L V I E W S
    N AV I G AT I O N

    View full-size slide

  54. G I T H U B R E P O S I T O RY
    I S S U E S P U L L R E Q U E S T S
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S
    C O D E
    F I L E / F O L D E R I S S U E P U L L R E Q U E S T

    View full-size slide

  55. G I T H U B R E P O S I T O RY
    I S S U E S P U L L R E Q U E S T S
    R E P O T I T L E
    R E P O A C T I O N S & S TAT S
    C O D E
    F I L E / F O L D E R I S S U E P U L L R E Q U E S T

    View full-size slide

  56. I S S U E
    D E TA I L V I E W

    View full-size slide

  57. I S S U E D E TA I L V I E W
    T I T L E

    View full-size slide

  58. I S S U E D E TA I L V I E W
    S U B T I T L E

    View full-size slide

  59. I S S U E D E TA I L V I E W
    I S S U E S

    View full-size slide

  60. I S S U E D E TA I L V I E W
    T H R E A D : C O M M E N T S

    View full-size slide

  61. I S S U E D E TA I L V I E W
    T H R E A D : U P D AT E S

    View full-size slide

  62. I S S U E D E TA I L V I E W
    C O M M E N T B O X

    View full-size slide

  63. I S S U E S D E TA I L V I E W
    T H R E A D
    C O M M E N T S
    T I T L E

    S U B T I T L E
    U P D AT E S
    S I D E B A R
    A S S I G N E E S L A B E L S P R O J E C T S M I L E S T O N E S
    N O T I F I -
    C AT I O N S
    PA RT I C -
    I PA N T S
    C O M M E N T B O X

    View full-size slide

  64. P U L L R E Q U E S T
    D E TA I L V I E W

    View full-size slide

  65. P U L L R E Q U E S T D E TA I L V I E W
    T I T L E

    View full-size slide

  66. P U L L R E Q U E S T D E TA I L V I E W
    S U B T I T L E

    View full-size slide

  67. P U L L R E Q U E S T D E TA I L V I E W
    S I D E B A R

    View full-size slide

  68. P U L L R E Q U E S T D E TA I L V I E W
    T H R E A D : C O M M E N T S

    View full-size slide

  69. P U L L R E Q U E S T D E TA I L V I E W
    T H R E A D : U P D AT E S

    View full-size slide

  70. P U L L R E Q U E S T D E TA I L V I E W
    C H E C K S

    View full-size slide

  71. P U L L R E Q U E S T D E TA I L V I E W
    C O M M E N T B O X

    View full-size slide

  72. P U L L R E Q U E S T S D E TA I L V I E W
    T H R E A D
    C O M M E N T S
    T I T L E

    S U B T I T L E
    U P D AT E S
    S I D E B A R
    A S S I G N E E S L A B E L S P R O J E C T S
    M I L E -
    S T O N E S
    N O T I F I -
    C AT I O N S
    PA RT I C -
    I PA N T S
    R E V I E W E R S
    C H E C K S
    C O M M E N T B O X

    View full-size slide

  73. T H R E A D
    C O M M E N T S
    T I T L E

    S U B T I T L E
    U P D AT E S
    S I D E B A R
    A S S I G N E E S L A B E L S P R O J E C T S
    M I L E -
    S T O N E S
    N O T I F I -
    C AT I O N S
    PA RT I C -
    I PA N T S
    R E V I E W- E R S
    C H E C K S
    C O M M E N T B O X
    F O O T E R

    View full-size slide

  74. D O N ’ T R E P E AT Y O U R S E L F
    W R I T E Y O U R C O D E O N C E

    View full-size slide

  75. P U L L R E Q U E S T D E TA I L
    E N T I T Y
    C O M M E N T
    S I D E B A R N O T I F I C AT I O N S V I E W
    U P D AT E
    P U L L R E Q U E S T S TAT U S
    C O M M E N T B O X
    I S S U E S D E TA I L
    E N T I T Y
    T I T L E
    S U B T I T L E
    C O D E D E TA I L
    E N T I T Y
    V I E W
    V I E W
    V I E W
    V I E W C O N T R O L L E R S V I E W S

    View full-size slide

  76. W H E R E D O E S T H E C O D E R E S I D E ?
    L O O K I N G AT F U N C T I O N A L I T Y C A L L - S I T E S

    View full-size slide

  77. I S S U E S D E TA I L
    E N T I T Y
    V I E W
    fetchData()
    titleText()
    subtitleText()
    commentText(forIndex: Int)
    updateText(forIndex: Int)
    submitComment(String)
    subscribeNotifications(id: Int)
    C O M M E N T
    S I D E B A R N O T I F I C AT I O N S V I E W
    U P D AT E
    P U L L R E Q U E S T S TAT U S
    C O M M E N T B O X
    T I T L E
    S U B T I T L E
    V I E W C O N T R O L L E R V I E W S

    View full-size slide

  78. Y U C K Y
    L E T ’ S B R E A K I T U P

    View full-size slide

  79. I S S U E S D E TA I L
    V I E W
    V I E W M O D E L
    fetchData()
    titleText()
    subtitleText()
    commentText(forIndex: Int)
    updateText(forIndex: Int)
    submitComment(String)
    subscribeNotifications(id: Int)
    C O M M E N T
    S I D E B A R N O T I F I C AT I O N S V I E W
    U P D AT E
    P U L L R E Q U E S T S TAT U S
    C O M M E N T B O X
    T I T L E
    S U B T I T L E
    V I E W C O N T R O L L E R V I E W S
    E N T I T Y

    View full-size slide

  80. I N S P I R AT I O N F R O M I O S PAT T E R N S
    U I TA B L E V I E W D ATA S O U R C E P R O T O C O L

    View full-size slide

  81. C R A S H C O U R S E
    U I TA B L E V I E W F U N C T I O N A L I T Y

    View full-size slide

  82. I O S TA B L E V I E W S 1 0 1
    F LY W E I G H T PAT T E R N
    • Designed for the original iPhone (2007)
    • Highly efficient for memory
    • Reuses cells and views as they scroll off-screen
    TA B L E V I E W
    C E L L
    C E L L
    S E C T I O N
    C E L L
    C E L L
    C E L L
    C E L L
    S E C T I O N
    S E C T I O N

    View full-size slide

  83. I O S TA B L E V I E W S 1 0 1
    numberOfSections(in tableView: UITableView) -> Int
    tableView(UITableView, numberOfRowsInSection: Int) -> Int
    tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell
    tableView(UITableView, viewForHeaderInSection: Int) -> UIView?
    V I E W C O N T R O L L E R
    V I E W
    TA B L E V I E W
    S E C T I O N
    C E L L
    C E L L

    View full-size slide

  84. I S S U E S D E TA I L
    V I E W
    D ATA S O U R C E
    fetchData()
    submitComment(String)
    subscribeNotifications(id: Int)
    C O M M E N T
    S I D E B A R N O T I F I C AT I O N S V I E W
    U P D AT E
    P U L L R E Q U E S T S TAT U S
    C O M M E N T B O X
    T I T L E
    S U B T I T L E
    V I E W C O N T R O L L E R V I E W S
    V I E W M O D E L
    titleText()
    subtitleText()
    commentText(forIndex: Int)
    updateText(forIndex: Int)
    E N T I T Y

    View full-size slide

  85. W E ’ R E O N T O S O M E T H I N G
    M O V I N G A S T E P F U RT H E R

    View full-size slide

  86. T I T L E C O N T R O L L E R
    C O N T R O L L E R
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    C O M M E N T B O X C O N T R O L L E R
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    V I E W
    V I E W
    I S S U E S D E TA I L V I E W C O N T R O L L E R
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    V I E W
    P R O M O T I O N S

    View full-size slide

  87. View Controller
    prepate()
    navigate(to: Destination)
    Data Source
    State {.loading, .completed, .failed}
    fetchData()
    sectionController(forIndex: Int)
    -> SectionController
    cellController(for: IndexPath)
    -> CellController
    View Model
    ViewState {.light, .dark}
    setStyle(ViewState)
    View
    updateStyle(for: ViewState)
    I S S U E S D E TA I L V I E W C O N T R O L L E R
    V I E W
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    V I E W C O N T R O L L E R
    F U N C T I O N A L I T Y S E PA R AT I O N
    S TAT E
    S TAT E

    View full-size slide

  88. Section Controller
    init(SectionEntity)
    prepareBindings(for: UIView)
    Data Source
    cellController(forIndex: Int)
    -> CellController
    View Model
    titleText() -> String
    backgroundColor() -> UIColor
    View
    setTitle(String)
    setBackgroundColor(UIColor)
    T I M E L I N E S E C T I O N C O N T R O L L E R
    V I E W
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    S E C T I O N C O N T R O L L E R
    F U N C T I O N A L I T Y S E PA R AT I O N

    View full-size slide

  89. Cell Controller
    init(CellEntity)
    prepareBindings(for: UIView)
    Data Source
    State {.loading, .completed, .failed}
    updateFormat(Format, for: Range)
    submitComment(String)
    View Model
    ViewState {.editing, .preview}

    setItalics(Bool, for: Range)
    setBold(Bool, for: Range)
    switch(to: ViewState)
    View
    setBackgroundColor(UIColor)
    update(to: ViewState)
    C E L L C O N T R O L L E R
    F U N C T I O N A L I T Y S E PA R AT I O N
    C O M M E N T B O X C E L L C O N T R O L L E R
    V I E W
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    S TAT E
    S TAT E

    View full-size slide

  90. V I E W C O N T R O L L E R
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    V I E W
    H I E R A R C H Y
    S E C T I O N C O N T R O L L E R
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    V I E W
    C E L L C O N T R O L L E R
    D ATA S O U R C E
    V I E W M O D E L
    E N T I T Y
    V I E W

    View full-size slide

  91. V I E W C O N T R O L L E R S E C T I O N C O N T R O L L E R C E L L C O N T R O L L E R
    S E C T I O N C O N T R O L L E R
    S E C T I O N C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    H I E R A R C H Y

    View full-size slide

  92. V I E W C O N T R O L L E R S E C T I O N C O N T R O L L E R C E L L C O N T R O L L E R
    S E C T I O N C O N T R O L L E R
    S E C T I O N C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    H I E R A R C H Y

    View full-size slide

  93. V I E W C O N T R O L L E R S E C T I O N C O N T R O L L E R C E L L C O N T R O L L E R
    S E C T I O N C O N T R O L L E R
    S E C T I O N C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    C E L L C O N T R O L L E R
    V I E W C O N T R O L L E R
    V I E W C O N T R O L L E R
    H I E R A R C H Y

    View full-size slide

  94. R O U T E R V I E W C O N T R O L L E R
    V I E W C O N T R O L L E R
    V I E W C O N T R O L L E R
    R O U T E R C O M PAT I B I L I T Y

    View full-size slide

  95. D I D W E A C H I E V E O U R G O A L ?

    View full-size slide

  96. R E F L E C T I N G O N O U R TA R G E T
    R E Q U I R E M E N T S
    • Testability
    • Code reusability
    • Easy to onboard
    • Modular
    • Expandable
    • Compatible

    View full-size slide

  97. R E F L E C T I N G O N O U R TA R G E T
    • iOS first and foremost
    • Enforce unidirectional flow
    • Utilise immutability
    • Include reactive elements
    • Embrace Swift’s functionality
    • Strong guidelines
    P R I N C I P L E S

    View full-size slide

  98. N E AT A N D M O D U L A R

    View full-size slide

  99. N E AT & M O D U L A R

    View full-size slide

  100. N E M O
    F I N D I N G
    @ A N D Y Y H O P E

    View full-size slide