Flux Application Architecture

Flux Application Architecture

2015/01/13 ALT#0x03

Fluxアーキテクチャというのをご存知ですか？

Flux アーキテクチャ

Facebookが提唱しているReact向けのアーキテクチャ

データフローの単方向化を促すシステム

- React -ユーザインタフェースを構築する為の JavaScriptライブラリ Virtual DOMを提供する

なぜ提唱されたのか

Facebook氏

MVCはすぐに複雑化してしまう 複雑度は指数関数的に増大してしまうそしてコードは『壊れやすくて予測不能な』 ものになってしまう

もっと予測可能な形でコードを構造化しよう

本質

API

Action

Dispatcher

Store

View

本質

API

Action

Dispatcher

Store

View

外部と通信する場所 Dispatcherのメッセージ発行処理 入力されたデータをStoreにいれる

Action

本質

API

Action

Dispatcher

Store

View

シングルトン ビジネスロジックを持たない

Dispatcher != Controller(MVC) Store内のコールバックの登録場所

Storeにメッセージを発行する

Dispatcher

本質

API

Action

Dispatcher

Store

View

シングルトン アプリケーションの状態 とロジックの管理をする

多数のオブジェクトの状態を管理

Store

本質

API

Action

Dispatcher

Store

View

ユーザーからの入力と Storeから状態情報を受け取り

描画をする 複数のインスタンスを生成可能

View

MVCとの違い

observerパターンは同じ

データの流れが一方通行

ドメインロジック部分がシングルトン

MVCも一方通行なんだよなぁ。。。

何がすごいの？

ベストプラクティス的なパターンに名前をつけて共通言語としたところです。

たぶん「誰もが一度は似たような事をやったことがある」と思うが、従来は個々人がそれぞれ別の言葉で呼んでおり、意思疎通の上で面倒くさかった

Fluxアーキテクチャの覚え書きを書いた から引用

つまり ただのobserverパターン

参考資料

Flux Application Architecturehttp://facebook.github.io/flux/docs/overview.html

Facebook の決断：MVCはスケールしない。ならば Flux だ。http://www.infoq.com/jp/news/2014/05/facebook-mvc-flux

Fluxアーキテクチャ覚え書きhttp://saneyukis.hatenablog.com/entry/2014/09/26/174750