Netflix Falcorについて（２） #JavaScript

Netflix Falcorについて（１）
Netflix Falcorについて（２）
Netflix Falcorについて（３）
Netflix Falcorについて（４）
Netflix Falcorについて（５）

　今回は、Modelとそのメソッドについての話です。FalcorはWebアプリにおける通信負荷を解決すべくNetflixにて考案されました。従来のREST APIでは不十分だということです。Falcorでは、クライアントから見たバックエンドのデータをグラフに見立てます。JavaScriptの世界ですから、グラフをJSONで表現するのは自然なことと言えるでしょう。従来はJSONは階層構造になっていてツリーですから、それをグラフに見立てるために少し拡張します。$refというプロパティを導入することで、別の場所のプロパティに（UNIXのファイルシステムにおける）シンボリックリンクのようなリンクを張ることができるようにします。このようにして表されたグラフデータをJSON Graphと呼びます。
https://netflix.github.io/falcor/documentation/model.html

　JSON GraphはModel層とDataSource層において実装されます。クライアントアプリはModel層を通して、DataSource層にアクセスし、Json Graphからデータを取得します。その時のModel層のメソッドのアクセスの仕方が、通常のJSONデータへのアクセスと同じようにできることから、Virtual JSONと呼ばれています。

　以下のサンプルで説明しましょう。

index.html

<html>
  <head>
    <!-- Do _not_  rely on this URL in production. Use only during development.  -->
    <script src="//netflix.github.io/falcor/build/falcor.browser.js"></script>
    <script>
        /* ①JSONデータ modelを作成 */
        var model = {
            todos: [
                    {
                        name: 'ニュースサイトのチェック',
                        done: false
                    },
                    {
                        name: '庭の草むしり',
                        done: true
                    }
            ]
        };
        console.log(model.todos[0].name); // ②直接JSONデータへアクセスする


        /* ③falcorのmodelを作成 */
        var model = new falcor.Model({
            cache: {
                todos: [
                    {
                        name: 'ニュースサイトのチェック',
                        done: false
                    },
                    {
                        name: '庭の草むしり',
                        done: true
                    }
                ]
            }});
            model.getValue('todos[0].name').then(n=>console.log(n)); // ④メソッドgetValueを通してアクセスする

    </script>
  </head>
  <body>
  </body>
</html>

　このクライアントは、JSONから直接データを取得する方法（①）と、Modelを通してJSON Graphにアクセスしデータを取得する方法（②）を比べています。両者はとても似ているので、特に後者（④）をVirtual JSONから値を取得するとも言います。②のModel作成はDataSourceとしてローカルキャッシュを利用していますので、サーバへの問い合わせは行われません。通信は発生しないのですが、JSON GraphとModelを理解するには便利なものです。前回のようにHttpDataSourceを使ってDataSourceの実装をサーバ側に変えても、クライアント側のコードは一切変更する必要はありません。全てModelが吸収してくれるからです。この辺がFalcorの魅力の一つでもあります。

　ここで注意しておきたいのは、クライアント側はJSONにアクセスする要領でデータをgetできるので大変簡単になるのですが、DataSource層もプログラマがコーディングする必要があり、こちらは少し大変です。MongoDBの設計に加えて、JSON Graphの設計が必要になるからです。サーバ側の実装については次回以降に説明します。

　最後に今回のプログラムを動作させる環境づくりについてです。サーバ側は静的htmlをサーブするだけの簡単なexpressサーバを起動するだけです。

インストール

mkdir falcor-qiita2
cd falcor-qiita2
npm init

npm install express --save

node index.js //サーバプログラムの起動

index.js

var express = require('express');
var app = express();

/* ブラウザからfavicon.icoをリクエストされた時の対応 */
app.get('/favicon.ico', function(req, res) {
    res.status(204);
});

// serve static files from current directory
app.use(express.static(__dirname + '/'));

var server = app.listen(3000);