( ゚∀゚)o彡° Flux! Flux!
2015/05/21 GX社内勉強会
@hoto17296
今日話すこと
• Flux の概念
• 他アーキテクチャとの関連
今日話さないこと
• React.js
• Flux の具体的な実装
概要
• Facebook 発祥のアーキテクチャ
• 特定のモジュールを指すものではない
• さまざまな Flux 実装がある
• fluxxor, flummox, fluxible, etc...
• 誰でも実装できるくらいシンプル
facebook/flux ここだけ
まんま React.js
いつもの図
圧倒的シンプル!!!
\\\\ ٩( ‘ω’ )و ////
Unidirectional Data Flow
• データが一方向にしか流れないという制約
• 構造がスパゲッティになりにくい
今までのアーキテクチャは Unidirectional じゃ なかったってこと?
ぼくたちの MVC
Model
Controller View
Update
Render
Action
ビジネスロジック
本来の MVC
Model
Controller View
Emit
Action
Update ビジネスロジック
本来の MVC も
Unidirectional じゃん!!!
Flux
Store
ActionCreator
ReactView
Emit
UserInteraction
Action
ビジネスロジック
Dispatcher
Callback
Web によって歪んでしまった
MVC を再定義するもの
Flux
Store
ActionCreator
ReactView
Emit
UserInteraction
Action
ビジネスロジック
Dispatcher
Callback
???
Dispatcher の役割(私見)
• 流れを整える者
• すべての流れをいったん一箇所に集約する
ことで Unidirectional を崩れにくくする
• Flux を構成する重要な要素ではあるが アプリケーションそのものではない
結局 Flux の何がいいのか
• 各要素が極めて疎結合
• View は React として切り出されている
• Action Creator ⇔ Store はDispatcher と Unidirectional Data Flowによって分断されている
Flux の困るところ
• Router や Fetcher が存在しない
• Angular のフルスタックさとは程遠い
• 自分で設計すればよい
• コードが冗長になる
• 可読性のための冗長性は正義では?
まとめ
• Flux は特別新しいアーキテクチャではない
• 既存のアーキテクチャを見直すいい機会かもしれない