MVI - Reactive Architecture for Modern Applications

Presented on Swift Delhi Meetup - Chapter 13.
Date: Sept 1, 2018 at UrbanClap.

https://www.meetup.com/Swift-Delhi/events/254037961/

Slides with Audio: https://youtu.be/kYtE7i49DXA
Mvi-Example Repo: https://github.com/dinarajas/BmiCalc

Transcript

1. Reactive Architecture for Modern Applications Dinesh Raja @dinarajas MVI
2. Why MVI? • User-centric
3. Why MVI? • User-centric Taken from Andre Staltz’s talk
4. Why MVI? • User-centric • Unidirectional Taken from Andre Staltz’s talk
5. Why MVI? • User-centric • Unidirectional • Testability Taken from Andre Staltz’s talk
6. Why MVI? • User-centric • Unidirectional • Testability • Platform-Agnostic Taken from Andre Staltz’s talk
7. Why MVI? • User-centric • Unidirectional • Testability • Platform-Agnostic • Reactive Taken from Andre Staltz’s talk
8. Reactive Programming Reactive programming is programming with asynchronous data streams. - Andre Staltz
9. Reactive Programming
10. How it works?
11. Intention How it works?
12. Intention How it works?
13. Model Intention How it works?
14. Model Intention How it works?
15. Model View Intention How it works?
16. Model View Intention How it works?
18. Intentions
19. Intentions
20. Intentions 1) Height Changes
21. Intentions 1) Height Changes
22. Intentions 1) Height Changes 2) Weight Changes
23. BmiIntentions
24. class BmiIntentions { private let heightChanges: Observable<SliderPayload> private let weightChanges: Observable<SliderPayload> init( _ heightChanges: Observable<SliderPayload>, _ weightChanges: Observable<SliderPayload> ) { self.heightChanges = heightChanges self.weightChanges = weightChanges } func height() -> Observable<Int> { return heightChanges .map { payload in payload.calculatedValue() } } func weight() -> Observable<Int> { return weightChanges .map { payload in payload.calculatedValue() } } }
25. class BmiIntentions { private let heightChanges: Observable<SliderPayload> private let weightChanges: Observable<SliderPayload> init( _ heightChanges: Observable<SliderPayload>, _ weightChanges: Observable<SliderPayload> ) { self.heightChanges = heightChanges self.weightChanges = weightChanges } func height() -> Observable<Int> { return heightChanges .map { payload in payload.calculatedValue() } } func weight() -> Observable<Int> { return weightChanges .map { payload in payload.calculatedValue() } } }
26. class BmiIntentions { private let heightChanges: Observable<SliderPayload> private let weightChanges: Observable<SliderPayload> init( _ heightChanges: Observable<SliderPayload>, _ weightChanges: Observable<SliderPayload> ) { self.heightChanges = heightChanges self.weightChanges = weightChanges } func height() -> Observable<Int> { return heightChanges .map { payload in payload.calculatedValue() } } func weight() -> Observable<Int> { return weightChanges .map { payload in payload.calculatedValue() } } }
27. class BmiIntentions { private let heightChanges: Observable<SliderPayload> private let weightChanges: Observable<SliderPayload> init( _ heightChanges: Observable<SliderPayload>, _ weightChanges: Observable<SliderPayload> ) { self.heightChanges = heightChanges self.weightChanges = weightChanges } func height() -> Observable<Int> { return heightChanges .map { payload in payload.calculatedValue() } } func weight() -> Observable<Int> { return weightChanges .map { payload in payload.calculatedValue() } } }
28. class BmiIntentions { private let heightChanges: Observable<SliderPayload> private let weightChanges: Observable<SliderPayload> init( _ heightChanges: Observable<SliderPayload>, _ weightChanges: Observable<SliderPayload> ) { self.heightChanges = heightChanges self.weightChanges = weightChanges } func height() -> Observable<Int> { return heightChanges .map { payload in payload.calculatedValue() } } func weight() -> Observable<Int> { return weightChanges .map { payload in payload.calculatedValue() } } }
29. BmiModel
30. Use cases
31. Use cases 1) Height Changes
32. Use cases 1) Height Changes 2) Weight Changes
33. Use cases 1) Height Changes 2) Weight Changes 3) View Created
34. Use cases 1) Height Changes 2) Weight Changes 3) View Created 4) View Restored
35. BmiModel class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } }
36. class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } } BmiModel
37. class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } } BmiModel
38. class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } } BmiModel
39. class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } } BmiModel
40. BmiModel class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } }
41. BmiModel class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } }
42. BmiModel class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } }
43. BmiModel class BmiModel { static func bind( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState>, _ intentions: BmiIntentions ) -> Observable<BmiState> { let createdLifecycleStates = lifecycleCreatedUseCase(lifecycle) let restoredLifecycleStates = lifecycleRestoredUseCase(lifecycle, states) let heightChangeStates = heightChangesUseCase(intentions.height(), states) let weightChangeStates = weightChangesUseCase(intentions.weight(), states) return Observable.merge( createdLifecycleStates, restoredLifecycleStates, heightChangeStates, weightChangeStates ) } }
44. Created - Use Case private static func lifecycleCreatedUseCase( _ lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .created } .map { _ -> BmiState in let defaultHeight = 160 let defaultWeight = 40 let bmi = calculateBmi(height: defaultHeight, weight: defaultWeight) return BmiState.initial(height: defaultHeight, weight: defaultWeight, bmi: bmi) } }
45. Created - Use Case private static func lifecycleCreatedUseCase( _ lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .created } .map { _ -> BmiState in let defaultHeight = 160 let defaultWeight = 40 let bmi = calculateBmi(height: defaultHeight, weight: defaultWeight) return BmiState.initial(height: defaultHeight, weight: defaultWeight, bmi: bmi) } }
46. Created - Use Case private static func lifecycleCreatedUseCase( _ lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .created } .map { _ -> BmiState in let defaultHeight = 160 let defaultWeight = 40 let bmi = calculateBmi(height: defaultHeight, weight: defaultWeight) return BmiState.initial(height: defaultHeight, weight: defaultWeight, bmi: bmi) } }
47. Created - Use Case private static func lifecycleCreatedUseCase( _ lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .created } .map { _ -> BmiState in let defaultHeight = 160 let defaultWeight = 40 let bmi = calculateBmi(height: defaultHeight, weight: defaultWeight) return BmiState.initial(height: defaultHeight, weight: defaultWeight, bmi: bmi) } }
48. Created - Use Case private static func lifecycleCreatedUseCase( _ lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .created } .map { _ -> BmiState in let defaultHeight = 160 let defaultWeight = 40 let bmi = calculateBmi(height: defaultHeight, weight: defaultWeight) return BmiState.initial(height: defaultHeight, weight: defaultWeight, bmi: bmi) } }
49. Restored - Use Case private static func lifecycleRestoredUseCase( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .restored } .withLatestFrom(states) .map { (state: BmiState) in state.restored() } }
50. Restored - Use Case private static func lifecycleRestoredUseCase( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .restored } .withLatestFrom(states) .map { (state: BmiState) in state.restored() } }
51. Restored - Use Case private static func lifecycleRestoredUseCase( _ lifecycle: Observable<MviLifecycle>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return lifecycle .filter { lifecycle in lifecycle == .restored } .withLatestFrom(states) .map { (state: BmiState) in state.restored() } }
52. Height Changes - Use Case private static func heightChangesUseCase( _ heightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return heightChanges .withLatestFrom(states) { (height: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: height, weight: state.weight) return state.heightChanged(height: height, bmi: bmi) } }
53. Height Changes - Use Case private static func heightChangesUseCase( _ heightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return heightChanges .withLatestFrom(states) { (height: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: height, weight: state.weight) return state.heightChanged(height: height, bmi: bmi) } }
54. Height Changes - Use Case private static func heightChangesUseCase( _ heightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return heightChanges .withLatestFrom(states) { (height: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: height, weight: state.weight) return state.heightChanged(height: height, bmi: bmi) } }
55. Height Changes - Use Case private static func heightChangesUseCase( _ heightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return heightChanges .withLatestFrom(states) { (height: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: height, weight: state.weight) return state.heightChanged(height: height, bmi: bmi) } }
56. Weight Changes - Use Case private static func weightChangesUseCase( _ weightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return weightChanges .withLatestFrom(states) { (weight: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: state.height, weight: weight) return state.weightChanged(weight: weight, bmi: bmi) } }
57. Weight Changes - Use Case private static func weightChangesUseCase( _ weightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return weightChanges .withLatestFrom(states) { (weight: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: state.height, weight: weight) return state.weightChanged(weight: weight, bmi: bmi) } }
58. Weight Changes - Use Case private static func weightChangesUseCase( _ weightChanges: Observable<Int>, _ states: Observable<BmiState> ) -> Observable<BmiState> { return weightChanges .withLatestFrom(states) { (weight: Int, state: BmiState) -> BmiState in let bmi = calculateBmi(height: state.height, weight: weight) return state.weightChanged(weight: weight, bmi: bmi) } }
59. BmiState struct BmiState: MviState { let height: Int let weight: Int let bmi: Double }
60. BmiState State Reducer struct BmiState: MviState { let height: Int let weight: Int let bmi: Double }
61. BmiState State Reducer struct BmiState: MviState { let height: Int let weight: Int let bmi: Double } extension BmiState { static func initial(height: Int, weight: Int, bmi: Double) -> BmiState { return BmiState(height: height, weight: weight, bmi: bmi) } func heightChanged(height: Int, bmi: Double) -> BmiState { return BmiState(height: height, weight: weight, bmi: bmi) } // Restore & Weight Change method goes here.. }
62. BmiView
63. protocol BmiView { func render(state: BmiState) func showBmi(bmi: Double, height: Int, weight: Int) } extension BmiView { func render(state: BmiState) { showBmi(bmi: state.bmi, height: state.height, weight: state.weight) } } BmiView
64. BmiViewController
65. class BmiViewController: MviController<BmiState> { @IBOutlet weak var heightSlider: UISlider! @IBOutlet weak var weightSlider: UISlider! private lazy var weightChanges = weightSlider.rx .value .map { progress in SliderPayload(min: self.minWeight, max: self.maxWeight, progress: progress) } private lazy var heightChanges = heightSlider.rx .value .map { progress in SliderPayload(min: self.minHeight, max: self.maxHeight, progress: progress) } private lazy var intentions = BmiIntentions(heightChanges, weightChanges) override func bind( states: Observable<BmiState>, lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return BmiModel.bind(lifecycle, states, intentions) } override func emitted(state: BmiState) { render(state: state) } }
66. class BmiViewController: MviController<BmiState> { @IBOutlet weak var heightSlider: UISlider! @IBOutlet weak var weightSlider: UISlider! private lazy var weightChanges = weightSlider.rx .value .map { progress in SliderPayload(min: self.minWeight, max: self.maxWeight, progress: progress) } private lazy var heightChanges = heightSlider.rx .value .map { progress in SliderPayload(min: self.minHeight, max: self.maxHeight, progress: progress) } private lazy var intentions = BmiIntentions(heightChanges, weightChanges) override func bind( states: Observable<BmiState>, lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return BmiModel.bind(lifecycle, states, intentions) } override func emitted(state: BmiState) { render(state: state) } }
67. class BmiViewController: MviController<BmiState> { @IBOutlet weak var heightSlider: UISlider! @IBOutlet weak var weightSlider: UISlider! private lazy var weightChanges = weightSlider.rx .value .map { progress in SliderPayload(min: self.minWeight, max: self.maxWeight, progress: progress) } private lazy var heightChanges = heightSlider.rx .value .map { progress in SliderPayload(min: self.minHeight, max: self.maxHeight, progress: progress) } private lazy var intentions = BmiIntentions(heightChanges, weightChanges) override func bind( states: Observable<BmiState>, lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return BmiModel.bind(lifecycle, states, intentions) } override func emitted(state: BmiState) { render(state: state) } }
68. class BmiViewController: MviController<BmiState> { @IBOutlet weak var heightSlider: UISlider! @IBOutlet weak var weightSlider: UISlider! private lazy var weightChanges = weightSlider.rx .value .map { progress in SliderPayload(min: self.minWeight, max: self.maxWeight, progress: progress) } private lazy var heightChanges = heightSlider.rx .value .map { progress in SliderPayload(min: self.minHeight, max: self.maxHeight, progress: progress) } private lazy var intentions = BmiIntentions(heightChanges, weightChanges) override func bind( states: Observable<BmiState>, lifecycle: Observable<MviLifecycle> ) -> Observable<BmiState> { return BmiModel.bind(lifecycle, states, intentions) } override func emitted(state: BmiState) { render(state: state) } }
69. BmiView (Implementation) extension BmiViewController: BmiView { func showBmi(bmi: Double, height: Int, weight: Int) { let bmiString = bmiNumberFormatter .string(from: NSNumber(value: bmi)) bmiValueLabel.text = bmiString heightLabel.text = "\(height)" weightLabel.text = "\(weight)" } }
70. Freebies
71. Freebies • Collaboration between teams
72. Freebies • Collaboration between teams • Less mocking in Testing
73. Freebies • Collaboration between teams • Less mocking in Testing • Peer-to-Peer code reviews
74. Freebies • Collaboration between teams • Less mocking in Testing • Peer-to-Peer code reviews • Fault tolerant system
75. Freebies • Collaboration between teams • Less mocking in Testing • Peer-to-Peer code reviews • Fault tolerant system • Easy to debug
76. Credits André Staltz @andrestaltz Ragunath Jawahar @ragunathjawahar
77. References https://www.youtube.com/watch?v=1zj7M1LnJV4 https://speakerdeck.com/ragunathjawahar/how-to-mvi https://egghead.io/courses/cycle-js-fundamentals https://github.com/dinarajas/BmiCalc https://www.reactivemanifesto.org https://www.reactive.how
78. Questions? Dinesh Raja dinesh@kite.work @dinarajas / Twitter • Medium • Github