( ﾟ∀ﾟ)o彡° Flux！ Flux！

( ﾟﾟ)o彡° Flux！ Flux！
2015/05/21 GX社内勉強会
@hoto17296

今日話すこと
• Flux の概念
• 他アーキテクチャとの関連

今日話さないこと
• React.js
• Flux の具体的な実装

概要
• Facebook 発祥のアーキテクチャ
• 特定のモジュールを指すものではない
• さまざまな Flux 実装がある
• fluxxor, flummox, fluxible, etc...
• 誰でも実装できるくらいシンプル

facebook/ﬂux ここだけ
まんま React.js
いつもの図

圧倒的シンプル!!!
＼＼ ٩( ‘ω’ )‫و‬ //／／

Unidirectional Data Flow
• データが一方向にしか流れないという制約
• 構造がスパゲッティになりにくい

今までのアーキテクチャは
Unidirectional じゃ
なかったってこと？

ぼくたちの MVC
Model
Controller View
Update
Render
Action
ビジネスロジック

本来の MVC
Model
Controller View
Emit
Action
Update ビジネスロジック

本来の MVC も
Unidirectional じゃん!!!

Flux
Store
Action 
Creator
React 
View
Emit
User 
Interaction
Action
Dispatcher
Callback

Web によって歪んでしまった
MVC を再定義するもの

Flux
Store
Action 
Creator
React 
View
Emit
User 
Interaction
Action
Dispatcher
Callback
？？？

Dispatcher の役割（私見）
• 流れを整える者
• すべての流れをいったん一箇所に集約する 
ことで Unidirectional を崩れにくくする
• Flux を構成する重要な要素ではあるが 
アプリケーションそのものではない

結局 Flux の何がいいのか
• 各要素が極めて疎結合
• View は React として切り出されている
• Action Creator Store は 
Dispatcher と Unidirectional Data Flow 
によって分断されている

Flux の困るところ
• Router や Fetcher が存在しない
• Angular のフルスタックさとは程遠い
• 自分で設計すればよい
• コードが冗長になる
• 可読性のための冗長性は正義では？

まとめ
• Flux は特別新しいアーキテクチャではない
• 既存のアーキテクチャを見直す 
いい機会かもしれない

Recommended