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