AbemaTV Developer Conference 2016

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?
https://facebook.github.io/flux/docs/overview.html
“Data in a Flux application flows in a single
direction”

5. What is Flux?
https://github.com/facebook/flux

6. What is Flux?
https://github.com/facebook/flux

7. What is Flux?
https://github.com/facebook/flux
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. Why Flux?
Fluxが向いてそう…?

15. Flux with RxSwift

16. Flux with RxSwift

17. Flux with RxSwift
Event Streamで繋いじゃおうぜ

18. Flux with RxSwift

19. Flux with RxSwift
Eventは２種類のHot
Observableを使う

20. Flux with RxSwift
PublishSubject
一切キャッシュしないSubject

21. Flux with RxSwift
Variable
直近の値を１つだけキャッシュするSubject
※BehaviorSubjectのwrapper

22. Dispatcher

23. Dispatcher

24. Dispatcher
Dispatcherのフロー

25. Dispatcher
Actionがdispatchする

26. Dispatcher
dispatchされたらStoreへ通知

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
ObservableType, ObserverType
fileprivate let subject = PublishSubject<E>()
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
func dispatch(_ value: E) {
on(.next(value))
}
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
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

35. Action
Actionのフロー

36. Action
ViewからActionを実行

37. Action
必要なデータを取得する

38. Action
UI, Web, DB, Devicesを外部IFとして捉える
https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html

39. Action
データの取得後Dispatcherへ流す

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
dispatcher.loading.dispatch(true)
API.getSome(with: query)
ローディングしてAPI実行

42. Action
.do(onError: { [unowned self] error in
self.dispatcher.error.dispatch(error)
self.dispatcher.loading.dispatch(false)
})
エラーの時

43. Action
.subscribe(onNext: { [unowned self] response in
let someModel = SomeModel.make(from: response)
self.dispatcher.someModel.dispatch(someModel)
})
レスポンスが返ってきた時

44. Action
.do(onCompleted: { [unowned self] error in
self.dispatcher.loading.dispatch(false)
})
実行が完了した時

45. Store

46. Store

47. Store
Storeのフロー

48. Store
DispatcherのeventをObserveする

49. Store
Dispatcherのイベントが流れてくる

50. Store
Dispatcherのイベントを検知したらデータを更新

51. Store
データを更新したらViewへ通知

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
func bind<O, E>(_ observable: O, _ param: Variable<E>) where O: ObservableType, E == O.E
{
observable.bindTo(param).addDisposableTo(disposeBag)
}
Variable用のbind

54. Flux: Store
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
static let shared = SomeStore()
StoreクラスはSingleton

57. Flux: Store
let loading = Variable<Bool>(false)
let error = PublishSubject<Error>()
let someModel = Variable<SomeModel>(SomeModel())
StoreのpropertyはVariableとPublishSubject

58. Flux: Store
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

61. View
Viewのフロー

62. View
StoreとUIのeventをObserveする

63. View
Storeのイベントが流れてくる

64. View
Storeのイベントを検知したらViewを更新

65. View
UIのeventをトリガーに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
})
.addDisposableTo(rx_disposeBag)
Storeのloadingをobserve

68. View
self.loadingView.hidden(!loading)
loadingViewの表示/非表示

69. View
store.error
.subscribe(onNext: { error in
})
.addDisposableTo(rx_disposeBag)
Storeのerrorをobserve

70. View
ErrorAction.show(.apiError(error))
ErrorActionを実行

71. View
store.someModel.asObservable()
.map { $0.dataSource }
.observeOn(MainScheduler.instance)
.subscribe(onNext: { [unowned self] dataSource in
})
.addDisposableTo(rx_disposeBag)
StoreのsomeModelをobserve

72. View
self.dataSource.value = dataSource
self.tableView?.reloadData()
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
})
.addDisposableTo(rx_disposeBag)
searchBarのtext入力をobserve

75. View
SomeAction.someAction(query: query)
})
入力された文字に変更がある毎にActionを実行

76. Flux with RxSwift

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