( ゚∀゚)o彡° flux! flux!

28
( ゚∀゚)o° FluxFlux2015/05/21 GX社内勉強会 @hoto17296

Upload: yuki-ishikawa

Post on 25-Jul-2015

251 views

Category:

Technology


1 download

TRANSCRIPT

( ゚∀゚)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

MVC とだいたい同じ!!!

つまり

Flux とは

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 は特別新しいアーキテクチャではない

• 既存のアーキテクチャを見直すいい機会かもしれない