Falcorを紹介します

@pastelInc

falcor-icon

ミドルウェア

falcor-position

Falcor概要

  • Netflixが開発したOSS
  • 効率的にデータを取り出すJavaScriptライブラリ
  • リモートデータソースを仮想的なJSONオブジェクトとしてモデル化する
network-diagram
network-diagram2

Falcorの目標

  • キャッシュコードの効率を向上させる
  • キャッシュとメモリ間の一貫性を保つ(キャッシュコヒーレンシ)
  • 複雑さとメンテナンスコストの減少
  • 性能(スピード＆メモリ使用量)を維持

Falcorの技術的構造

単一のJSONモデルに集約

one-model-everywhere

JSON Graph

{
    todosById: {
        "1": {
            name: "get milk from corner store",
            done: false,
            prerequisites: [{ $type: "ref", value: ["todosById", 2] }]
        },
        "2": {
            name: "withdraw money from ATM",
            done: false,
            prerequisites: []
        }
    },
    todos: [
        { $type: "ref", value: ["todosById", 1] },
        { $type: "ref", value: ["todosById", 2] },
        { $type: "ref", value: ["todosById", 2] }
    ]
};

パス

"todos[0].name"
"todos[0..2]['name','done']"
model.getValue('todos[0].name').then(log);

"get milk from corner store"

サーバでは単一エンティティ

why-json-graph

Objectには一意な識別子がない

why-json-graph

重複を導入することなく、JSONとしてモデル化

why-json-graph

Falcorを利用すると

  • 通信を透過的にする
  • ローカルのキャッシュにパスが無いときに問い合わせる

通信回数を少なく、データ量を少なくより効率的に

複数バックエンドサービスのためにRouterを提供

falcor-router

ただしサーバサイドは自分で実装する必要がある

  • クライアントにどんなJSON Graphを返すのか考えなければいけない
  • リクエストを受け取ってから他のAPIを叩いてももちろん大丈夫
  • Nodeでの実装がメイン

Falcor

  • JSON Graphとパスを使うことで透過的な通信
  • JSON Graphとパスを使うことで効率的な通信
  • 使い方を覚えるのは簡単

ぜひ一度触ってみてください！

Thanks!

@pastelInc