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

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
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
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 . . . )
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 ?
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
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
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
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
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
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
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
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
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
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
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
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
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
34. C O D E S E C T I O N
35. C O D E H E A D E R
36. C O D E A C T I O N S
37. C O D E T I T L E R O W S
38. C O D E F I L E R O W S
39. C O D E C O N T E N T
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
41. I S S U E S S E C T I O N
42. I S S U E S A C T I O N S
43. I S S U E S T I T L E R O W
44. I S S U E S I T E M R O W S
45. I S S U E S F O O T E R
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
47. P U L L R E Q U E S T S S E C T I O N
48. P U L L R E Q U E S T S A C T I O N S
49. P U L L R E Q U E S T S T I T L E R O W
50. P U L L R E Q U E S T S I T E M R O W S
51. P U L L R E Q U E S T S F O O T E R
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
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
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
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
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
57. I S S U E D E TA I L V I E W
58. I S S U E D E TA I L V I E W T I T L E
59. I S S U E D E TA I L V I E W S U B T I T L E
60. I S S U E D E TA I L V I E W I S S U E S
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
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
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
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
65. P U L L R E Q U E S T D E TA I L V I E W
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
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
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
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
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
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
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
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
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
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
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
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
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
79. Y U C K Y L E T ’ S B R E A K I T U P
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
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
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
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
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
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
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
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
88. View Controller prepate() navigate(to: Destination) Data Source <StateManageable> State {.loading, .completed, .failed} fetchData() sectionController(forIndex: Int) -> SectionController cellController(for: IndexPath) -> CellController View Model <ViewStateManageable> 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
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
90. Cell Controller init(CellEntity) prepareBindings(for: UIView) Data Source <StateManageable> State {.loading, .completed, .failed} updateFormat(Format, for: Range) submitComment(String) View Model <ViewStateManageable> 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
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
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
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
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
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
96. D I D W E A C H I E V E O U R G O A L ?
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
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
99. N E AT A N D M O D U L A R
100. N E AT & M O D U L A R
101. N E M O
102. N E M O F I N D I N G @ A N D Y Y H O P E