東京Node学園祭2013で発表した「Rendr入門」のプレゼンスライドです。

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

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

3. Rendrとは？

4. 前提
• インタラクティブなウェブサービスを
作りたい。
• 同時に、高速なレスポンスを実現した
い。

5. どうするか？
• JavaScriptを使って、クライアント
側でUIなどのインタラクティブな部分
を構築。
• 最初のレスポンスを早めるために、サ
ーバ側でもHTMLをレンダリング。

6. Rails + Backbone.js
• テンプレートにERB + Mustacheを
使い、サーバとクライアントで一部を
共有。
• クライアント側JavaScriptのコード
量が、７割くらいを占めるようにな
る。

7. 新しい課題
• サーバのRubyと、クライアントの
JavaScriptを行き来するのがストレ
ス。
• コードが重複する（バリデーションな
ど）。
• サーバでのレンダリングはやめたくな
い。

8. そこでRendr
• AirBnb社が開発したNode.js向けラ
イブラリ。
• Backbone.jsをベースに、サーバ・
クライアント間で多くのコードを共有
できる。
• Expressのミドルウェア。

9. Backbone.js
• JavaScript MVCフレームワーク。
• Router、Model、Collection、
Viewから構成される。
• イベントによりモデルとビューが連
動。

10. Rendrの動作《サーバ》
• Node.js上で、Backbone.jsアプリ
(ルータ、モデル、ビュー、テンプレー
ト)を動かしてHTMLを生成。
• CSS、JavaScriptなどアセットをコ
ンパイルして配信。

11. Rendrの動作《サーバ2》
• HTML生成に使った
Backbone.View と
Backbone.Model(Collection)を
シリアライズ。
• Backbone.Viewとデータを関連づ
けるIDが、HTMLに埋め込まれる。

12. Rendrの動作《クライアント》
• シリアライズされたデータと、HTML
上のIDを元にBackbone.Viewと
Backbone.Modelを生成して関連づ
ける。
• 以降は、通常のBackbone.jsアプリ
と同様に動く。

13. つまり
• スタンドアローンのBackbone.jsア
プリを、Node.jsを使って配信。
• 配信時に、初回のレンダリングは完了
した状態になっている。

14. Rendrアプリの書き方

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

16. ルータ
• URLから、実行するコントローラとア
クションの組み合わせを決定する。
• サーバ側とクライアント側共通。

17. ルータ設定の例
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');
};

18. コントローラ
• データの取得など、アプリケーション
のロジック部分。
• 元のBackbone.jsには無い。
• 複数の「アクション」を持つ。
• サーバ側とクライアント側共通。

19. コントローラの例
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);
});
}
}

20. ビュー
• データ処理部分は、サーバ側とクライ
アント側共通。
• サーバ側で、DOMを使うことはでき
ない。
• クライアント側では、いわゆる
Backbone.Viewとして動く。

21. ビュー
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';

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

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

24. データ・フェッチャー
• サーバ・クライアント共通で使える
API。
• サーバ動作時は、サーバの「データレ
イヤー」からデータを取得。
• クライアント動作時は、
Backbone.Model/Collectionの
データ取得処理が動く。

25. データレイヤー
• データリクエストを処理する「データ
レイヤー」を、自前で実装する必要が
ある。
• ポリタスでは、Sequelize.jsを使っ
てMySQLベースのデータレイヤーを
実装。

26. 開発環境
• Grunt
• Stich
• CommonJS形式で、クライアン
ト・サーバ共にコードを共有でき
る。
• JavaScript・CSSのマージ
• Mocha

27. Rendrアプリ運用の実際

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

29. Rendrアプリのパフォーマンス
• DBアクセスがない場合 → Express
アプリと同等の性能。
• Rendrそのもののオーバーヘッドは無
視できる範囲(いまのところ)。

30. おわりに

31. Rendrを選択した理由
• Sails.jsなどは、クライアント⇄サー
バでのコードの共有の点で、しっくり
来なかった。
• 元々Backbone.jsベースのコード資
産があった。
• Rendrはアプリ・コードの構成がシン
プルで、AirBnbによる実績も期待で
きた。

32. Rendrにして良かった事
• サーバとクライアントで、「言語」を
共有できるようになった。
• サーバとクライアントで、多くの「コ
ード」を共有できるようになった。
• Backbone.jsのコードが、アセット
扱いからメイン扱いになってしっくり
来た。

33. Rendrの気になるところ
• まだ色々未開拓。
• データレイヤーに共通のお作法がな
い。
• 頻繁に内部仕様が変わる。
• ドキュメント不足してる。

34. Q&A

35. • 連絡先: @mshk
• その他：「rendr」で検索