ReRxSwift or: how I learned to stop worrying and love the state

Transcript

1. ReRxSwift or: how I learned to stop worrying and love the bomb state
3. MVC
4. model view view controller
5. model view view controller some data
6. model view view controller some data some fancy UI
7. model view view controller some data some fancy UI
8. model view view controller some data some fancy UI everything else
9. demo app
11. tab bar controller
12. tab bar controller navigation controller
13. tab bar controller navigation controller view controller
14. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller
15. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller
16. tab bar controller view controller change data navigation controller view controller view controller navigation controller view controller view controller
17. tab bar controller view controller change data navigation controller view controller view controller navigation controller view controller view controller
18. tab bar controller view controller change data navigation controller view controller view controller navigation controller view controller view controller change data
19. tab bar controller view controller change data navigation controller view controller view controller navigation controller view controller view controller change data
20. state lives everywhere
21. multiple sources of truth
22. no straight forward sync mechanism
24. MVVM
25. …the savior?
27. model view view controller some data some fancy UI everything else
28. view controller model view
29. view controller model view some data some fancy UI view logic
30. view controller view model model view some data some fancy UI view logic
31. view controller view model model view some data some fancy UI view logic
32. view controller view model model view some data some fancy UI everything else view logic
33. view model did not solve any problems at all
34. we even introduced one more “source of truth”
35. …the savior?
36. NOPE
38. and now for something completely different
39. ReSwift (inspired by Redux*) *inspired by Flux and Elm
40. action store w/ state reducers view* *view = view + view controller
41. action store w/ state reducers view* some data *view = view + view controller
42. action store w/ state reducers view* some data fancy UI stuff *view = view + view controller
43. action store w/ state reducers view* some data fancy UI stuff *view = view + view controller subscribe
44. action store w/ state reducers view* some data fancy UI stuff *view = view + view controller subscribe dispatch
45. action store w/ state reducers view* some data fancy UI stuff *view = view + view controller subscribe dispatch
46. action store w/ state reducers view* some data business logic fancy UI stuff *view = view + view controller subscribe dispatch change
47. action store w/ state reducers view* subscribe dispatch change *view = view + view controller
49. // define the store let store = Store<State>(reducer: reducer, state: nil)
50. // define the store let store = Store<State>(reducer: reducer, state: nil) // define a state (important: value type) struct State: StateType { var data: String = "someData" }
51. action store w/ state reducers view* subscribe dispatch change *view = view + view controller
53. // define an action struct ChangeData: Action { let changedData: String }
54. // define an action struct ChangeData: Action { let changedData: String } // create and dispatch an action let action = ChangeData(changedData: "changedData") store.dispatch(action)
55. action store w/ state reducers view* subscribe dispatch change *view = view + view controller
56. *switch is non-exhausting for simplicity
57. // reducer: action + state = new state func reducer(action: Action, state: State?) -> State { } *switch is non-exhausting for simplicity
58. // reducer: action + state = new state func reducer(action: Action, state: State?) -> State { } *switch is non-exhausting for simplicity // create a new state if state is nil var state = state ?? State()
59. // reducer: action + state = new state func reducer(action: Action, state: State?) -> State { } *switch is non-exhausting for simplicity // create a new state if state is nil var state = state ?? State() // switch through desired actions switch action { case let action as ChangeData: }
60. // reducer: action + state = new state func reducer(action: Action, state: State?) -> State { } *switch is non-exhausting for simplicity // create a new state if state is nil var state = state ?? State() // switch through desired actions switch action { case let action as ChangeData: } // perform state change state.data = action.changedData
61. // reducer: action + state = new state func reducer(action: Action, state: State?) -> State { } *switch is non-exhausting for simplicity // create a new state if state is nil var state = state ?? State() // switch through desired actions switch action { case let action as ChangeData: } // perform state change state.data = action.changedData // return the new state return state
62. action store w/ state reducers view* subscribe dispatch change *view = view + view controller
64. class ReSwiftViewController: UIViewController, StoreSubscriber { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! }
65. class ReSwiftViewController: UIViewController, StoreSubscriber { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! } // subscribe to store, e.g. in `viewWillAppear` func setup() { store.subscribe(self) }
66. class ReSwiftViewController: UIViewController, StoreSubscriber { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! } // subscribe to store, e.g. in `viewWillAppear` func setup() { store.subscribe(self) } // receive state updates from store func newState(state: State) { self.label.text = state.data }
67. class ReSwiftViewController: UIViewController, StoreSubscriber { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! } // subscribe to store, e.g. in `viewWillAppear` func setup() { store.subscribe(self) } // receive state updates from store func newState(state: State) { self.label.text = state.data } // dispatch an action to store @IBAction func buttonTap(_ sender: Any) { let action = ChangeData(changedData: "changedData") store.dispatch(action) }
68. demo app
69. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller store w/ state
70. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller store w/ state
71. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller store w/ state change data
72. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller store w/ state change data
73. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller store w/ state change data change data
74. tab bar controller view controller navigation controller view controller view controller navigation controller view controller view controller store w/ state change data change data
75. real separation of state and view
76. one source of truth
77. unidirectional data flow
79. RxSwift (ReactiveX)
80. “the observer pattern done right”
82. time
83. event time
84. event error time
85. event error completion time
86. *disposing is left out for simplicity
87. // define data as a subject ("stream") let data = PublishSubject<String>() *disposing is left out for simplicity
88. // define data as a subject ("stream") let data = PublishSubject<String>() // subscribe to data subject* data.asObservable() .subscribe(onNext: { element in label.rx.text = element }) *disposing is left out for simplicity
89. // define data as a subject ("stream") let data = PublishSubject<String>() // subscribe to data subject* data.asObservable() .subscribe(onNext: { element in label.rx.text = element }) // or just bind data subject to label* data.bind(to: label.rx.text) *disposing is left out for simplicity
90. // define data as a subject ("stream") let data = PublishSubject<String>() // subscribe to data subject* data.asObservable() .subscribe(onNext: { element in label.rx.text = element }) // or just bind data subject to label* data.bind(to: label.rx.text) *disposing is left out for simplicity // trigger an update data.onNext("changedData")
91. very easy to “connect the dots”
92. just subscribe/bind
94. some math…
96. some math… very basic
97. ReSwift + RxSwift = ?
100. ReRxSwift (inspired by react-redux)
101. actions store w/ states reducers view* *view = view + view controller
102. actions store w/ states reducers view* *view = view + view controller actions props
103. View ReRxSwift “Connection” ReSwift actions store w/ states reducers view* *view = view + view controller actions props
104. View ReRxSwift “Connection” ReSwift actions store w/ states reducers view* actions props *view = view + view controller
106. // define props extension ReRxSwiftViewController: Connectable { }
107. // define props extension ReRxSwiftViewController: Connectable { } struct Props { let data: String }
108. // define props extension ReRxSwiftViewController: Connectable { } struct Props { let data: String } // state to props mapping private let mapStateToProps = { (state: State) in }
109. // define props extension ReRxSwiftViewController: Connectable { } struct Props { let data: String } // state to props mapping private let mapStateToProps = { (state: State) in } return ReRxSwiftViewController.Props( data: state.data )
110. View ReRxSwift “Connection” ReSwift actions store w/ states reducers view* actions props *view = view + view controller
112. // define actions extension ReRxSwiftViewController: Connectable { }
113. // define actions extension ReRxSwiftViewController: Connectable { } struct Actions { let changeData: (String) -> Void }
114. // define actions extension ReRxSwiftViewController: Connectable { } struct Actions { let changeData: (String) -> Void } // dispatch to actions mapping private let mapDispatchToActions = { (dispatch: @escaping DispatchFunction) in }
115. // define actions extension ReRxSwiftViewController: Connectable { } struct Actions { let changeData: (String) -> Void } // dispatch to actions mapping private let mapDispatchToActions = { (dispatch: @escaping DispatchFunction) in } return ReRxSwiftViewController.Actions( changeData: { dispatch(ChangeData(changedData: $0)) } )
116. View ReRxSwift “Connection” ReSwift actions store w/ states reducers view* actions props *view = view + view controller
118. class ReRxSwiftViewController: UIViewController { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! }
119. class ReRxSwiftViewController: UIViewController { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! } // set up connection with store and mappings let connection = Connection(store: store, mapStateToProps: mapStateToProps, mapDispatchToActions: mapDispatchToActions)
120. class ReRxSwiftViewController: UIViewController { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! } // set up connection with store and mappings let connection = Connection(store: store, mapStateToProps: mapStateToProps, mapDispatchToActions: mapDispatchToActions) // establish connection and bind to a label func setup() { self.connection.connect() self.connection.bind(\Props.data, to: self.label.rx.text) }
121. class ReRxSwiftViewController: UIViewController { @IBOutlet weak var button: UIButton! @IBOutlet weak var label: UILabel! } // set up connection with store and mappings let connection = Connection(store: store, mapStateToProps: mapStateToProps, mapDispatchToActions: mapDispatchToActions) // establish connection and bind to a label func setup() { self.connection.connect() self.connection.bind(\Props.data, to: self.label.rx.text) } // dispatch an action
 @IBAction func buttonTap(_ sender: Any) { self.connection.actions.changeData("changedData") }
122. even better separation of concerns
123. easy to understand
124. easy to re-use and unit-test
126. at a glance
127. fail safe state handling
128. unidirectional data flow
129. UI bindings
130. credits & sources
131. ReSwift github.com/ReSwift/ReSwift Thinking in Redux
 hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133 Unidirectional Data Flow: Shrinking Massive View Controllers
 academy.realm.io/posts/benji-encz-unidirectional-data-flow-swift MVVM is lipstick on a pig
 sharpfivesoftware.com/2016/07/20/mvvm-is-lipstick-on-a-pig Architecture Wars: A New Hope
 swifting.io/blog/2016/09/07/architecture-wars-a-new-hope Model View Whatever
 khanlou.com/2014/03/model-view-whatever
132. The introduction to Reactive Programming you've been missing
 gist.github.com/staltz/868e7e9bc2a7b8c1f754 Interactive diagrams of Rx Observables
 rxmarbles.com RxSwift github.com/ReactiveX/RxSwift
133. ReRxSwift github.com/svdo/ReRxSwift
134. The life of a software engineer
 themetapicture.com/the-life-of-a-software-engineer LOLCODE
 en.wikipedia.org/wiki/LOLCODE Misc
135. questions?
136. KTHXBYE