狠狠撸

Rendr入門
サーバサイドで(も)動かすBackbone.js

Rendr入門: 目次
? 搁别苍诲谤とは？
? 前提となる問題意識
? Rendrの仕組み
? アプリ開発?運用の実際と、使ってみた感想
? Q&A

前提
? インタラクティブなウェブサービスを
作りたい。

? 同時に、高速なレスポンスを実現した
い。

どうするか？
? JavaScriptを使って、クライアント
側でUIなどのインタラクティブな部分
を構築。

? 最初のレスポンスを早めるために、サ
ーバ側でもHTMLをレンダリング。

Rails + Backbone.js

? テンプレートにERB + Mustacheを
使い、サーバとクライアントで一部を
共有。

? クライアント側JavaScriptのコード
量が、７割くらいを占めるようにな
る。

新しい課題
? サーバのRubyと、クライアントの

JavaScriptを行き来するのがストレ
ス。

? コードが重複する（バリデーションな
ど）。

? サーバでのレンダリングはやめたくな
い。

そこでRendr
? AirBnb社が開発したNode.js向けラ
イブラリ。

? Backbone.jsをベースに、サーバ?
クライアント間で多くのコードを共有
できる。

? 贰虫辫谤别蝉蝉のミドルウェア。

Backbone.js
? JavaScript MVCフレームワーク。
? Router、Model、Collection、
Viewから構成される。

? イベントによりモデルとビューが連
動。

Rendrの動作《サーバ》
? Node.js上で、Backbone.jsアプリ
(ルータ、モデル、ビュー、テンプレー
ト)を動かしてHTMLを生成。

? CSS、JavaScriptなどアセットをコ
ンパイルして配信。

Rendrの動作《サーバ2》
? HTML生成に使った
Backbone.View と
Backbone.Model(Collection)を
シリアライズ。

? Backbone.Viewとデータを関連づ
けるIDが、HTMLに埋め込まれる。

Rendrの動作《クライアント》

? シリアライズされたデータと、HTML
上のIDを元にBackbone.Viewと
Backbone.Modelを生成して関連づ
ける。

? 以降は、通常のBackbone.jsアプリ
と同様に動く。

つまり
? スタンドアローンのBackbone.jsア
プリを、Node.jsを使って配信。

? 配信時に、初回のレンダリングは完了
した状態になっている。

搁别苍诲谤アプリの书き方

Rendrの構成
? ルータ
? コントローラ
? ビュー
? テンプレート
? データ?フェッチャー

ルータ
? URLから、実行するコントローラとア
クションの組み合わせを決定する。

? サーバ側とクライアント側共通。

ルータ設定の例
app/routes.js
module.exports = function(match) {
match('',
'home#index');
match('repos',
'repos#index');
match('repos/:owner/:name', 'repos#show');
match('users'
,
'users#index');
match('users/:login',
'users#show');
match('users_lazy/:login', 'users#show_lazy');
};

コントローラ
? データの取得など、アプリケーション
のロジック部分。

? 元のBackbone.jsには無い。
? 複数の「アクション」を持つ。
? サーバ側とクライアント側共通。

コントローラの例
app/controllers/users_controller.js
module.exports = {
index: function(params, callback) {
var spec = {
collection: { collection: 'Users',
????????????params: params }
};
this.app.fetch(spec, function(err, result) {
callback(err, result);
});
}
}

ビュー
? データ処理部分は、サーバ側とクライ
アント側共通。

? サーバ側で、DOMを使うことはでき
ない。

? クライアント側では、いわゆる
Backbone.Viewとして動く。

ビュー
app/views/users/index.js
module.exports = BaseView.extend({
className: 'users_index_view'
});
module.exports.getTemplateData = function(){
data = BaseView.prototype.getTemplateData.call(this);
return data;
};
module.exports.id = 'users/index';

テンプレート
? 標準では、Handlebarsを使用。
? サーバ側とクライアント側で、同じテ
ンプレートが共有される。

テンプレート
app/templates/users/index.hbs
<h1>Users</h1>
<ul>
{{#each models}}
<li>
<a href="/users/{{login}}">{{login}}</a>
</li>
{{/each}}
</ul>

データ?フェッチャー
? サーバ?クライアント共通で使える
API。

? サーバ動作時は、サーバの「データレ
イヤー」からデータを取得。

? クライアント動作時は、
Backbone.Model/Collectionの
データ取得処理が動く。

データレイヤー
? データリクエストを処理する「データ
レイヤー」を、自前で実装する必要が
ある。

? ポリタスでは、Sequelize.jsを使っ
てMySQLベースのデータレイヤーを
実装。

開発環境
? Grunt
? Stich
? CommonJS形式で、クライアン
ト?サーバ共にコードを共有でき
る。

? JavaScript?CSSのマージ
? Mocha

搁别苍诲谤アプリ运用の実际

動作環境
? サーバ
? アプリ8台
? マスターDB1台 + スレーブDB8台
? Capistranoでデプロイ
? デプロイ時にJavaScript/CSSを
コンパイル

Rendrアプリのパフォーマンス

? DBアクセスがない場合 → Express
アプリと同等の性能。

? Rendrそのもののオーバーヘッドは無
視できる範囲(いまのところ)。

Rendrを選択した理由
? Sails.jsなどは、クライアント?サー
バでのコードの共有の点で、しっくり
来なかった。

? 元々Backbone.jsベースのコード資
産があった。

? Rendrはアプリ?コードの構成がシン
プルで、AirBnbによる実績も期待で
きた。

Rendrにして良かった事
? サーバとクライアントで、「言語」を
共有できるようになった。

? サーバとクライアントで、多くの「コ
ード」を共有できるようになった。

? Backbone.jsのコードが、アセット
扱いからメイン扱いになってしっくり
来た。

Rendrの気になるところ
? まだ色々未開拓。
? データレイヤーに共通のお作法がな
い。

? 頻繁に内部仕様が変わる。
? ドキュメント不足してる。

? 連絡先: @mshk
? その他：「谤别苍诲谤」で検索

狠狠撸

Rendr入門: サーバサイドで(も)動かす、Backbone.js

More Related Content

Rendr入門: サーバサイドで(も)動かす、Backbone.js