Netflix Falcorについて（１）
Netflix Falcorについて（２）
Netflix Falcorについて（３）
Netflix Falcorについて（４）
Netflix Falcorについて（５）
Falcor+Reactのフルスタック開発環境
前回の投稿から半年以上が経ちました。その時はmeteor+angular2を勉強していましたが、angular2には見切りをつけました。必要以上に複雑に思えますし、仕様も変更が激しい気がしましたので、ついていく気が失せました。次にmeteor+vueを勉強しました。meteor+vue2+d3jsの組み合わせで使ってみました。vueはなかなか良いものに思えましたが、ドキュメントや採用例が少ない気がしました。最後に、と言っても2か月前からですが、meteor+reactをやっています。
やはりreactで決まりかなと思います。reactはシンプルでとても気に入りました。唯一不満だったのはreact-router v4になってそれまでと破壊的に仕様が変わったことです。react-routerを使った参考書などのサンプルは書き換えないとほとんど動きません。それくらいかな。
Webプログラミングの選択肢は、現在２つあります。個人的にですが。
（１）Meteor + React
（２）MongoDB + Mongoose +Node + Express + Falcor + React + Redux + Material-UI + Webpack + babel
Meteor + Rectの組み合わせでReduxも一緒に使うのは、個人的に疑問です。できるだけMinimongoを使い、Reduxは避けたいところです。（１）が最初の選択肢ですが、それ以外の選択肢も用意したいところです。スケーラブルなシステムは（２）の方がよいでしょう。
その中でも、現在注目しているのが、Falcorです。長い前ふりですみませんが、やっと本題です。Falcorは我が愛するNetflixによるJavaScriptライブラリです。サーバとクライアントのやり取りを、REST APIに代わって行うものです。今回は大枠だけを具体的に紹介しましょう。（Reactについては触れませんのであしからず）
https://netflix.github.io/falcor/
それでは早速もっとも簡単なサンプルを上げるとしましょう。今回はほとんど本家サイトのコードそのままです。今後これに修正を加えて、MongoDBなどと連携したものにしていくつもりです。
(注)以下コードファイルはすべてUTF-8です
mkdir falcor-qiita
cd falcor-qiita
npm init
npm install express --save
npm install falcor-express --save
npm install falcor-router --save
node index.js //サーバプログラムの起動
サーバ側のコードです。
var falcorExpress = require('falcor-express');
var Router = require('falcor-router');
var express = require('express');
var app = express();
app.use('/model.json', falcorExpress.dataSourceRoute(function (req, res) {
// Falcorのサーバサイドの肝です
return new Router([
{
// match a request for the key "greeting"
route: "greeting",
// respond with a PathValue with the value of "Hello World."
get: function() {
return {path:["greeting"], value: "こんちわー"};
}
}
]);
}));
// serve static files from current directory
app.use(express.static(__dirname + '/'));
var server = app.listen(3000);
以下はクライアント側のコードです。
<html>
<head>
<script src="//netflix.github.io/falcor/build/falcor.browser.js"></script>
<script>
var model = new falcor.Model({source: new falcor.HttpDataSource('/model.json') });
model.
get("greeting").
then(function(response) {
document.write(response.json.greeting);
});
</script>
</head>
<body>
</body>
</html>
これでブラウザで http://localhost:3000/ などとアクセスすると「こんちわー」と表示されます。クライアントで model.get("greeting") とアクセスすると、サーバ側では route: "greeting" で受けて getハンドラーがさばいてくれます。この"greeting"をpathと呼びます。
一応、システムの構造は以下のようになっています。
クライアント -- Model -- DataSource -- MongoDBなど
クライアントはModelのインターフェースだけを使うので楽です。それはほとんど、Jsonのデータにアクセスするのと同等です。後はModel以下のものが仕事をしてくれます。サーバ側ではDataSourceを実装する必要があります。falcor-routerを使います。しかしここのところはJson Graphを構築する必要があり、設計には少なからぬ経験が求められるところです。
今回は簡単な紹介ということで、ニュアンスだけを伝えるだけでしたが、次回はもう少し用語の定義をキチンとして、仕様もキチンとしたいと思います。