Flux_with_RxSwift.pdf

Transcript

1. Flux with RxSwift AbemaTV Developer Conference 2016 Yuji Hato
2. About me Yuji Hato CyberAgent, Inc. / AbemaTV, Inc. dekatotoro @dekatotoro Contributed services
3. What is Flux?
4. What is Flux? IUUQTGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM “Data in a Flux application flows in a single direction”
5. What is Flux? IUUQTHJUIVCDPNGBDFCPPLqVY
6. What is Flux? IUUQTHJUIVCDPNGBDFCPPLqVY
7. What is Flux? IUUQTHJUIVCDPNGBDFCPPLqVY Observer ύλʔϯ !
8. Why Flux?
9. Why Flux? ࡢࠓͷΞϓϦ։ൃ͸ෳࡶԽ ͷҰ్Λḷ͓ͬͯΓঢ়ଶ؅ཧ ͕େม
10. Why Flux? AbemaTVͷঢ়ଶ؅ཧ: Cast ΦϯσϚϯυ ՝ۚ CM Filler ը࣭ ࢹௌ༧໿ etc… ൪૊ Fresh ίϝϯτ ࢹௌ਺ FullScreen Feed
11. Why Flux? ͭΒ͍…
12. Why Flux? UIૢ࡞ɾ࣌ؒʹ൐͏ෳࡶͳ ঢ়ଶભҠΛ෼͔Γ΍͍ͨ͘͢͠
13. Why Flux? Viewؒͷґଘؔ܎ΛݮΒ͍ͨ͠
14. MVVM MVC DDD Flux Clean Architecture MVP Why Flux? Flux͕޲͍ͯͦ͏…?
15. Flux with RxSwift
16. Flux with RxSwift Action Dispatcher User Interactions API DB ViewController View Store Events Events
17. Flux with RxSwift Event StreamͰܨ͍͡Ό͓͏ͥ
18. Flux with RxSwift Action Dispatcher User Interactions API DB ViewController View Store Events Events
19. Flux with RxSwift Dispatcher ViewController View Store Events Events Events Event͸̎छྨͷHot ObservableΛ࢖͏
20. Flux with RxSwift PublishSubject Ұ੾Ωϟογϡ͠ͳ͍Subject Events
21. Flux with RxSwift Variable ௚ۙͷ஋Λ͚̍ͭͩΩϟογϡ͢ΔSubject ※BehaviorSubjectͷwrapper Events
22. Dispatcher
23. Dispatcher Action Dispatcher User Interactions API DB ViewController View Store Events Events
24. Dispatcher Dispatcherͷϑϩʔ Dispatcher Store Events Events Action Dispatcher Store Store Events Events Action Action
25. Dispatcher Action͕dispatch͢Δ Dispatcher Store Store Events Events Action Action on subscribe
26. Dispatcher dispatch͞ΕͨΒStore΁௨஌ Dispatcher Store Store Events Events Action Action on subscribe
27. Dispatcher class DispatchSubject<Element>: ObservableType, ObserverType { typealias E = Element fileprivate let subject = PublishSubject<E>() func dispatch(_ value: E) { on(.next(value)) } func on(_ event: Event<E>) { subject.on(event) } func subscribe<O: ObserverType>(_ observer: O) -> Disposable where O.E == E { return subject.subscribe(observer) } } Dispatcher༻ͷDispatchSubject
28. Dispatcher class DispatchSubject<Element>: ObservableType, ObserverType { typealias E = Element fileprivate let subject = PublishSubject<E>() func dispatch(_ value: E) { on(.next(value)) } func on(_ event: Event<E>) { subject.on(event) } func subscribe<O: ObserverType>(_ observer: O) -> Disposable where O.E == E { return subject.subscribe(observer) } } PublishSubjectͷWrapper
29. Dispatcher class DispatchSubject<Element>: ObservableType, ObserverType { typealias E = Element fileprivate let subject = PublishSubject<E>() func dispatch(_ value: E) { on(.next(value)) } func on(_ event: Event<E>) { subject.on(event) } func subscribe<O: ObserverType>(_ observer: O) -> Disposable where O.E == E { return subject.subscribe(observer) } } dispatch͢ΔͱeventΛൃߦ͠·͢
30. Dispatcher class SomeDispatcher { static let shared = SomeDispatcher() let loading = DispatchSubject<Bool>() let error = DispatchSubject<Error>() let someModel = DispatchSubject<SomeModel>() … } DispatcherΫϥε
31. Dispatcher class SomeDispatcher { static let shared = SomeDispatcher() let loading = DispatchSubject<Bool>() let error = DispatchSubject<Error>() let someModel = DispatchSubject<SomeModel>() … } ActionTypeͷ୅ΘΓʹDispatchSubjectΛෳ਺༻ҙ ※DispatcherΫϥε΋༻్͝ͱʹ෼͚ͯ·͢
32. Dispatcher func someAction(value: Bool) { … dispatcher.loading.dispatch(value) … } Action͕dispatch
33. Action
34. Action Action Dispatcher User Interactions API DB ViewController View Store Events Events
35. Action Actionͷϑϩʔ Action Action Dispatcher User Interactions API DB ViewController View Action Action Dispatcher API DB ViewController View Device User Interactions
36. Action View͔ΒActionΛ࣮ߦ Action Action Dispatcher User Interactions API DB ViewController View Action Action Dispatcher API DB ViewController View Device User Interactions Action Action Dispatcher User Interactions API DB ViewController View Action Action Action Dispatcher API DB ViewController View Device User Interactions
37. Action ඞཁͳσʔλΛऔಘ͢Δ Action Action Dispatcher User Interactions API DB ViewController View Action Action Action Dispatcher API DB ViewController View Device User Interactions
38. Action UI, Web, DB, DevicesΛ֎෦IFͱͯ͠ଊ͑Δ IUUQTUIMJHIUDPNCMPHVODMFCPCUIFDMFBOBSDIJUFDUVSFIUNM
39. Action σʔλͷऔಘޙDispatcher΁ྲྀ͢ Action Action Dispatcher User Interactions API DB ViewController View Action Action Action Dispatcher API DB ViewController View Device User Interactions
40. Action func someAction(query: String) { dispatcher.loading.dispatch(true) API.getSome(with: query) .do(onError: { [unowned self] error in self.dispatcher.error.dispatch(error) self.dispatcher.loading.dispatch(false) }) .do(onCompleted: { [unowned self] error in self.dispatcher.loading.dispatch(false) }) .subscribe(onNext: { [unowned self] response in let someModel = SomeModel.make(from: response) self.dispatcher.someModel.dispatch(someModel) }) .addDisposableTo(disposeBag) } APIΛ࣮ߦ͢Δྫ
41. Action func someAction(query: String) { dispatcher.loading.dispatch(true) API.getSome(with: query) .do(onError: { [unowned self] error in self.dispatcher.error.dispatch(error) self.dispatcher.loading.dispatch(false) }) .do(onCompleted: { [unowned self] error in self.dispatcher.loading.dispatch(false) }) .subscribe(onNext: { [unowned self] response in let someModel = SomeModel.make(from: response) self.dispatcher.someModel.dispatch(someModel) }) .addDisposableTo(disposeBag) } ϩʔσΟϯάͯ͠API࣮ߦ
42. Action func someAction(query: String) { dispatcher.loading.dispatch(true) API.getSome(with: query) .do(onError: { [unowned self] error in self.dispatcher.error.dispatch(error) self.dispatcher.loading.dispatch(false) }) .do(onCompleted: { [unowned self] error in self.dispatcher.loading.dispatch(false) }) .subscribe(onNext: { [unowned self] response in let someModel = SomeModel.make(from: response) self.dispatcher.someModel.dispatch(someModel) }) .addDisposableTo(disposeBag) } Τϥʔͷ࣌
43. Action func someAction(query: String) { dispatcher.loading.dispatch(true) API.getSome(with: query) .do(onError: { [unowned self] error in self.dispatcher.error.dispatch(error) self.dispatcher.loading.dispatch(false) }) .do(onCompleted: { [unowned self] error in self.dispatcher.loading.dispatch(false) }) .subscribe(onNext: { [unowned self] response in let someModel = SomeModel.make(from: response) self.dispatcher.someModel.dispatch(someModel) }) .addDisposableTo(disposeBag) } Ϩεϙϯε͕ฦ͖ͬͯͨ࣌
44. Action func someAction(query: String) { dispatcher.loading.dispatch(true) API.getSome(with: query) .do(onError: { [unowned self] error in self.dispatcher.error.dispatch(error) self.dispatcher.loading.dispatch(false) }) .do(onCompleted: { [unowned self] error in self.dispatcher.loading.dispatch(false) }) .subscribe(onNext: { [unowned self] response in let someModel = SomeModel.make(from: response) self.dispatcher.someModel.dispatch(someModel) }) .addDisposableTo(disposeBag) } ࣮ߦ͕׬ྃͨ࣌͠
45. Store
46. Store Action Dispatcher User Interactions API DB ViewController View Store Events Events
47. Store Storeͷϑϩʔ Dispatcher Store Store ViewController View Events Events Events
48. Store DispatcherͷeventΛObserve͢Δ Dispatcher Store Store ViewController View Events Events Events subscribe on on subscribe
49. Store DispatcherͷΠϕϯτ͕ྲྀΕͯ͘Δ Store Store ViewController View Events Events Events subscribe on on subscribe Dispatcher
50. Store DispatcherͷΠϕϯτΛݕ஌ͨ͠ΒσʔλΛߋ৽ Store Store ViewController View Events Events Events subscribe on on subscribe Dispatcher
51. Store σʔλΛߋ৽ͨ͠ΒView΁௨஌ Store Store ViewController View Events Events Events subscribe subscribe Dispatcher on on
52. Flux: Store class Store { let disposeBag = DisposeBag() func bind<O, E>(_ observable: O, _ param: Variable<E>) where O: ObservableType, E == O.E { observable.bindTo(param).addDisposableTo(disposeBag) } func bind<O, E>(_ observable: O, _ param: PublishSubject<E>) where O: ObservableType, E == O.E { observable.bindTo(param).addDisposableTo(disposeBag) } } Store਌Ϋϥε
53. Flux: Store class Store { let disposeBag = DisposeBag() func bind<O, E>(_ observable: O, _ param: Variable<E>) where O: ObservableType, E == O.E { observable.bindTo(param).addDisposableTo(disposeBag) } func bind<O, E>(_ observable: O, _ param: PublishSubject<E>) where O: ObservableType, E == O.E { observable.bindTo(param).addDisposableTo(disposeBag) } } Variable༻ͷbind
54. Flux: Store class Store { let disposeBag = DisposeBag() func bind<O, E>(_ observable: O, _ param: Variable<E>) where O: ObservableType, E == O.E { observable.bindTo(param).addDisposableTo(disposeBag) } func bind<O, E>(_ observable: O, _ param: PublishSubject<E>) where O: ObservableType, E == O.E { observable.bindTo(param).addDisposableTo(disposeBag) } } PublishSubject༻ͷbind
55. Flux: Store class SomeStore: Store { static let shared = SomeStore() let loading = Variable<Bool>(false) let error = PublishSubject<Error>() let someModel = Variable<SomeModel>(SomeModel()) init(dispatcher: SomeDispatcher = .shared) { super.init() bind(dispatcher.loading, loading) bind(dispatcher.error, error) bind(dispatcher.someModel, someModel) } } StoreΫϥε
56. Flux: Store class SomeStore: Store { static let shared = SomeStore() let loading = Variable<Bool>(false) let error = PublishSubject<Error>() let someModel = Variable<SomeModel>(SomeModel()) init(dispatcher: SomeDispatcher = .shared) { super.init() bind(dispatcher.loading, loading) bind(dispatcher.error, error) bind(dispatcher.someModel, someModel) } } StoreΫϥε͸Singleton
57. Flux: Store class SomeStore: Store { static let shared = SomeStore() let loading = Variable<Bool>(false) let error = PublishSubject<Error>() let someModel = Variable<SomeModel>(SomeModel()) init(dispatcher: SomeDispatcher = .shared) { super.init() bind(dispatcher.loading, loading) bind(dispatcher.error, error) bind(dispatcher.someModel, someModel) } } Storeͷproperty͸VariableͱPublishSubject
58. Flux: Store class SomeStore: Store { static let shared = SomeStore() let loading = Variable<Bool>(false) let error = PublishSubject<Error>() let someModel = Variable<SomeModel>(SomeModel()) init(dispatcher: SomeDispatcher = .shared) { super.init() bind(dispatcher.loading, loading) bind(dispatcher.error, error) bind(dispatcher.someModel, someModel) } } initͰdispatcherͱbind
59. View
60. View Action Dispatcher User Interactions API DB ViewController View Store Events Events
61. View Viewͷϑϩʔ Dispatcher Events Store Store ViewController View Events Action Action Action User Interactions ViewController View Action
62. View StoreͱUIͷeventΛObserve͢Δ Dispatcher Events Store Store ViewController View Events subscribe Action Action User Interactions ViewController View Action
63. View StoreͷΠϕϯτ͕ྲྀΕͯ͘Δ Dispatcher Events Store Store ViewController View Events on Action Action User Interactions ViewController View Action
64. View StoreͷΠϕϯτΛݕ஌ͨ͠ΒViewΛߋ৽ Dispatcher Events Store Store ViewController View Events on Action Action User Interactions ViewController View Action
65. View UIͷeventΛτϦΨʔʹActionΛ࣮ߦ Dispatcher Events Store Store ViewController View Events Action Action User Interactions ViewController View Action
66. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) Storeͷobserve
67. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) StoreͷloadingΛobserve
68. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) loadingViewͷදࣔ/ඇදࣔ
69. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) StoreͷerrorΛobserve
70. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) ErrorActionΛ࣮ߦ
71. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) StoreͷsomeModelΛobserve
72. View store.loading.asObservable() .distinctUntilChanged() .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] loading in self.loadingView.hidden(!loading) }) .addDisposableTo(rx_disposeBag) store.error .subscribe(onNext: { error in ErrorAction.show(.apiError(error)) }) .addDisposableTo(rx_disposeBag) store.someModel.asObservable() .map { $0.dataSource } .observeOn(MainScheduler.instance) .subscribe(onNext: { [unowned self] dataSource in self.dataSource.value = dataSource self.tableView?.reloadData() }) .addDisposableTo(rx_disposeBag) tableViewΛreload
73. View searchBar.rx.text.asDriver() .throttle(0.3) .distinctUntilChanged() .drive(onNext: { query in SomeAction.someAction(query: query) }) .addDisposableTo(rx_disposeBag) UIͷeventΛobserve
74. View searchBar.rx.text.asDriver() .throttle(0.3) .distinctUntilChanged() .drive(onNext: { query in SomeAction.someAction(query: query) }) .addDisposableTo(rx_disposeBag) searchBarͷtextೖྗΛobserve
75. View searchBar.rx.text.asDriver() .throttle(0.3) .distinctUntilChanged() .drive(onNext: { query in SomeAction.someAction(query: query) }) .addDisposableTo(rx_disposeBag) ೖྗ͞Εͨจࣈʹมߋ͕͋ΔຖʹActionΛ࣮ߦ
76. Flux with RxSwift Action Dispatcher User Interactions API DB ViewController View Store Events Events
77. Ұप͠·ͨ͠ʂ Flux with RxSwift
78. Proposals
79. Proposals • Dispatcher͸Ұͭʹ͍ͨ͠ • Store͸SingletonͰͳ͘ɺద੾ͳϥΠϑαΠ Ϋϧʹ͍ͨ͠ • StoreΛread-onlyʹ͍ͨ͠
80. Conclusion
81. Conclusion Pros • ෳ਺ͷViewController, ViewΛ࢖ͬͯෳࡶͳঢ়ଶ ؅ཧΛ͢ΔΞϓϦέʔγϣϯʹ޲͍͍ͯΔ • ։ൃऀͷ࣮૷͕౷Ұ͞Ε΍͍͢ • Viewؒͷґଘؔ܎͕ݮΔ
82. Conclusion Cons • SingletonͰूத؅ཧͳͷͰɺ޷͖ݏ͍͋Δ͔΋ • ׳ΕΔ·Ͱগ͔͔͠Δ • ࣮૷͕৑௕ʹײ͡Δ…?
83. Flux͸࿮૊ΈͳͷͰɺΑΓྑ͘͢ΔͨΊʹ νʔϜͰTrial&Errorͯ͠·͢ Flux with RxSwift
84. Thank you ࢀߟࢿྉ https://facebook.github.io/flux/ https://github.com/facebook/flux https://github.com/thoughtbot/Delta https://github.com/yonekawa/SwiftFlux https://speakerdeck.com/ogaclejapan/flux-de-relax
85. https://github.com/dekatotoro/FluxWithRxSwiftSample Flux with RxSwift Sample