Rendr入門: サーバサイドで(も)動かす、Backbone.js
38 likes14,877 views
東京Node学園祭2013で発表した「Rendr入門」のプレゼンスライドです。
More Related Content
What's hot (20)
Viewers also liked (14)
Similar to Rendr入門: サーバサイドで(も)動かす、Backbone.js (9)
Recently uploaded (6)
Rendr入門: サーバサイドで(も)動かす、Backbone.js
- 2. Rendr入門: 目次 • Rendrとは？ • 前提となる問題意識 • Rendrの仕組み • アプリ開発・運用の実際と、使ってみた感想 • Q&A
- 3. Rendrとは？
- 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から構成される。 • イベントによりモデルとビューが連 動。
- 11. Rendrの動作《サーバ2》 • HTML生成に使った Backbone.View と Backbone.Model(Collection)を シリアライズ。 • Backbone.Viewとデータを関連づ けるIDが、HTMLに埋め込まれる。
- 14. Rendrアプリの書き方
- 15. Rendrの構成 • ルータ • コントローラ • ビュー • テンプレート • データ・フェッチャー
- 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';
- 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」で検索