SlideShare a Scribd company logo
Flux with RxSwift
AbemaTV Developer Conference 2016
Yuji Hato
About me
Yuji Hato
CyberAgent, Inc. / AbemaTV, Inc.
dekatotoro
@dekatotoro
Contributed services
What is Flux?
What is Flux?
https://facebook.github.io/flux/docs/overview.html
“Data in a Flux application flows in a single
direction”
What is Flux?
https://github.com/facebook/flux
What is Flux?
https://github.com/facebook/flux
What is Flux?
https://github.com/facebook/flux
Observer パターン !
Why Flux?
Why Flux?
昨今のアプリ開発は複雑化
の一途を辿っており状態管理
が大変
Why Flux?
AbemaTVの状態管理:
Cast
オンデマンド
課金
CM
Filler
画質
視聴予約
etc…
番組 Fresh
コメント
視聴数
FullScreen
Feed
Why Flux?
つらい…
Why Flux?
UI操作・時間に伴う複雑な
状態遷移を分かりやすくしたい
Why Flux?
View間の依存関係を減らしたい
Why Flux?
Fluxが向いてそう…?
Flux with RxSwift
Flux with RxSwift
Flux with RxSwift
Event Streamで繋いじゃおうぜ
Flux with RxSwift
Flux with RxSwift
Eventは2種類のHot
Observableを使う
Flux with RxSwift
PublishSubject
一切キャッシュしないSubject
Flux with RxSwift
Variable
直近の値を1つだけキャッシュするSubject
※BehaviorSubjectのwrapper
Dispatcher
Dispatcher
Dispatcher
Dispatcherのフロー
Dispatcher
Actionがdispatchする
Dispatcher
dispatchされたらStoreへ通知
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
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
Dispatcher
func dispatch(_ value: E) {
on(.next(value))
}
dispatchするとeventを発行します
Dispatcher
class SomeDispatcher {
static let shared = SomeDispatcher()
let loading = DispatchSubject<Bool>()
let error = DispatchSubject<Error>()
let someModel = DispatchSubject<SomeModel>()
…
}
Dispatcherクラス
Dispatcher
let loading = DispatchSubject<Bool>()
let error = DispatchSubject<Error>()
let someModel = DispatchSubject<SomeModel>()
ActionTypeの代わりにDispatchSubjectを複数用意
※Dispatcherクラスも用途ごとに分けてます
Dispatcher
func someAction(value: Bool) {
…
dispatcher.loading.dispatch(value)
…
}
Actionがdispatch
Action
Action
Action
Actionのフロー
Action
ViewからActionを実行
Action
必要なデータを取得する
Action
UI, Web, DB, Devicesを外部IFとして捉える
https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html
Action
データの取得後Dispatcherへ流す
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を実行する例
Action
dispatcher.loading.dispatch(true)
API.getSome(with: query)
ローディングしてAPI実行
Action
.do(onError: { [unowned self] error in
self.dispatcher.error.dispatch(error)
self.dispatcher.loading.dispatch(false)
})
エラーの時
Action
.subscribe(onNext: { [unowned self] response in
let someModel = SomeModel.make(from: response)
self.dispatcher.someModel.dispatch(someModel)
})
レスポンスが返ってきた時
Action
.do(onCompleted: { [unowned self] error in
self.dispatcher.loading.dispatch(false)
})
実行が完了した時
Store
Store
Store
Storeのフロー
Store
DispatcherのeventをObserveする
Store
Dispatcherのイベントが流れてくる
Store
Dispatcherのイベントを検知したらデータを更新
Store
データを更新したらViewへ通知
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親クラス
Flux: Store
func bind<O, E>(_ observable: O, _ param: Variable<E>) where O: ObservableType, E == O.E
{
observable.bindTo(param).addDisposableTo(disposeBag)
}
Variable用のbind
Flux: Store
func bind<O, E>(_ observable: O, _ param: PublishSubject<E>) where O: ObservableType, E
== O.E {
observable.bindTo(param).addDisposableTo(disposeBag)
}
PublishSubject用のbind
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クラス
Flux: Store
static let shared = SomeStore()
StoreクラスはSingleton
Flux: Store
let loading = Variable<Bool>(false)
let error = PublishSubject<Error>()
let someModel = Variable<SomeModel>(SomeModel())
StoreのpropertyはVariableとPublishSubject
Flux: Store
init(dispatcher: SomeDispatcher = .shared) {
super.init()
bind(dispatcher.loading, loading)
bind(dispatcher.error, error)
bind(dispatcher.someModel, someModel)
}
initでdispatcherとbind
View
View
View
Viewのフロー
View
StoreとUIのeventをObserveする
View
Storeのイベントが流れてくる
View
Storeのイベントを検知したらViewを更新
View
UIのeventをトリガーにActionを実行
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
View
store.loading.asObservable()
.distinctUntilChanged()
.observeOn(MainScheduler.instance)
.subscribe(onNext: { [unowned self] loading in
})
.addDisposableTo(rx_disposeBag)
Storeのloadingをobserve
View
self.loadingView.hidden(!loading)
loadingViewの表示/非表示
View
store.error
.subscribe(onNext: { error in
})
.addDisposableTo(rx_disposeBag)
Storeのerrorをobserve
View
ErrorAction.show(.apiError(error))
ErrorActionを実行
View
store.someModel.asObservable()
.map { $0.dataSource }
.observeOn(MainScheduler.instance)
.subscribe(onNext: { [unowned self] dataSource in
})
.addDisposableTo(rx_disposeBag)
StoreのsomeModelをobserve
View
self.dataSource.value = dataSource
self.tableView?.reloadData()
tableViewをreload
View
searchBar.rx.text.asDriver()
.throttle(0.3)
.distinctUntilChanged()
.drive(onNext: { query in
SomeAction.someAction(query: query)
})
.addDisposableTo(rx_disposeBag)
UIのeventをobserve
View
searchBar.rx.text.asDriver()
.throttle(0.3)
.distinctUntilChanged()
.drive(onNext: { query in
})
.addDisposableTo(rx_disposeBag)
searchBarのtext入力をobserve
View
SomeAction.someAction(query: query)
})
入力された文字に変更がある毎にActionを実行
Flux with RxSwift
一周しました!
Flux with RxSwift
Proposals
Proposals
• Dispatcherは一つにしたい
• StoreはSingletonでなく、適切なライフサイク
ルにしたい
• Storeをread-onlyにしたい
Conclusion
Conclusion
Pros
• 複数のViewController, Viewを使って複雑な状態
管理をするアプリケーションに向いている
• 開発者の実装が統一されやすい
• View間の依存関係が減る
Conclusion
Cons
• Singletonで集中管理なので、好き嫌いあるかも
• 慣れるまで少しかかる
• 実装が冗長に感じる…?
Fluxは枠組みなので、より良くするために
チームでTrial&Errorしてます
Flux with RxSwift
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
https://github.com/dekatotoro/FluxWithRxSwiftSample
Flux with RxSwift Sample

More Related Content

What's hot

Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
 
React.js + Reduxで作るSPA
React.js + Reduxで作るSPAReact.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会VOYAGE GROUP
 
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリングReact Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
 
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちService worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
 
About Reauire.js
About Reauire.jsAbout Reauire.js
About Reauire.js
Kyohei Morimoto
 
Ruby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作った
Ruby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作ったRuby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作った
Ruby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作った
takanori suzuki
 
オフラインファーストの思想と実践
オフラインファーストの思想と実践オフラインファーストの思想と実践
オフラインファーストの思想と実践Shumpei Shiraishi
 
20160927 reactmeetup
20160927 reactmeetup20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
daisuke-a-matsui
 
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)Daisuke Ikeda
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
 
前期講座08
前期講座08前期講座08
前期講座08
Takenori Nakagawa
 
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成krdlab
 
【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話
【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話
【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話
Hiroyuki Kusu
 
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
真乙 九龍
 
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
Masashi Shinbara
 
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscalaビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
takezoe
 

What's hot (20)

Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
 
React.js + Reduxで作るSPA
React.js + Reduxで作るSPAReact.js + Reduxで作るSPA
React.js + Reduxで作るSPA
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリングReact Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
 
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちService worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
 
About Reauire.js
About Reauire.jsAbout Reauire.js
About Reauire.js
 
Ruby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作った
Ruby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作ったRuby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作った
Ruby で zabbix agent の loadable module を作れる loadable module を C言語 + mruby で作った
 
オフラインファーストの思想と実践
オフラインファーストの思想と実践オフラインファーストの思想と実践
オフラインファーストの思想と実践
 
20160927 reactmeetup
20160927 reactmeetup20160927 reactmeetup
20160927 reactmeetup
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
クラウド環境向けZabbixカスタマイズ紹介(第5回Zabbix勉強会)
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
 
前期講座08
前期講座08前期講座08
前期講座08
 
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成
 
【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話
【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話
【YAPC::Asia Hachioji 2016】ES2015のclassでアプリケーションを書いてみた話
 
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
 
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
 
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscalaビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
 

Similar to Flux with RxSwift

ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
Fumiya Sakai
 
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fumiya Sakai
 
I Log On Saa S
I Log On Saa SI Log On Saa S
I Log On Saa Stotty jp
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!Shinpei Ohtani
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5
dynamis
 
Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料
学 松崎
 
How to manage Cakephp @CakePHP_Fukuoka_2
How to manage Cakephp @CakePHP_Fukuoka_2 How to manage Cakephp @CakePHP_Fukuoka_2
How to manage Cakephp @CakePHP_Fukuoka_2 ichikaway
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
 
Lt 110205
Lt 110205Lt 110205
Lt 110205
Tomoyuki Obi
 
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Yuji Takayama
 
ルーター自前実装の話
ルーター自前実装の話ルーター自前実装の話
ルーター自前実装の話
Kazushi Kawamura
 
AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜
AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜
AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜
Hirokazu Egashira
 
how unext took in eclipse collections in fw
   how unext took in eclipse collections in fw   how unext took in eclipse collections in fw
how unext took in eclipse collections in fw
Masahiko Kubo
 
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...SwapSkills
 
Laravel5を使って開発してみた
Laravel5を使って開発してみたLaravel5を使って開発してみた
Laravel5を使って開発してみた
Takeo Noda
 
20130412 titanium meetupvol7
20130412 titanium meetupvol720130412 titanium meetupvol7
20130412 titanium meetupvol7Hiroshi Oyamada
 
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Masakazu Muraoka
 
Jawsug chiba API Gateway
Jawsug chiba API GatewayJawsug chiba API Gateway
Jawsug chiba API Gateway
Takuro Sasaki
 
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
nakamura001
 

Similar to Flux with RxSwift (20)

ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
 
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
 
I Log On Saa S
I Log On Saa SI Log On Saa S
I Log On Saa S
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5
 
Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料Webサーバ勉強会 LT資料
Webサーバ勉強会 LT資料
 
How to manage Cakephp @CakePHP_Fukuoka_2
How to manage Cakephp @CakePHP_Fukuoka_2 How to manage Cakephp @CakePHP_Fukuoka_2
How to manage Cakephp @CakePHP_Fukuoka_2
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
Lt 110205
Lt 110205Lt 110205
Lt 110205
 
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
 
ルーター自前実装の話
ルーター自前実装の話ルーター自前実装の話
ルーター自前実装の話
 
AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜
AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜
AITCオープンラボ 第4回 IoT勉強会 〜 Pepper x IoT x Web 〜
 
how unext took in eclipse collections in fw
   how unext took in eclipse collections in fw   how unext took in eclipse collections in fw
how unext took in eclipse collections in fw
 
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
 
Laravel5を使って開発してみた
Laravel5を使って開発してみたLaravel5を使って開発してみた
Laravel5を使って開発してみた
 
20130412 titanium meetupvol7
20130412 titanium meetupvol720130412 titanium meetupvol7
20130412 titanium meetupvol7
 
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
 
AlfrescoとSolr(中編)
AlfrescoとSolr(中編)AlfrescoとSolr(中編)
AlfrescoとSolr(中編)
 
Jawsug chiba API Gateway
Jawsug chiba API GatewayJawsug chiba API Gateway
Jawsug chiba API Gateway
 
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
 

More from Yuji Hato

継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」
継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」
継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」
Yuji Hato
 
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Yuji Hato
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
Yuji Hato
 
5分で学ぶ差分更新とRxDataSources
5分で学ぶ差分更新とRxDataSources5分で学ぶ差分更新とRxDataSources
5分で学ぶ差分更新とRxDataSources
Yuji Hato
 
AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話
Yuji Hato
 
Apple TV tvOS入門 Iosdc2017
Apple TV tvOS入門 Iosdc2017Apple TV tvOS入門 Iosdc2017
Apple TV tvOS入門 Iosdc2017
Yuji Hato
 
AbemaTV on tvOS
AbemaTV on tvOSAbemaTV on tvOS
AbemaTV on tvOS
Yuji Hato
 
CarPlayの対応方法と日本での現状
CarPlayの対応方法と日本での現状CarPlayの対応方法と日本での現状
CarPlayの対応方法と日本での現状
Yuji Hato
 
AWA with Realm
AWA with RealmAWA with Realm
AWA with Realm
Yuji Hato
 

More from Yuji Hato (9)

継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」
継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」
継続的な開発スタイル 「AbemaTV iOSアプリを週一でリリースしている話」
 
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
 
5分で学ぶ差分更新とRxDataSources
5分で学ぶ差分更新とRxDataSources5分で学ぶ差分更新とRxDataSources
5分で学ぶ差分更新とRxDataSources
 
AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話
 
Apple TV tvOS入門 Iosdc2017
Apple TV tvOS入門 Iosdc2017Apple TV tvOS入門 Iosdc2017
Apple TV tvOS入門 Iosdc2017
 
AbemaTV on tvOS
AbemaTV on tvOSAbemaTV on tvOS
AbemaTV on tvOS
 
CarPlayの対応方法と日本での現状
CarPlayの対応方法と日本での現状CarPlayの対応方法と日本での現状
CarPlayの対応方法と日本での現状
 
AWA with Realm
AWA with RealmAWA with Realm
AWA with Realm
 

Recently uploaded

CO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdf
CO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdfCO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdf
CO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdf
yamamotominami
 
受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf
受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf
受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf
ooishi1
 
NIST Cybersecurity Framework 2.0の変更点整理をしよう
NIST Cybersecurity Framework 2.0の変更点整理をしようNIST Cybersecurity Framework 2.0の変更点整理をしよう
NIST Cybersecurity Framework 2.0の変更点整理をしよう
You&I
 
20240603_SD輪読&座談会#57_kitazaki_______.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf20240603_SD輪読&座談会#57_kitazaki_______.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf
Ayachika Kitazaki
 
Grokking Simplicity探訪
Grokking Simplicity探訪Grokking Simplicity探訪
Grokking Simplicity探訪
Yoshitaka Kawashima
 
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
You&I
 
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
fisuda
 

Recently uploaded (7)

CO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdf
CO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdfCO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdf
CO2排出量見える化・削減・報告クラウド「アスエネ」サービス紹介_Saleshub.pdf
 
受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf
受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf
受発注バスターズ説明資料  株式会社batton Saleshub掲載用.pdf
 
NIST Cybersecurity Framework 2.0の変更点整理をしよう
NIST Cybersecurity Framework 2.0の変更点整理をしようNIST Cybersecurity Framework 2.0の変更点整理をしよう
NIST Cybersecurity Framework 2.0の変更点整理をしよう
 
20240603_SD輪読&座談会#57_kitazaki_______.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf20240603_SD輪読&座談会#57_kitazaki_______.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf
 
Grokking Simplicity探訪
Grokking Simplicity探訪Grokking Simplicity探訪
Grokking Simplicity探訪
 
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
 
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
 

Flux with RxSwift

Editor's Notes

  1. まず、簡単に自己紹介します。 波戸と申します。ネット上ではだいたいdekatotoroという名前で活動しています。 AbemaTVのiOSアプリを開発してまして、 これまでは、AmebaアプリやAWAという音楽ストリーミングサービスのアプリなど開発してきました。
  2. アプリケーションの複雑さをなくすため、データの流れを一方向にします
  3. ・ViewのUser Interactionがイベントハンドラ(onClickなど)を実行します。 ・イベントハンドラの中でAction Creatorのを実行します。 ・Action CreatorはAPI呼び出しやDB操作を行ってデータを取得してDispatcherにactionを送信します。 ・Dispatcherはdispatchさせてcallback関数を登録します。 ・Storeは、callbackを呼び出して自信のデータを更新してイベントを発行します。 ・Viewはそのイベントを購読していて、StoreのデータがViewに反映されます。
  4. throttleはある期間はイベントを発行しないようにするオペレータです
  5. View階層が深い画面のdelegate地獄も無くなり Viewが分割しやすくなります。
  6. コード量は増える
  7. 試行錯誤してます