Time Travel Debug Everything!

Time travel debugging is awesome! Remember that obscure bug that QA stumbled across but you could never reproduce? What if you could record and replay events in the app, to see step-by-step how the data changes and why certain actions are executed?

At Badoo, not only do we have a working time travel debugger for our MVI architecture, but we went one step further: our debugger allows you to record and replay interactions everywhere across your reactive subscriptions.

---

The key points were demonstrated on animated slides and a video recording of a demo app, which do not play here. You can check out the video of the presentation:
https://skillsmatter.com/skillscasts/13046-lightning-talk-time-travel-debug-everything

Library & demo app:
https://github.com/badoo/MVICore

Transcript

1. Time Travel Debug Everything! From state machines to reactive subscriptions
2. Zsolt Kocsi Android engineer @ Badoo @ZsoltKocsi
3. Additional reading at the end of presentation
4. What is time travel debugging?
5. What is time travel debugging? 1 2 3 4 You can record and replay execution Not a video recording! Executing the same actions with the same data again Interactive – you can look under the hood
6. Time Travel Debugging = Reducer
7. Architectural overview Time travel debugger @ Badoo
8. Key elements https://github.com/badoo/MVICore
9. Unidirectional Reactive MVI
10. Architectural overview Unidirectional Reactive MVI
11. View State Store Architectural overview Unidirectional Reactive MVI
12. E →I S→VM State
 Store Analytics View Architectural overview Unidirectional Reactive MVI
13. E →I S→VM State
 Store Analytics View Architectural overview Unidirectional Reactive MVI
14. Architectural overview Unidirectional Reactive MVI E →I S→VM State
 Store Analytics View
15. val output: ObservableSource<String> = Observable.just( "item1", "item2", "item3" )£ val input: Consumer<String> = Consumer { System.out.println(it) }£ val disposable = Observable .wrap(output) .subscribe(input) E →I S→VM State
 Store AT View
16. val output: ObservableSource<String> = Observable.just( "item1", "item2", "item3" )£ val input: Consumer<String> = Consumer { System.out.println(it) }£ val binder = Binder() binder.bind(output to input) E →I S→VM State
 Store AT View
17. val output: ObservableSource<String> = Observable.just( "item1", "item2", "item3" )£ val input: Consumer<> = Consumer { System.out.println(it) }£ val binder = Binder() binder.bind(output to input) E →I S→VM State
 Store AT View
18. val output: ObservableSource<String> = Observable.just( "item1", "item2", "item3" )£ val input: Consumer<Int> = Consumer { System.out.println(it) }£ val binder = Binder() binder.bind(output to input) E →I S→VM State
 Store AT View
19. val output: ObservableSource<String> = Observable.just( "item1", "item2", "item3" )££ val input: Consumer<Int> = Consumer { System.out.println(it) }£ val transformer : (String) -> Int = { it.length }£ val binder = Binder() binder.bind(output to input) E →I S→VM State
 Store AT View
20. val output: ObservableSource<String> = Observable.just( "item1", "item2", "item3" )£ val input: Consumer<Int> = Consumer { System.out.println(it) }£ val transformer : (String) -> Int = { it.length }£ val binder = Binder() binder.bind(output to input using transformer) E →I S→VM State
 Store AT View
21. binder.bind(view to analyticsTracker) binder.bind(view to store using EventToIntent) binder.bind(store to view using StateToViewModel) // Binder acts as: // // CompositeDisposable // + syntactical sugar // + lifecycle aware // + not tied to Android! E →I S→VM State
 Store AT View
22. Architectural overview Unidirectional Reactive MVI E →I S→VM State
 Store Analytics View
23. Architectural overview Unidirectional Reactive MVI E →I S→VM State
 Store Analytics View
24. Architectural overview Unidirectional Reactive MVI E →I S→VM Analytics View Feature
25. Reducer Feature Architectural overview Unidirectional Reactive MVI Consumer<Wish> ObservableSource<State>
26. Architectural overview Unidirectional Reactive MVI Reducer Feature
27. data class State( val counter: Int = 0, val someText: String = "" )£ sealed class Wish { object IncreaseCounter : Wish() data class SetText(val text: String) : Wish() }• class ReducerImpl : Reducer<State, Wish> { }¢ R Fe
28. data class State( val counter: Int = 0, val someText: String = "" )£ sealed class Wish { object IncreaseCounter : Wish() data class SetText(val text: String) : Wish() }• class ReducerImpl : Reducer<State, Wish> { override fun invoke(state: State, wish: Wish): State = }¢ R Fe
29. data class State( val counter: Int = 0, val someText: String = "" )£ sealed class Wish { object IncreaseCounter : Wish() data class SetText(val text: String) : Wish() }• class ReducerImpl : Reducer<State, Wish> { override fun invoke(state: State, wish: Wish): State = when (wish) { }™ }¢ R Fe
30. data class State( val counter: Int = 0, val someText: String = "" )£ sealed class Wish { object IncreaseCounter : Wish() data class SetText(val text: String) : Wish() }• class ReducerImpl : Reducer<State, Wish> { override fun invoke(state: State, wish: Wish): State = when (wish) { IncreaseCounter -> state.copy( counter = state.counter + 1 )§ }™ }¢ R Fe
31. data class State( val counter: Int = 0, val someText: String = "" )£ sealed class Wish { object IncreaseCounter : Wish() data class SetText(val text: String) : Wish() }• class ReducerImpl : Reducer<State, Wish> { override fun invoke(state: State, wish: Wish): State = when (wish) { IncreaseCounter -> state.copy( counter = state.counter + 1 )§ is SetText -> state.copy( someText = wish.text )¡ }™ }¢ R Fe
32. R Fe class SimpleFeature : ReducerFeature<Wish, State, Nothing>( initialState = State(), reducer = ReducerImpl() ) { data class State( val counter: Int = 0, val someText: String = "" )£ sealed class Wish { object IncreaseCounter : Wish() data class SetText(val text: String) : Wish() }• class ReducerImpl : Reducer<State, Wish> { override fun invoke(state: State, wish: Wish): State = when (wish) { IncreaseCounter -> state.copy( counter = state.counter + 1 )§ is SetText -> state.copy( someText = wish.text )¡ }™ }¢ }
33. Architectural overview Unidirectional Reactive MVI Reducer Feature
34. Reducer Feature Architectural overview Unidirectional Reactive MVI
35. Reducer Feature Architectural overview Unidirectional Reactive MVI
36. Back to the… point
37. Reducer Feature Time travel debugger applicable to Feature components
38. Time travel debugger applicable to Reactive bindings E →I S→VM State
 Store Analytics View
39. Demo time!
40. Demo
41. Demo
42. Demo
43. Demo
44. Demo
45. Demo
46. Demo
47. Demo
48. Demo
49. Demo
50. Demo
51. Demo
52. Demo
53. Demo
54. Demo View News
 Listener Analytics Feature
 2 Feature
 1
55. binder.bind(view to feature1 using EventToWish1) binder.bind(view to feature2 using EventToWish2) binder.bind(view to analyticsTracker) binder.bind(feature2.news to newsListener) val combinedState = combineLatest(feature1, feature2) binder.bind(combinedState to view using StateToViewModel) View NL AT F2 F1
56. View NL AT F2 F1
57. Demo E→W2 E→W1 (S1,S2) →VM View News
 Listener Analytics Feature 2 Feature
 1
58. Demo E→W2 E→W1 (S1,S2) →VM View News
 Listener Analytics Feature 2 Feature
 1
59. Demo E→W2 E→W1 (S1,S2) →VM View News
 Listener Analytics Feature 2 Feature
 1
60. Demo E→W2 E→W1 (S1,S2) →VM View News
 Listener Analytics Feature 2 Feature
 1
61. Demo E→W2 E→W1 (S1,S2) →VM View News
 Listener Analytics Feature 2 Feature
 1
62. Additional resources Article about Features https://badootech.badoo.com/a-modern-kotlin-based-mvi- architecture-9924e08efab1 Article about Binder https://badootech.badoo.com/building-a-system-of-reactive- components-with-kotlin-ff56981e92cf GitHub project https://github.com/badoo/MVICore Londroid meetup December ‘18
63. github.com/zsoltk @ZsoltKocsi medium.com/@zsolt.kocsi linkedin.com/in/zsolt-kocsi #MVICore Thank you!