$30 off During Our Annual Pro Sale. View Details »

Droidcon SF 2019: Architecture Agnostic UI Development

vinaygaba
November 25, 2019
Programming
0
6k

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.

vinaygaba

November 25, 2019
Tweet

More Decks by vinaygaba

See All by vinaygaba
KotlinConf'23: Automating UI Infrastructure in Jetpack Compose
vinaygaba
1
120
Android Summit 2020: Learn Jetpack Compose By Example
vinaygaba
2
4.8k
360|AnDev 2020: Learning Jetpack Compose By Example
vinaygaba
1
5.9k
Droidcon SF 2017: Building Modern Cross Platform Apps with Flutter
vinaygaba
3
6.7k
Spotify: Constraint Layout 101
vinaygaba
1
6.6k
Columbia University: Decoding Tech Internships
vinaygaba
0
6.6k
Droidcon Montreal 2015: Optimizing Your Apps For Emerging Markets
vinaygaba
0
7.9k
Optimizing your Apps for Emerging Markets
vinaygaba
0
9.2k

Other Decks in Programming

See All in Programming
飛び出せ！フロントエンド知見共有会~Next,Astro,Sveltekitを使ったエンジニアたちの声~ - NIFTY Tech Day 2023
niftycorp
0
130
Expert Tech Talk!〜ニフティスペシャリスト対談〜 - NIFTY Tech Day 2023
niftycorp
0
130
「価値」あるものを作るためにエンジニアができること - NIFTY Tech Day 2023
niftycorp
0
140
MVP開発をするための要求の詰め方/How to think about requirements for MVP development
misatokii
0
120
第42回ロボティクス勉強会：実環境を手軽にシミュレータ環境に持ってくるpointcloud2gazebo
atinfinity
0
930
ニジエチューニング2023-12
nijieinfra
0
190
エンジニア秘書が通訳する異文化コミュニケーションのあれこれ / engineer-communication
assu_ming
0
130
非同期ツールキット「Vert.x」のご紹介
masatoshiitoh
0
120
コンピュータグラフィクスの空
fadis
6
1.4k
if 式と switch 式による SwiftUI のプレビューエラー対策
ojun9
1
220
Scala Left Fold Parallelisation - Three Approaches
philipschwarz
PRO
0
280
生成AI×ノーコード (スピーディーなアプリ開発の新時代)
knr109
3
4.4k

Featured

See All Featured
Unsuck your backbone
ammeep
660
56k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
44
12k
BBQ
matthewcrist
76
8.5k
A Philosophy of Restraint
colly
194
15k
GraphQLとの向き合い方2022年版
quramy
26
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
The Power of CSS Pseudo Elements
geoffreycrofte
56
4.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
RailsConf 2023
tenderlove
0
360
Teambox: Starting and Learning
jrom
125
8.2k
Agile that works and the tools we love
rasmusluckow
323
20k

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

    View Slide

  2. Android development in 2019 is
    drastically different than
    Android development in 2009

    View Slide

  3. Complexity
    Features
    Complexity
    Features
    As the complexity grew…

    View Slide

  4. Complexity
    Features
    Complexity
    Features
    As the complexity grew…

    View Slide

  5. As the
    complexity
    grew…

    View Slide

  6. • Managing apps became
    harder
    As the
    complexity
    grew…

    View Slide

  7. • Managing apps became
    harder
    • Code wasn’t readable
    As the
    complexity
    grew…

    View Slide

  8. • Managing apps became
    harder
    • Code wasn’t readable
    • Codebase lacked
    consistency
    As the
    complexity
    grew…

    View Slide

  9. • Managing apps became
    harder
    • Code wasn’t readable
    • Codebase lacked
    consistency
    • Testing wasn’t easy
    As the
    complexity
    grew…

    View Slide

  10. View Slide

  11. MVC
    Controller
    Model View

    View Slide

  12. MVP
    Presenter
    Model View

    View Slide

  13. View Slide

  14. MVVM
    View Model
    Model View
    Observe
    Notify
    Update
    Async Result

    View Slide

  15. CLEAN
    View Model
    Domain
    (Use Cases)
    View
    Data
    Repository

    View Slide

  16. VIPER
    Presenter Interactor
    View
    Router
    Entity

    View Slide

  17. View Slide

  18. Wait a Minute!

    View Slide

  19. Wouldn’t it be nice if we could just
    focus on core principles and not worry
    about implementation details?

    View Slide

  20. MVC

    View Slide

  21. MVC MVP

    View Slide

  22. MVC MVP MVVM

    View Slide

  23. MVC MVP MVVM MVI

    View Slide

  24. MVC MVP MVVM VIPER
    MVI

    View Slide

  25. MVC MVP MVVM VIPER
    MVI

    View Slide

  26. View

    View Slide

  27. User
    Interface

    View Slide

  28. Challenges
    with UI
    Development

    View Slide

  29. • Managing state and
    keeping it in sync is
    challenging
    Challenges
    with UI
    Development

    View Slide

  30. • Managing state and
    keeping it in sync is
    challenging
    • We often encounter
    hard-to-reproduce bugs
    Challenges
    with UI
    Development

    View Slide

  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

    View Slide

  32. View Slide

  33. What if we could represent all the
    possible states & state changes in a
    single class?

    View Slide

  34. States & state
    changes in a
    single class

    View Slide

  35. • Imagine a class that works like
    a router
    States & state
    changes in a
    single class

    View Slide

  36. • Imagine a class that works like
    a router
    • It receives commands and
    delegates responsibility
    States & state
    changes in a
    single class

    View Slide

  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

    View Slide

  38. Let’s look at an example

    View Slide

  39. There is a lot of things we can abstract here
    Let’s look at an example

    View Slide

  40. ComicbookList
    Abstracting the UI

    View Slide

  41. ComicbookList
    LoadingView
    Abstracting the UI

    View Slide

  42. ComicbookList
    LoadingView
    SelectedComicbook
    Abstracting the UI

    View Slide

  43. ComicbookList
    LoadingView
    SelectedComicbook
    DisplayingShowMoreButton
    Abstracting the UI

    View Slide

  44. ComicbookList
    LoadingView
    SelectedComicbook
    DisplayingShowMoreButton
    DescriptionIsCollapsed
    Abstracting the UI

    View Slide

  45. ComicbookList
    LoadingView
    SelectedComicbook
    DisplayingShowMoreButton
    DescriptionIsCollapsed
    Abstracting the UI

    View Slide

  46. ComicbookList
    LoadingView
    SelectedComicbook
    DisplayingShowMoreButton
    DescriptionIsCollapsed
    Abstracting the UI

    View Slide

  47. Abstracting the UI

    View Slide

  48. What if we have a class the represents
    our UI interactions?

    View Slide

  49. State
    Machine

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  55. State Machine - State

    View Slide

  56. LoadingState
    State Machine - State

    View Slide

  57. ShowingComicBooksState
    State Machine - State

    View Slide

  58. ShowingComicBookState
    State Machine - State

    View Slide

  59. LoadingState
    ShowingComicBooksState
    ShowingComicbookState
    State Machine - State

    View Slide

  60. LoadingState
    ShowingComicBooksState
    ShowingComicbookState
    State Machine - State

    View Slide

  61. State Machine - State

    View Slide

  62. State Machine - State

    View Slide

  63. State Machine - State

    View Slide

  64. State Machine - State

    View Slide

  65. State Machine - State

    View Slide

  66. State Machine - State

    View Slide

  67. State Machine - Events

    View Slide

  68. State Machine - Events

    View Slide

  69. ShowComicBook
    State Machine - Events

    View Slide

  70. State Machine - Events

    View Slide

  71. State Machine - Events

    View Slide

  72. ShowMoreDescription
    State Machine - Events

    View Slide

  73. LoadComicBooks
    State Machine - Events

    View Slide

  74. LoadComicBooks
    ShowComicBook
    ShowMoreDescription
    State Machine - Events

    View Slide

  75. LoadComicBooks
    ShowComicBook
    ShowMoreDescription
    State Machine - Events

    View Slide

  76. State Machine - Events

    View Slide

  77. State Machine - Events

    View Slide

  78. StateMachine
    State Machine - Events

    View Slide

  79. StateMachine
    State Machine

    View Slide

  80. StateMachine
    LoadComicBooks

    State Machine

    View Slide

  81. StateMachine
    Does current state accepts that event?

    LoadComicBooks
    State Machine

    View Slide

  82. StateMachine
    Does current state accepts that event?

    LoadComicBooks
    Yes
    State Machine

    View Slide

  83. StateMachine
    Do I need to transition to another state

    LoadComicBooks
    State Machine

    View Slide

  84. StateMachine
    Do I need to transition to another state

    LoadComicBooks
    Yes
    State Machine

    View Slide

  85. StateMachine
    Transition to LoadingState

    LoadComicBooks
    State Machine

    View Slide

  86. StateMachine
    Transition to LoadingState

    LoadComicBooks
    Trigger sideffect
    State Machine

    View Slide

  87. StateMachine
    Transition to LoadingState
    Trigger sideffect
    LoadComicBooks

    State Machine

    View Slide

  88. StateMachine

    OnComicBookLoaded
    Does current state accepts that event?
    State Machine

    View Slide

  89. StateMachine

    OnComicBookLoaded
    Does current state accepts that event?
    Yes
    State Machine

    View Slide

  90. StateMachine

    OnComicBookLoaded
    Do I need to transition to another state
    State Machine

    View Slide

  91. StateMachine

    OnComicBookLoaded
    Do I need to transition to another state
    Yes
    State Machine

    View Slide

  92. StateMachine

    OnComicBookLoaded
    Transition to ShowingComicBooks(comics)
    State Machine

    View Slide

  93. StateMachine

    OnComicBookLoaded
    Transition to ShowingComicBooks(comics)
    No SideEffects need to be triggered
    State Machine

    View Slide

  94. A consequence of a state transition or of
    an event passed to a state machine.
    State Machine - SideEffects

    View Slide

  95. StateMachine
    Transition to LoadingState

    LoadComicBooks
    Trigger sideffect
    LoadComicBooks

    State Machine - SideEffects

    View Slide

  96. StateMachine

    OnComicBookLoaded
    Transition to ShowingComicBooks(comics)
    No SideEffects need to be triggered
    State Machine - SideEffects

    View Slide

  97. StateMachineFactory.kt

    View Slide

  98. StateMachineFactory.kt

    View Slide

  99. StateMachineFactory.kt

    View Slide

  100. StateMachineFactory.kt

    View Slide

  101. StateMachineFactory.kt

    View Slide

  102. StateMachineFactory.kt

    View Slide

  103. ComicBooksViewModel.kt

    View Slide

  104. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  105. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  106. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  107. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  108. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  109. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  110. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  111. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  112. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  113. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  114. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  115. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  116. ComicBooksViewModel.kt ComicBooksPresenter.kt

    View Slide

  117. StateMachineFactory.kt

    View Slide

  118. StateMachineFactory.kt

    View Slide

  119. StateMachineFactory.kt

    View Slide

  120. StateMachineFactory.kt

    View Slide

  121. StateMachineFactory.kt

    View Slide

  122. StateMachineFactory.kt

    View Slide

  123. ComicBooksFragment.kt

    View Slide

  124. ComicBooksFragment.kt

    View Slide

  125. ComicBooksFragment.kt

    View Slide

  126. ComicBooksFragment.kt

    View Slide

  127. ComicBooksFragment.kt

    View Slide

  128. ComicBooksFragment.kt

    View Slide

  129. View Slide

  130. ComicBooksFragment.kt

    View Slide

  131. ComicBooksFragment.kt

    View Slide

  132. ComicBooksFragment.kt

    View Slide

  133. ComicBooksFragment.kt

    View Slide

  134. StateMachineFactory.kt

    View Slide

  135. StateMachineFactory.kt

    View Slide

  136. StateMachineFactory.kt

    View Slide

  137. StateMachineFactory.kt

    View Slide

  138. StateMachineFactory.kt

    View Slide

  139. StateMachineFactory.kt

    View Slide

  140. StateMachineFactory.kt

    View Slide

  141. ComicDetailFragment.kt

    View Slide

  142. ComicDetailFragment.kt

    View Slide

  143. ComicDetailFragment.kt

    View Slide

  144. ComicDetailFragment.kt

    View Slide

  145. View Slide

  146. View Slide

  147. ComicDetailFragment.kt

    View Slide

  148. ComicDetailFragment.kt

    View Slide

  149. ComicDetailFragment.kt

    View Slide

  150. ComicDetailFragment.kt

    View Slide

  151. Event.kt

    View Slide

  152. Event.kt

    View Slide

  153. Event.kt

    View Slide

  154. State Machine - State

    View Slide

  155. State Machine - State

    View Slide

  156. StateMachineFactory.kt

    View Slide

  157. StateMachineFactory.kt

    View Slide

  158. StateMachineFactory.kt

    View Slide

  159. StateMachineFactory.kt

    View Slide

  160. StateMachineFactory.kt

    View Slide

  161. StateMachineFactory.kt

    View Slide

  162. StateMachineFactory.kt

    View Slide

  163. ComicDetailFragment.kt

    View Slide

  164. ComicDetailFragment.kt

    View Slide

  165. ComicDetailFragment.kt

    View Slide

  166. ComicDetailFragment.kt

    View Slide

  167. ComicDetailFragment.kt

    View Slide

  168. ComicDetailFragment.kt

    View Slide

  169. ComicDetailFragment.kt

    View Slide

  170. ComicDetailFragment.kt

    View Slide

  171. StateMachineFactoryTests.kt

    View Slide

  172. StateMachineFactoryTests.kt

    View Slide

  173. StateMachineFactoryTests.kt

    View Slide

  174. StateMachineFactoryTests.kt

    View Slide

  175. StateMachineFactoryTests.kt

    View Slide

  176. StateMachineFactoryTests.kt

    View Slide

  177. StateMachineFactoryTests.kt

    View Slide

  178. StateMachineFactoryTests.kt

    View Slide

  179. StateMachineFactoryTests.kt

    View Slide

  180. View Slide

  181. Compose

    View Slide

  182. View Slide

  183. View Slide

  184. View Slide

  185. View Slide

  186. View Slide

  187. View Slide

  188. View Slide

  189. View Slide

  190. View Slide

  191. View Slide

  192. View Slide

  193. View Slide

  194. View Slide

  195. View Slide

  196. View Slide

  197. View Slide

  198. State Machine

    View Slide

  199. Better declarative code
    State Machine

    View Slide

  200. Better declarative code
    Makes the UI testable
    State Machine

    View Slide

  201. Better declarative code
    Makes the UI testable
    Single source of truth for UI Events and States
    State Machine

    View Slide

  202. Views/
    Fragments
    State Machine

    View Slide

  203. Views/
    Fragments

    State Machine

    View Slide

  204. Views/
    Fragments
    ViewModel

    State Machine

    View Slide

  205. Views/
    Fragments
    ViewModel

    StateMachine

    State Machine

    View Slide

  206. Views/
    Fragments
    ViewModel

    StateMachine


    State Machine

    View Slide

  207. Views/
    Fragments
    ViewModel

    StateMachine


    State Machine

    View Slide

  208. Views/
    Fragments
    ViewModel

    StateMachine


    State Machine

    View Slide

  209. Views/
    Fragments
    ViewModel

    StateMachine



    State Machine

    View Slide

  210. Views/
    Fragments
    ViewModel

    StateMachine




    State Machine

    View Slide

  211. Views/
    Fragments

    StateMachine




    State Machine

    View Slide

  212. Views/
    Fragments

    StateMachine




    Presenter
    State Machine

    View Slide


  213. StateMachine




    Presenter
    State Machine

    View Slide


  214. StateMachine




    Presenter Compose
    State Machine

    View Slide


  215. StateMachine




    State Machine

    View Slide


  216. StateMachine




    State Machine

    View Slide


  217. StateMachine




    Shenanigans
    State Machine

    View Slide


  218. StateMachine




    Shenanigans SwiftUI
    State Machine

    View Slide

  219. StateMachine



    View Slide

  220. Architecture Agnostic
    StateMachine



    View Slide

  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

    View Slide