Skip to content

Instantly share code, notes, and snippets.

@fand

fand/flux_history.md

Last active October 19, 2016 04:26
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fand/b465ca6785c502478384 to your computer and use it in GitHub Desktop.
Save fand/b465ca6785c502478384 to your computer and use it in GitHub Desktop.
Download ZIP
Flux戦争の歴史
Raw
flux_history.md

Flux戦争の歴史メモ

Fluxxor by binarymuse

  • 2014/05/12 first commit
    • F8での "Flux" の登場からわずか4日
  • 素朴な実装
  • mixinベースの機能
    • 〜React v0.12という感じ

Reflux by spoike

  • 2014/07/02 first commit
  • move the dispatcher into the actions
    • わかってないと依存関係がカオスになりそう
  • Store間の依存関係は、Storeが別のStoreのイベントをlistenすることで解消
    • これはwaitForよりわかりやすい、ような気がする
  • const foo = Reflux.createAction(); で Action 作成
    • foo() で Action 発火
    • EventEmitterなのに関数っぽい呼び方するの気にかかる
  • const fooStore = Reflux.createStore(); で Store 作成
    • this.listen(foo, this.handleFoo); する
  • 2015-07に、コア部分が reflux-core として切り出された
  • 感想
    • Dispatcherあってもなくても対して変わらんな
      • Refluxでも、綺麗にしようとすると結局自前で Actions を纏めてStoreにロードする必要がある
    • APIが微妙
      • EventEmitterならEventEmitter互換のAPIにしてほしい

DeLorean.js by f

  • 2014/08/09 first commit
  • 使い方
    • Delorean.Flux 内に Store, Action, の作成用関数がある
    • Store.onChange() で Viewを更新する
  • schemeムズすぎる
    • vue.jsのcomputedプロパティみたいな感じ？ http://jp.vuejs.org/guide/computed.html
    • データ間の依存関係も定義できる
    • 小規模でなければ使いみちなさそう
    • データ更新ロジックがActionじゃなくてStoreにあるのはなあ

fynx by foss-haas

  • 2014/08/15 first commit
    • "inspired by Reflux and Fluxxor"
  • Immutable, Pureを目指している？
  • View Components/Pure Components は Smart/Dumb Component に相当
  • Dispatcher ではなく Listeners がある
    • サーバをfetchするのはActionsではなくListenersで行う
    • actions と双方向にデータが流れる
      • unidirectionalじゃない。これはFluxではないな
      • "Listeners may also invoke other actions" という理由。なるほど
    • Dispatcher はない
      • Listener のイベントハンドラが Store を外部から操作する！

lux.js by LeanKit-Labs

  • 2014/09/06 first commit
  • LeanKitって会社のプロダクト
    • B2B、タスク管理 + グループウェア？
  • postal.js, machina.js を利用
    • postal.js : PubSubシステム
    • machina.js : ステートマシン
  • ControllerView という概念
    • Storeの更新を受け取って this.state を更新する Component
    • Smart Componentに相当
  • DispatcherがFSMになっている？？？？
    • そんな複雑なことやってるの……？？？
  • APIがレガシーでめんどそう

NuclearJS by optimizely

  • 2014/09/10 first commit
    • Optimizely: SEO業者
  • Immutable.jsを活用
    • Omに影響を受けた、root stateを持つアーキテクチャ
    • "All application state is stored in one Immutable Map, similar to Om"
  • Pure FunctionでStoreごとのstateを返す
  • Getter
    • selectorに相当
    • storeのstateからデータを計算し取得する
  • API
    • var reactor = new Reactor(); する
      • Fluxxorのflux相当
    • reacor.ReactMixinを用い、getDataBinding() を実装することで、コンポーネントのstateにデータを生やす
      • Reduxのconnectにそっくり
      • 違いは state/props, mixin/decorator のみ？
    • Actions
      • reactor.dispatch('FOO_ACTION', payload); する関数のハッシュ

Om by swannodette

  • 2013/12/03 first commit
    • Flux以前！
  • Clojurescript用のライブラリ
    • 宣伝文句
      • 「Immutabilityのおかげでパフォーマンスが良い」
      • 「Undo/Redoできるアプリを簡単に書ける」
  • EDN
    • Clojure風のDSL。View書くのに使う
  • CSP
    • goのchannelみたいな感じ。Dispatcherの代わりにつかう
    • Rxの方が筋いいのでは？とも思う
  • Cursor
    • 深くネストしたImmutable.Mapの中身を取り出すのに便利
    • Viewにcursorとstate渡して、必要なデータを取り出して利用する
    • ImmutableJSの標準のgetとか、あるいはselector使ったほうがシンプル？

Flummox by acdlite

  • 2014/10/25 first commit
  • Fluxクラスのインスタンスを使ってStoreとかActionsを作る
    • const flux = new Flux(); flux.createStore(); みたいな
  • async function でActionCreatoreを書ける
  • async actionはPromiseを返し、その結果のresolve/rejectによってStoreでも分岐が怒ってしまう
  • FluxComponent を使って、StoreとReact.Componentをつなぐ
    • Reduxのconnectとそっくり
    <FluxComponent connectToStores={{
  posts: store => ({
    post: store.getPost(this.props.post.id),
  }),
  comments: store => ({
    comments: store.getCommentsForPost(this.props.post.id),
  })
}}>

Fluxible by yahoo

  • 2014/10/29 first commit
  • Yahooが開発
    • サーバサイドレンダリングやデータの同期などの仕組みが充実
  • Dehyderate/Rehyderateでサーバ/クライアント間のstateを共有する
  • FluxibleContext, ActionContext, ComponentContext, StoreContextの4つのcontextを持つ
    • Action, Component, Storeそれぞれの役割に応じて機能が追加/制限されてる
    • Fluxxorにおける flux に相当する
  • ComponentContextはReact.Componentのcontextに渡される
    • executeAction/getStoreだけを持つ
    • executeActionにはコールバックを渡せない
  • function myAction(actionContext, payload, done) { actionContext.dispatch(...); }
    • Componentからは this.context.executeAction(myAction) という風に実行する
    • 非同期Actionは完了時に「doneを呼ぶ」 or 「Promiseを返す」
    • Actionがdoneを受け取らない場合は、Actionの返り値をresolveするPromiseを返す
  • 感想
    • 学習コスト高い
      • フルスタック感ある
      • なんで executeAction とかやんなきゃいけないのか
      • contextによって同名のメソッドの振る舞いが違うの罠っぽい
    • contextべったりなのが気になる
      • Decoratorの方が健全では？多少マジカルだが

McFly by kenwheeler

  • 2014/11/01 first commit
  • Store, Action のファクトリだけの素朴な実装
    • Dispatcherは facebook/flux を利用
  • Store作成時にActionの監視も行う
    • mcfly.createStore(methods, callback);
    • callbackでActionとmethodを紐付ける
  • ActionCreatorはFlux Standard Actionをreturnする

marty.js by taion

  • 2014/11/02 first commit
  • "Marty is no longer actively maintained. Use Alt or Redux instead."
  • Container: ReactComponentのファクトリ
  • Applicationという概念がある
    • Fluxループを複数使い分けられる？
    • とすると、子供のContainerの this.app が生える
  • 文化が独特
    • UMD形式で書かれてる
    • makeでビルド
    • コミットメッセージの先頭に絵文字付ける

fluxify by arqex

  • 2014/11/23 first commit
  • The simplest Flux implementation を標榜
  • Dispatcherはsingleton
    • require('fluxify').dispatcher
    • 使い方はfacebook/fluxのDispatcherと大体同じ
  • createStoreでStore書く

Alt by goatslacker

  • 2014/12/11 first commit
  • Altクラスのインスタンスを使ってStoreとかActionsを作る
    • export default new Alt(); alt.createStore(FooStore); みたいな
  • Data Sources という概念でasync actionを管理する
    • Async処理はData Sourceのプロパティに生やす
    • Store#registerAsyncでData Sourceを登録
      • ↑で定義したAsync処理メソッドがStoreに生える
    • Store#isLoading() でロード中か判定してStoreの処理を分岐
  • @connectToStores を使ってStoreとReact.Componentをつなぐ
    • React.Componentに @connectToStores を付け、getStores() と getPropsFromStores() というstaticメソッドを実装すると、propsに getPropsFromStores() の返り値が生える
  • @withAltContext を使って、Fluxループを複数使い分ける事ができる
    • You can create separate instances of the Alt universe
    • React.Componentではcontextを利用する
  • alt.takeSnapshot() で全Storeの状態のsnapshotがとれる
    • altが全てのStoreを知っているから可能

Arda by mizchi

  • 2015/02/07 first commit
    • Kobito開発中に生まれた
  • Scene: Fluxループ1塊
    • Scene毎の状態をProps, State, TemplatePropsに分類
  • Contextという概念
    • SceneをpushState, popStateで切り替える
    • ラウターに近い
      • react-routerへの反動？

Freezer by arqex

  • 2015/02/12 first commit
  • リッチなデータ構造
    • Fluxフレームワークではない
    • EventEmitterとして働くため、Fluxフレームワークとしても使える！！

material-flux by azu

  • 2015/03/08 first commit
    • azuさんのシンプル実装
    • マシンリーダブルなコードのため、ハックをなくす事を再優先
  • Context: ActionとStoreを対応付ける
    • Dispatcher的な役割
    • アプローチは違うが、ArdaのContextやAltと似ている

microflux by goatslacker

  • 2015/05/14 first commit
    • 2015/07/03 終了のお知らせ
  • Altの作者が、Nuclearの影響を受けて実験的に作った

microcosm by vigetlabs

  • 2015/05/14 first commit
  • Om, Elm, Flummox, Worldsの影響を受けた
  • stateが一枚岩であることが特徴
  • Storeはstateを持たない
    • stateを更新する関数のあつまり
    • reducerじゃん
  • 「小規模でしか試してないから、大規模なアプリではNuclearJSを使ってね」
    • 発想は良いがAPIが微妙？

fluctuations by glenjamin

  • 2015/05/15 first commit
    • 当時は flux-redux という名前だった！
  • ActionCreator の代わりに ActionInterceptor を持つ
    • Commandを受け取ってEventを発行するッて書いてあるけど全く役割がわからん……

fluce by rpominov

  • 2015/05/18 first commit
    • "It's unfinished and frozen for now because of existence of a better alternative — Redux"
  • Store毎に State + Reducer の組を持つ
    • Reducerの名前はActionの名前とそろえる
  • fluce.stores.storeName でStoreの現在のStateを取得できる
    • fluceをルートとした一枚岩のstateと言える

Redux by gaearon

  • 2015/05/30 first commit
  • Dan abramovのブログ記事/ReactEurope2015のトークのPoC的な実装
  • Hot Realoadingを全面に押し出した
    • 別に他のFluxフレームワークでも出来るけどね……
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment