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.

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