Exploring the possibilities of Unidirectional Data Flow Architectures on Android
Brian Egan & Guillaume Lung
November 10, 2015
Danger: Fun & Experimental!
We don’t actually use any of this on the SoundCloud Android App.
What’s happening?
UI
Playback
User Interaction
ZOMG
Visualize the state change!
State
UI
State
UI
State
UI
State
UI
Demo Redux, Brian!
DX
The Basics
f( )
Unidirectional Flow
State
UI
Actions / Intent
Global State
State
Immutable Data Structures
A simple counter app.
One example to try them all.
Plan
Redux
Data Flow in Redux
model
reduce
model
action
,
state change notification
Subscriber
State & UI Over time
State
UI
State
UI
State
UI
State
UI
Time Travel!
State
UI
State
UI
State
UI
State
UI
Time Travel!
State
UI
State
UI
State
UI
State
UI
Time Travel!
State
UI
State
UI
State
UI
State
UI
Time Travel!
State
UI
State
UI
State
UI
State
UI
Testing!
Elm Architecture
Elm Architecture
update
model
view
Elm Architecture
update
model
view
UI
Elm Architecture
update
model
view
UI
action
Elm Architecture
model
update
model
view
UI
action
,
Composable
action
model
update
view
Components
action
model
update
view
Compose interfaces with Components!
Open / Closed principle
Views become testable
update
model
view
View
Data
Structure
Cycle.js
Cycle
driver
main
Cycle
View
View
View
driver
main
Itent
Itent
Itent
Complex.
Render anywhere!
State
Android
State
iOS
State
web
State
Server
Now for the Android Demo!
A TODO list with redux and debug tools
Wrapping up
f( )
Unidirectional Flow
State
UI
Actions
Benefits
Composable UI
Time Travel Debugging
Testing
Render anywhere
Fun to learn :)
More possibilities
Bug reports, Databases, Hot Reloading*
Unsolved
Memory Footprint, UI Rendering Speed
Should I start writing my production apps like this?
NO
Should we continue to experiment and improve our architectures?
YES
Pleasure in development
Thank you.
Brian Egan & Guillaume Lung
December 10, 2015
Resources