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. View Slide

  2. 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 Slide

  3. 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 Slide

  4. 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 Slide

  5. 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 Slide

  6. 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 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 G O O D
    • Simple
    • Easy to use and understand
    • Officially supported by Apple frameworks

    View Slide

  8. 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 Slide

  9. 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 Slide

  10. 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 Slide

  11. 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 Slide

  12. 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 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 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 Slide

  14. 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 Slide

  15. 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 Slide

  16. 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 Slide

  17. 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 Slide

  18. 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 Slide

  19. 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 Slide

  20. 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 Slide

  21. 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 Slide

  22. 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 Slide

  23. 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 Slide

  24. 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 Slide

  25. 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 Slide

  26. 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 Slide

  27. 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 Slide

  28. 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 Slide

  29. 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 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 S L I S T

    View Slide

  31. 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 Slide

  32. 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 Slide

  33. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. C O D E
    C O N T E N T

    View Slide

  40. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  46. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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
    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 Slide

  53. 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 Slide

  54. 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 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 Slide

  56. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. 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 Slide

  62. 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 Slide

  63. 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 Slide

  64. 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 Slide

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

    View Slide

  66. 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 Slide

  67. 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 Slide

  68. 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 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 : C O M M E N T S

    View Slide

  70. 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 Slide

  71. 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 Slide

  72. 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 Slide

  73. 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 Slide

  74. 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 Slide

  75. 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 Slide

  76. 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 Slide

  77. 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 Slide

  78. 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 Slide

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

    View Slide

  80. 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 Slide

  81. 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 Slide

  82. 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 Slide

  83. 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 Slide

  84. 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 Slide

  85. 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 Slide

  86. 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 Slide

  87. 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 Slide

  88. 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 Slide

  89. 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 Slide

  90. 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 Slide

  91. 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 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 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
    H I E R A R C H Y

    View Slide

  94. 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 Slide

  95. 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 Slide

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

    View Slide

  97. 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 Slide

  98. 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 Slide

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

    View Slide

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

    View Slide

  101. N E M O

    View Slide

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

    View Slide