Mounir Boudraa - Rise of state machines

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. @_mboudraa
9. View View Controller Action @_mboudraa Store Reducer f(AppState, Action) -> AppState Redux / MVI
10. @_mboudraa Store Reducer f(AppState, Action) -> AppState Redux / MVI 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 } What’s a Pure function?
12. @_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?
13. View View Controller Action Store Reducer f(AppState, Action) -> AppState @_mboudraa
14. Store View View Controller Action Reducer 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 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 @_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 @_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 EditText Changed ValidateFieldsAction f(AppState, Action) -> AppState New State View State @_mboudraa
25. Store View View Controller Action Reducer 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 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 @_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 @_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 @_mboudraa
36. Store View View Controller Action Reducer Click on Sign In SignInAction f(AppState, Action) -> AppState New State View State Side Effect @_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 @_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 View View Controller Action Reducer Click on Sign In SignInAction f(AppState, Action) -> AppState New State View State Side Effect SignInAction SuccessfullySignedInAction @_mboudraa
42. Store @_mboudraa View View Controller Action Reducer Click on Sign In SignInAction f(AppState, Action) -> AppState New State View State Side Effect SignInAction SignInFailedAction
43. Store View View Controller Action Reducer Click on Sign In SignInAction f(AppState, Action) -> AppState New State View State Side Effect SignInAction SignInFailedAction @_mboudraa
44. @_mboudraa
45. View View Controller Action @_mboudraa Store Reducer f(AppState, Action) -> AppState Redux / MVI
46. View View Controller Action @_mboudraa Store Reducer
 State f(AppState, Action) -> AppState State Machine State( Action) -> NextState State Machine
47. View View Controller Action @_mboudraa State Machine State( Action) -> NextState State Machine State
48. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState
49. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState
50. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed
51. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed
52. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed
53. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction
54. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction
55. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction ValidState
56. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction ValidState
57. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction ValidState View State
58. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction ValidState View State
59. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState EditText Changed ValidateFieldsAction View State ValidState
60. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState
61. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState Click on Sign In
62. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState Click on Sign In
63. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState Click on Sign In
64. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState Click on Sign In SignInAction
65. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState Click on Sign In SignInAction
66. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState LoadingState Click on Sign In SignInAction
67. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState LoadingState Click on Sign In SignInAction
68. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState LoadingState View State Click on Sign In SignInAction
69. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState LoadingState View State Click on Sign In SignInAction
70. View View Controller Action @_mboudraa State Machine State State( Action) -> NextState View State Click on Sign In SignInAction LoadingState
71. View View Controller Action @_mboudraa State Machine View State Click on Sign In SignInAction LoadingState State State( Action) -> NextState
72. View View Controller Action @_mboudraa State Machine View State Click on Sign In SignInAction State AuthenticatedState State( Action) -> NextState
73. View View Controller Action @_mboudraa State Machine State( Action) -> NextState View State Click on Sign In SignInAction State AuthenticatedState
74. @_mboudraa Implementation class DefaultState(private val stateMachine: StateMachine) { fun onAction(action: Action) = if (action is Action.CheckFields) if (!action.username.isBlank()) stateMachine.nextState(ValidState()) }
75. @_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()) }
76. @_mboudraa Implementation class 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)) } } }
77. @_mboudraa
78. @_mboudraa Sum Up
79. @_mboudraa Sum Up
80. @_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
81. @_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
82. @_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 dispatched 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
83. @_mboudraa What I want!
84. @_mboudraa Kotlin to the rescue html { title = "Droidcon Berlin" body { ... } }
85. @_mboudraa Kotlin to the rescue class HTML { var title: String inline fun body(f: ()-> Body) { ... } } html { title = "Droidcon Berlin" body { ... } }
86. @_mboudraa Kotlin to the rescue class HTML { var title: String inline fun body(f: ()-> Body) { ... } } inline 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 Berlin" body { ... } }
87. @_mboudraa Let’s code
88. The Rise Of The State Machines an introduction to predictable state container based architectures for your android apps @_mboudraa