Droidcon SF 2019: Architecture Agnostic UI Development

Over the course of the last few years, we have seen a host of different architectures being used & recommended in our ecosystem. With each iteration of these recommended patterns, we often end up spending valuable development cycles in migrating our apps to the latest and greatest. Wouldn’t it be great if you could make your UI agnostic of who’s driving it without having it attached to any kind of architecture? In this talk we will go through how we can leverage UI objects, sealed classes and state machine to make your UI easier to write, much more testable and predictable, where you can easily switch architectures and even UI frameworks (Jetpack Compose anyone?) without changing much of the core implementation of you UI code.

Transcript

1. M A R C O S DA M A S C E N O S R . A N D R O I D E NG I N E E R T I N D E R @marcospaulosd V I N AY G A BA S R . A N D R O I D E NG I N E E R A I R B N B @vinaygaba Architecture Agnostic UI Development
2. Android development in 2019 is drastically different than Android development in 2009
3. Complexity Features Complexity Features As the complexity grew…
4. Complexity Features Complexity Features As the complexity grew…
5. As the complexity grew…
6. • Managing apps became harder As the complexity grew…
7. • Managing apps became harder • Code wasn’t readable As the complexity grew…
8. • Managing apps became harder • Code wasn’t readable • Codebase lacked consistency As the complexity grew…
9. • Managing apps became harder • Code wasn’t readable • Codebase lacked consistency • Testing wasn’t easy As the complexity grew…
11. MVC Controller Model View
12. MVP Presenter Model View
14. MVVM View Model Model View Observe Notify Update Async Result
15. CLEAN View Model Domain (Use Cases) View Data Repository
16. VIPER Presenter Interactor View Router Entity
18. Wait a Minute!
19. Wouldn’t it be nice if we could just focus on core principles and not worry about implementation details?
20. MVC
21. MVC MVP
22. MVC MVP MVVM
23. MVC MVP MVVM MVI
24. MVC MVP MVVM VIPER MVI
25. MVC MVP MVVM VIPER MVI
26. View
27. User Interface
28. Challenges with UI Development
29. • Managing state and keeping it in sync is challenging Challenges with UI Development
30. • Managing state and keeping it in sync is challenging • We often encounter hard-to-reproduce bugs Challenges with UI Development
31. • Managing state and keeping it in sync is challenging • We often encounter hard-to-reproduce bugs • Testing UI requires effort Challenges with UI Development
33. What if we could represent all the possible states & state changes in a single class?
34. States & state changes in a single class
35. • Imagine a class that works like a router States & state changes in a single class
36. • Imagine a class that works like a router • It receives commands and delegates responsibility States & state changes in a single class
37. • Imagine a class that works like a router • It receives commands and delegates responsibility • All you have to do is to plug and play the right classes to handle the right responsibilities States & state changes in a single class
38. Let’s look at an example
39. There is a lot of things we can abstract here Let’s look at an example
40. ComicbookList Abstracting the UI
41. ComicbookList LoadingView Abstracting the UI
42. ComicbookList LoadingView SelectedComicbook Abstracting the UI
43. ComicbookList LoadingView SelectedComicbook DisplayingShowMoreButton Abstracting the UI
44. ComicbookList LoadingView SelectedComicbook DisplayingShowMoreButton DescriptionIsCollapsed Abstracting the UI
45. ComicbookList LoadingView SelectedComicbook DisplayingShowMoreButton DescriptionIsCollapsed Abstracting the UI
46. ComicbookList LoadingView SelectedComicbook DisplayingShowMoreButton DescriptionIsCollapsed Abstracting the UI
47. Abstracting the UI
48. What if we have a class the represents our UI interactions?
49. State Machine
50. A device which can be in one of a set number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
51. A device which can be in one of a set number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
52. A device which can be in one of a set number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
53. A device which can be in one of a set number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
54. A device which can be in one of a set number of stable conditions depending on its previous condition and on the present values of its inputs. State Machine
55. State Machine - State
56. LoadingState State Machine - State
57. ShowingComicBooksState State Machine - State
58. ShowingComicBookState State Machine - State
59. LoadingState ShowingComicBooksState ShowingComicbookState State Machine - State
60. LoadingState ShowingComicBooksState ShowingComicbookState State Machine - State
61. State Machine - State
62. State Machine - State
63. State Machine - State
64. State Machine - State
65. State Machine - State
66. State Machine - State
67. State Machine - Events
68. State Machine - Events
69. ShowComicBook State Machine - Events
70. State Machine - Events
71. State Machine - Events
72. ShowMoreDescription State Machine - Events
73. LoadComicBooks State Machine - Events
74. LoadComicBooks ShowComicBook ShowMoreDescription State Machine - Events
75. LoadComicBooks ShowComicBook ShowMoreDescription State Machine - Events
76. State Machine - Events
77. State Machine - Events
78. StateMachine State Machine - Events
79. StateMachine State Machine
80. StateMachine LoadComicBooks <event> State Machine
81. StateMachine Does current state accepts that event? <event> LoadComicBooks State Machine
82. StateMachine Does current state accepts that event? <event> LoadComicBooks Yes State Machine
83. StateMachine Do I need to transition to another state <event> LoadComicBooks State Machine
84. StateMachine Do I need to transition to another state <event> LoadComicBooks Yes State Machine
85. StateMachine Transition to LoadingState <event> LoadComicBooks State Machine
86. StateMachine Transition to LoadingState <event> LoadComicBooks Trigger sideffect State Machine
87. StateMachine Transition to LoadingState Trigger sideffect LoadComicBooks <sideeffect> State Machine
88. StateMachine <event> OnComicBookLoaded Does current state accepts that event? State Machine
89. StateMachine <event> OnComicBookLoaded Does current state accepts that event? Yes State Machine
90. StateMachine <event> OnComicBookLoaded Do I need to transition to another state State Machine
91. StateMachine <event> OnComicBookLoaded Do I need to transition to another state Yes State Machine
92. StateMachine <event> OnComicBookLoaded Transition to ShowingComicBooks(comics) State Machine
93. StateMachine <event> OnComicBookLoaded Transition to ShowingComicBooks(comics) No SideEffects need to be triggered State Machine
94. A consequence of a state transition or of an event passed to a state machine. State Machine - SideEffects
95. StateMachine Transition to LoadingState <event> LoadComicBooks Trigger sideffect LoadComicBooks <sideeffect> State Machine - SideEffects
96. StateMachine <event> OnComicBookLoaded Transition to ShowingComicBooks(comics) No SideEffects need to be triggered State Machine - SideEffects
97. StateMachineFactory.kt
98. StateMachineFactory.kt
99. StateMachineFactory.kt
100. StateMachineFactory.kt
101. StateMachineFactory.kt
102. StateMachineFactory.kt
103. ComicBooksViewModel.kt
104. ComicBooksViewModel.kt ComicBooksPresenter.kt
105. ComicBooksViewModel.kt ComicBooksPresenter.kt
106. ComicBooksViewModel.kt ComicBooksPresenter.kt
107. ComicBooksViewModel.kt ComicBooksPresenter.kt
108. ComicBooksViewModel.kt ComicBooksPresenter.kt
109. ComicBooksViewModel.kt ComicBooksPresenter.kt
110. ComicBooksViewModel.kt ComicBooksPresenter.kt
111. ComicBooksViewModel.kt ComicBooksPresenter.kt
112. ComicBooksViewModel.kt ComicBooksPresenter.kt
113. ComicBooksViewModel.kt ComicBooksPresenter.kt
114. ComicBooksViewModel.kt ComicBooksPresenter.kt
115. ComicBooksViewModel.kt ComicBooksPresenter.kt
116. ComicBooksViewModel.kt ComicBooksPresenter.kt
117. StateMachineFactory.kt
118. StateMachineFactory.kt
119. StateMachineFactory.kt
120. StateMachineFactory.kt
121. StateMachineFactory.kt
122. StateMachineFactory.kt
123. ComicBooksFragment.kt
124. ComicBooksFragment.kt
125. ComicBooksFragment.kt
126. ComicBooksFragment.kt
127. ComicBooksFragment.kt
128. ComicBooksFragment.kt
130. ComicBooksFragment.kt
131. ComicBooksFragment.kt
132. ComicBooksFragment.kt
133. ComicBooksFragment.kt
134. StateMachineFactory.kt
135. StateMachineFactory.kt
136. StateMachineFactory.kt
137. StateMachineFactory.kt
138. StateMachineFactory.kt
139. StateMachineFactory.kt
140. StateMachineFactory.kt
141. ComicDetailFragment.kt
142. ComicDetailFragment.kt
143. ComicDetailFragment.kt
144. ComicDetailFragment.kt
147. ComicDetailFragment.kt
148. ComicDetailFragment.kt
149. ComicDetailFragment.kt
150. ComicDetailFragment.kt
151. Event.kt
152. Event.kt
153. Event.kt
154. State Machine - State
155. State Machine - State
156. StateMachineFactory.kt
157. StateMachineFactory.kt
158. StateMachineFactory.kt
159. StateMachineFactory.kt
160. StateMachineFactory.kt
161. StateMachineFactory.kt
162. StateMachineFactory.kt
163. ComicDetailFragment.kt
164. ComicDetailFragment.kt
165. ComicDetailFragment.kt
166. ComicDetailFragment.kt
167. ComicDetailFragment.kt
168. ComicDetailFragment.kt
169. ComicDetailFragment.kt
170. ComicDetailFragment.kt
171. StateMachineFactoryTests.kt
172. StateMachineFactoryTests.kt
173. StateMachineFactoryTests.kt
174. StateMachineFactoryTests.kt
175. StateMachineFactoryTests.kt
176. StateMachineFactoryTests.kt
177. StateMachineFactoryTests.kt
178. StateMachineFactoryTests.kt
179. StateMachineFactoryTests.kt
181. Compose
198. State Machine
199. Better declarative code State Machine
200. Better declarative code Makes the UI testable State Machine
201. Better declarative code Makes the UI testable Single source of truth for UI Events and States State Machine
202. Views/ Fragments State Machine
203. Views/ Fragments <event> State Machine
204. Views/ Fragments ViewModel <event> State Machine
205. Views/ Fragments ViewModel <event> StateMachine <event> State Machine
206. Views/ Fragments ViewModel <event> StateMachine <event> <transitionTo> State Machine
207. Views/ Fragments ViewModel <event> StateMachine <event> <transitionTo> <state> State Machine
208. Views/ Fragments ViewModel <event> StateMachine <event> <transitionTo> <state> <state> State Machine
209. Views/ Fragments ViewModel <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> State Machine
210. Views/ Fragments ViewModel <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> State Machine
211. Views/ Fragments <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> State Machine
212. Views/ Fragments <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> Presenter State Machine
213. <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> Presenter State Machine
214. <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> Presenter Compose State Machine
215. <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> State Machine
216. <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> State Machine
217. <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> Shenanigans State Machine
218. <event> StateMachine <event> <transitionTo> <state> <state> <sideEffect> <LoadComicBooks> Shenanigans SwiftUI State Machine
219. StateMachine <event> <transitionTo> <state> <sideEffect>
220. Architecture Agnostic StateMachine <event> <transitionTo> <state> <sideEffect>
221. M A R C O S DA M A S C E N O S R . A N D R O I D E NG I N E E R T I N D E R @marcospaulosd V I N AY G A BA S R . A N D R O I D E NG I N E E R A I R B N B @vinaygaba Architecture Agnostic UI Development http://bit.ly/ArchitectureAgnosticUI