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

Droidcon SF 2019: Architecture Agnostic UI Development

E8da8d13d06ca69dbe019ecad71ed2a4?s=47 vinaygaba
November 25, 2019

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.

E8da8d13d06ca69dbe019ecad71ed2a4?s=128

vinaygaba

November 25, 2019
Tweet

More Decks by vinaygaba

Other Decks in Programming

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…
  10. None
  11. MVC Controller Model View

  12. MVP Presenter Model View

  13. None
  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

  17. None
  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
  32. None
  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

  129. None
  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

  145. None
  146. None
  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

  180. None
  181. Compose

  182. None
  183. None
  184. None
  185. None
  186. None
  187. None
  188. None
  189. None
  190. None
  191. None
  192. None
  193. None
  194. None
  195. None
  196. None
  197. None
  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