Skip to content

Instantly share code, notes, and snippets.

@fand

fand/flux_history_2.md

Last active November 29, 2016 06:40
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fand/d5db8772be8d2bc7db8d to your computer and use it in GitHub Desktop.
Save fand/d5db8772be8d2bc7db8d to your computer and use it in GitHub Desktop.
Download ZIP
めもだお
Raw
flux_history_2.md

Fluxの歴史（Redux以後）

flux-utils

  • 2015-08-20に登場（facebook/flux@2.1.0）
  • ImmutableJSを利用
  • Reduxの影響おおきい
    • waitForは使える

facebook/relay

  • It was announced at React.js Conf (January 2015).

    • 公開は2015-08-12

  • GraphQLで指定されたデータをサーバーからfetchし、自動でデータ構造を組み立て、Reactコンポーネントのpropsに渡す

    • データフロープログラミングの一種、とも言える？

  • GraphQL

    • It's been in production use in Facebook's native apps for several years.

  • Fluxとは異なる

    • Single store (not "Single source of truth"?)
    • Instead of multiple stores, there is one central store that caches all GraphQL data.

  • Instead of actions, modifications take the form of mutations.

  • データ構造についてComponentが知らないといけないのがきになる

    • ドメイン知識がFluxループ全体に普遍的に広まってしまう
    • データ構造はドメイン知識ではないという考え？

  • "Relay actually started out as a routing and application lifecycle framework at Facebook before we brought React and GraphQL together." by cpojer (https://medium.com/@cpojer/relay-and-routing-36b5439bad9)

Netflix/falcor

  • 2015-08-17 Developer Preview 公開

    • Initial commit は2015-02-13

  • If you know your data, you know your API. がテーマ

  • model.getValueすれば動く

    • server: var model = new falcor.Model({ cache: new falcor.HttpDataSource('./model.json') })
    • client: var model = new falcor.Model({ source: new falcor.HttpDataSource('./model.json') })

  • Reference

    • normalizeされたオブジェクト中で、{$type: 'ref', value: ['foo', 123]} で id === 123 なfooを参照する

  • rangeつかえる

  • RelayのようにReactと密結合ではない

  • Virtual JSON

stalts/cyclejs

  • Fluxでの非同期処理に疑問を持って作った
  • Model-View-Intent
  • 最近はパフォーマンスを重視したMotorcycle.jsもある
    • most.js + Snabbdom

flux-challenge

  • 2015-10-07 Initial commit
  • Cycle.jsの作者がFluxの非同期処理まわりに抱いた疑問からうまれたプロジェクト
    • Flux does not provide an elegant way of coordinating multiple async data sources
  • 与えられた仕様にたいし、いろんな人が実装を提案
  • FluxフレームワークどころかReactも用いない実装も多い
    • Cycle.js同様
  • 24 submits （2015-12-20 現在）
  • 仕様
    • ヘッダ
      • オビ=ワンの現在地を表示
    • リスト
      • 歴代ダーク・ジェダイとその母星
      • 母星がオビ=ワンの現在地のとき、そのジェダイは赤く表示する

flux-challengeのsubmitに使われてるライブラリ

arqex/Freezer (一枚岩系)

  • 作者による解説記事: https://medium.com/@arqex/react-the-simple-way-cabdf1f42f12

  • Immutableなデータ構造。EventEmitterにもなる

  • state + Dispatcherになれるということで、これだけでFluxできる！

  • 9.4KB

  • Immutableと違って中身はJSのネイティブなデータを使ってる

  • customEventにも対応

  • リッチな一枚岩系が存在する

    • omniscientjs/immstructなど
      • immstructはundo/redo機能まである
    • mizchi/flumptも一枚岩系とみなせる？

ds300/DDOM (Rx系亜種)

  • 2015-11-02 initial commit
  • ds300/Derivableを使ってReactiveに書ける
  • Fluxではない

ds300/Derivable

  • 2015-07-06 initial commit
  • Observable風の、Reactiveな何か
  • Atom, Derivations, Reactorsという概念がある
    • Atomは最も基本的な値
    • DerivationsでAtomの値を加工
      • DerivationのDeravationを作ったり
    • Reactors（イベントハンドラ）を設定してイベント管理
  • オペレータとかも結構充実してる
    • lensとか怖い単語が見える
  • Observableと違い、DerivationはAtomから送られた値に対して新たな値を作るのではなく、参照する度にAtomを同期的に参照して値を作る
  • 遅延評価らしい
    • Reactorが設定されていないAtom, Derivationsの値は計算されない、という意味

jas-chen/thisless-react (RxJS系)

  • 2015-09-21 init commit
  • rx-redux作者のプロダクト
  • RxJS, Reduxと組み合わせて使う
  • Componentは基本的に関数で表す（クラス書かない）
    • JSXとDOMイベントのObservableの組を返す
    • 全コンポーネントの関数を合成して一つのアプリケーションを構成
    • Viewとイベント以外はReduxで面倒見る
  • MVIでいうIntentをまとめるみたいな処理がめんどくさそう
  • 同作者のreact-reactive-componentは結構おもしろい
    • 標準ReactComponentのラッパー
    • Observableをpropsに渡すと勝手に表示を更新したりしてくれる

Day8/re-frame（ClojureScript系）

https://github.com/Day8/re-frame

  • 2014-12-05 Initial commit
  • ClojureSecriptでSPAを書くための pattern
  • Reagentを使用
  • data, query, view, control/state transactionの4つのレイヤーで構成
    • data : Store (single source of truty / Data-In-The-Opne-Place)
    • query : Selector
    • view : Component
    • control/state transaction: Action, Reducer?
  • Fluxっぽい
    • One-way data flow
    • Cursorライブラリはtwo-way flowを招くから嫌い、とのこと
  • ドキュメントが面白い
    • けどクソ長い
    • その上「FRPに詳しくない方はこちらの4つの記事を読め、そしてこの40分の動画を観ろ」とか言ってくる💢
  • ratom, reaction
    • ratom: Observable的な
    • reaction: ratomの値を加工してratomを返す。DerivableでのDerivation的なやつ

jollytoad/Fluxlet（一枚岩系）

省略

garbles/Yolk（Rx系）

  • 2015-09-02 Initial commit
    • 元々Angular界のひと？
  • Cycle.jsの正統進化って感じ
    • virtual-dom + RxJS
  • virtual-domのHyperScriptを独自に拡張
    • JSXで書ける
    • Observableを渡すと勝手に表示とか更新してくれる
    • createEventHandlerで作ったObservableをDOMイベントハンドラとして登録する
  • Rx的でないコンポーネント(jQueryで書いてるのとか)をラップする仕組みもある
  • 個人的にはCycleよりReact的で柔軟だと感じた

Elm（一枚岩系？）

  • 関数型、静的型付けAltJS
  • FRP, AltJSの文脈で語られる事も多い
  • Model-View-Update アーキテクチャ
  • むずいので省略

mweststrate/Mobservable（Rx系）

  • オレオレObservable
  • ReactにObservable渡すやつ付き

onetom/Hoplon（ClojureScript系）

  • Clojure + ClojureScriptを利用したフレームワーク
    • HLispっていうオレオレDOMでCustom Elementsっぽいの書く
  • Javelinを使ってデータフロープログラミング
    • Input CellsとFormula Cellsを定義して計算
    • Atom, Derivations みたいな感じ
  • CastraでRPCしてサーバ/クライアント間の通信する
    • Persisted State TransactionつってRPCの処理を定義するらしいけど、RelayとかFalcorと同じレイヤーに見える？
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment