An introduction to predictable state container based architectures for your android app

1. The Rise Of The State
Machines
an introduction to predictable state container based architectures for
your android apps
@_mboudraa

2. @_mboudraa

3. @_mboudraa
Problem to Solve

4. @_mboudraa
Problem to Solve
Easy to test all the components of an app (even the UI)

5. @_mboudraa
Problem to Solve
Easy to test all the components of an app (even the UI)
Easy to reproduce bugs to fix them

6. @_mboudraa
Problem to Solve
Easy to test all the components of an app (even the UI)
Easy to update
Easy to reproduce bugs to fix them

7. @_mboudraa
Problem to Solve
Easy to test all the components of an app (even the UI)
Easy to update
Easy to reproduce bugs to fix them
Global Picture of what’s happening by reading the code

8. View
View
Controller
Action
@_mboudraa
Store
Reducer
f(AppState, Action) -> AppState
Redux / MVI

9. @_mboudraa
Store
Reducer
f(AppState, Action) -> AppState
Redux / MVI
What’s a Pure function?

10. @_mboudraa
Store
Reducer
f(AppState, Action) -> AppState
Redux / MVI
Pure
fun add(a: Int, b: Int): Int {
return a + b
}
What’s a Pure function?

11. @_mboudraa
Store
Reducer
f(AppState, Action) -> AppState
Redux / MVI
Pure
fun add(a: Int, b: Int): Int {
return a + b
}
fun add(a: Int, b: Int): Int {
val result = a + b
println(result)
return result
}
Not Pure
What’s a Pure function?

12. View
View
Controller
Action
Store
Reducer
f(AppState, Action) -> AppState
@_mboudraa

13. Store
View
View
Controller
Action
Reducer
f(AppState, Action) -> AppState
@_mboudraa

14. Store
View
View
Controller
Action
Reducer
EditText Changed
f(AppState, Action) -> AppState
@_mboudraa

15. Store
View
View
Controller
Action
Reducer
EditText Changed
f(AppState, Action) -> AppState
@_mboudraa

16. Store
View
View
Controller
Action
Reducer
EditText Changed
f(AppState, Action) -> AppState
@_mboudraa

17. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
@_mboudraa

18. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
@_mboudraa

19. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
New State
@_mboudraa

20. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
New State
@_mboudraa

21. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
New State
View State
@_mboudraa

22. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
New State
View State
@_mboudraa

23. Store
View
View
Controller
Action
Reducer
EditText Changed
ValidateFieldsAction
f(AppState, Action) -> AppState
New State
View State
@_mboudraa

24. Store
View
View
Controller
Action
Reducer
f(AppState, Action) -> AppState
@_mboudraa

25. Store
View
View
Controller
Action
Reducer
Click on Sign In
f(AppState, Action) -> AppState
@_mboudraa

26. Store
View
View
Controller
Action
Reducer
Click on Sign In
f(AppState, Action) -> AppState
@_mboudraa

27. Store
View
View
Controller
Action
Reducer
Click on Sign In
f(AppState, Action) -> AppState
@_mboudraa

28. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
@_mboudraa

29. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
@_mboudraa

30. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
@_mboudraa

31. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
@_mboudraa

32. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
@_mboudraa

33. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
@_mboudraa

34. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
@_mboudraa

35. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
@_mboudraa

36. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
@_mboudraa

37. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
@_mboudraa

38. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
SuccessfullySignedInAction
@_mboudraa

39. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
SuccessfullySignedInAction
@_mboudraa

40. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
SuccessfullySignedInAction
@_mboudraa

41. Store
@_mboudraa
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
SignInFailedAction

42. Store
View
View
Controller
Action
Reducer
Click on Sign In
SignInAction
f(AppState, Action) -> AppState
New State
View State
Side Effect
SignInAction
SignInFailedAction
@_mboudraa

43. @_mboudraa
Side Effect

44. @_mboudraa
Side Effect
They can be synchronous or asynchronous

45. @_mboudraa
Side Effect
They can be synchronous or asynchronous
It can return an action or nothing

46. @_mboudraa
Action

47. @_mboudraa
Action
It contains meta data

48. @_mboudraa
Action
It contains meta data
It will be reduced by the Store to produce a new State

49. @_mboudraa
Action
sealed class Action {
data class CheckFields(val username: String, val password: String) : Action()
data class AttemptLogin(val username: String, val password: String) : Action()
data class LoginError(val message: String) : Action()
data class UnexpectedError(val message: String) : Action()
}

50. @_mboudraa
Store

51. @_mboudraa
Store
It has the State of the App

52. @_mboudraa
Store
It has the State of the App
State is immutable

53. @_mboudraa
Store
It has the State of the App
Create a new State by reducing an action using the old state
f(State, Action) -> State
State is immutable

54. @_mboudraa
Store
It has the State of the App
Create a new State by reducing an action using the old state
f(State, Action) -> State
It dispatches actions to Side Effects after being reduced
State is immutable

55. @_mboudraa
Storeclass Store(defaultState: AppState) {
var currentState: AppState = defaultState
private set
fun dispatchAction(action: Action) {
currentState = reduce(currentState, action)
dispatchToSideEffects(action)
}
fun reduce(state: AppState, action: Action): AppState {
return when (action) {
is Action.CheckFields -> state.copy(canSubmit = state.email.isNotBlank())
is Action.AttemptLogin -> state.copy(isLoading = true, canSubmit = false)
is Action.LoginError -> {
state.copy(isLoading = false,
canSubmit = true,
hasLoginError = true,
loginError = action.message,
hasUnexpectedError = false)
}
is Action.UnexpectedError -> {
state.copy(isLoading = false,
canSubmit = true,
hasLoginError = false, hasUnexpectedError = false,
unexpectedError = action.message)
}
}
}
}

56. @_mboudraa
State
data class AppState(val email: String,
val password: String,
val canSubmit: Boolean,
val isLoading: Boolean,
val hasLoginError: Boolean,
val loginError: String?,
val hasUnexpectedError: Boolean,
val unexpectedError: String?
val isLoginSuccessful: Boolean)

57. @_mboudraa
View Controller
fun render(appState: AppState) {
when {
appState.isLoginSuccessful -> goto<SucessfulLoginActivity>()
else -> {
setEmail(appState.email)
setPassword(appState.password)
when {
appState.isLoading -> {
hideUnexpectedError()
hideLoginError()
displayProgesssBar()
}
appState.hasLoginError -> {
displayLoginError(appState.loginError)
}
appState.hasUnexpectedError -> {
displayUnexpectedError(appState.unexpectedError)
}
else -> {
hideUnexpectedError()
hideLoginError()
hideProgesssBar()
}
}
}
}
}

58. @_mboudraa

59. View
View
Controller
Action
@_mboudraa
Store
Reducer
f(AppState, Action) -> AppState
Redux / MVI

60. View
View
Controller
Action
@_mboudraa
Store
Reducer
State
f(AppState, Action) -> AppState
State Machine
State( Action) -> NextState
State Machine

61. View
View
Controller
Action
@_mboudraa
State Machine
State( Action) -> NextState
State Machine
State

62. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState

63. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState

64. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed

65. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed

66. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed

67. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction

68. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction

69. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction
ValidState

70. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction
ValidState

71. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction
ValidState
View State

72. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction
ValidState
View State

73. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
EditText Changed
ValidateFieldsAction
View State
ValidState

74. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState

75. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
Click on Sign In

76. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
Click on Sign In

77. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
Click on Sign In

78. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
Click on Sign In
SignInAction

79. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
Click on Sign In
SignInAction

80. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
LoadingState
Click on Sign In
SignInAction

81. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
LoadingState
Click on Sign In
SignInAction

82. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
LoadingState
View State
Click on Sign In
SignInAction

83. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
LoadingState
View State
Click on Sign In
SignInAction

84. View
View
Controller
Action
@_mboudraa
State Machine
State
State( Action) -> NextState
View State
Click on Sign In
SignInAction
LoadingState

85. View
View
Controller
Action
@_mboudraa
State Machine
View State
Click on Sign In
SignInAction
LoadingState State
State( Action) -> NextState

86. View
View
Controller
Action
@_mboudraa
State Machine
View State
Click on Sign In
SignInAction
StateAuthenticatedState
State( Action) -> NextState

87. View
View
Controller
Action
@_mboudraa
State Machine
State( Action) -> NextState
View State
Click on Sign In
SignInAction
StateAuthenticatedState

88. @_mboudraa
Implementation
class DefaultState(private val stateMachine: StateMachine) {
fun onAction(action: Action) =
if (action is Action.CheckFields)
if (!action.username.isBlank())
stateMachine.nextState(ValidState())
}

89. @_mboudraa
Implementation
class ValidState(private val stateMachine: StateMachine) {
fun onAction(action: Action) =
when(action){
is Action.CheckFields-> {
if (!action.username.isBlank())
stateMachine.nextState(ValidState(stateMachine))
else
stateMachine.nextState(DefaultState(stateMachine))
}
is Action.AttemptLogin -> {
stateMachine.nexState(LoadingState(stateMachine), Action.AttemptLogin))
}
}
}
class DefaultState(private val stateMachine: StateMachine) {
fun onAction(action: Action) =
if (action is Action.CheckFields)
if (!action.username.isBlank())
stateMachine.nextState(ValidState())
}

90. @_mboudraa
Implementationclass DefaultState(private val stateMachine: StateMachine) {
fun onAction(action: Action) {
if (action is Action.CheckFields) {
if (!action.username.isBlank()) {
stateMachine.nextState(ValidState())
}
}
}
}
class LoadingState(private val stateMachine: StateMachine) {
fun onAction(action: Action) =
if(action is Action.AttemptLogin){
async(UI) {
val account = bg { authService.signIn(action.credentials}.await()
stateMachine.nextState(AuthenticatedState())
}
}
}
class ValidState(private val stateMachine: StateMachine) {
fun onAction(action: Action) =
when(action){
is Action.CheckFields-> {
if (!action.username.isBlank())
stateMachine.nextState(ValidState(stateMachine))
else
stateMachine.nextState(DefaultState(stateMachine))
}
is Action.AttemptLogin -> {
stateMachine.nexState(LoadingState(stateMachine), Action.AttemptLogin))
}
}
}

91. @_mboudraa
Sum Up

92. @_mboudraa
Sum Up
Pros
Cons
MVI / Redux
Easy to find bugs
Easy to maintain
Easy to add new actions
Global Picture of possible actions
Logic business is isolated in pure functions
Side Effects are isolated
ViewController need to figure out the actual state
Actions can be dispatched from anywhere
No Global Picture of the flow

93. @_mboudraa
Sum Up
Pros
Cons
MVI / Redux
Easy to find bugs
Easy to maintain
Easy to add new actions
Global Picture of possible actions
Logic business is isolated in pure functions
Side Effects are isolated
ViewController need to figure out the actual state
Actions can be dispatched from anywhere
No Global Picture of the flow
State Machine
Easy to find bugs
Easy to maintain
Actions are carried by the state
ViewController receive a state
Hard to add new states
No Global Picture of the flow
Business Logic and Side effects are inside the state
State are responsible for going to the next state

94. @_mboudraa
Sum Up
MVI / Redux State Machine
Pros
Easy to find bugs
Easy to maintain
Easy to add new actions
Global Picture of possible actions
Logic business is isolated in pure functions
Side Effects are isolated
Easy to find bugs
Easy to maintain
Actions are carried by the state
ViewController receive a state
Cons
ViewController need to figure out the actual state
Actions can be dispatch from anywhere
No Global Picture of the flow
Hard to add new states
No Global Picture of the flow
Business Logic and Side effects are inside the state
State are responsible for going to the next state

95. @_mboudraa
What I want!

96. @_mboudraa
Kotlin to the rescue
html {
title = "Droidcon Dubai"
body()
}

97. @_mboudraa
Kotlin to the rescue
class HTML {
var title: String
fun body() {
...
}
}
html {
title = "Droidcon Dubai"
body()
}

98. @_mboudraa
Kotlin to the rescue
class HTML {
var title: String
fun body() {
...
}
}
fun html(content: HTML.() -> Unit): HTML {
val html = HTML() // create the receiver object
html.content() // pass the receiver object to the lambda
return html
}
html {
title = "Droidcon Dubai"
body()
}

99. @_mboudraa
Demo