Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,582 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. Rendr入門 サーバサイドで(も)動かすBackbone.js
  2. 2. Rendr入門: 目次 • Rendrとは? • 前提となる問題意識 • Rendrの仕組み • アプリ開発・運用の実際と、使ってみた感想 • Q&A
  3. 3. Rendrとは?
  4. 4. 前提 • インタラクティブなウェブサービスを 作りたい。 • 同時に、高速なレスポンスを実現した い。
  5. 5. どうするか? • JavaScriptを使って、クライアント 側でUIなどのインタラクティブな部分 を構築。 • 最初のレスポンスを早めるために、サ ーバ側でもHTMLをレンダリング。
  6. 6. Rails + Backbone.js • テンプレートにERB + Mustacheを 使い、サーバとクライアントで一部を 共有。 • クライアント側JavaScriptのコード 量が、7割くらいを占めるようにな る。
  7. 7. 新しい課題 • サーバのRubyと、クライアントの JavaScriptを行き来するのがストレ ス。 • コードが重複する(バリデーションな ど)。 • サーバでのレンダリングはやめたくな い。
  8. 8. そこでRendr • AirBnb社が開発したNode.js向けラ イブラリ。 • Backbone.jsをベースに、サーバ・ クライアント間で多くのコードを共有 できる。 • Expressのミドルウェア。
  9. 9. Backbone.js • JavaScript MVCフレームワーク。 • Router、Model、Collection、 Viewから構成される。 • イベントによりモデルとビューが連 動。
  10. 10. Rendrの動作《サーバ》 • Node.js上で、Backbone.jsアプリ (ルータ、モデル、ビュー、テンプレー ト)を動かしてHTMLを生成。 • CSS、JavaScriptなどアセットをコ ンパイルして配信。
  11. 11. Rendrの動作《サーバ2》 • HTML生成に使った Backbone.View と Backbone.Model(Collection)を シリアライズ。 • Backbone.Viewとデータを関連づ けるIDが、HTMLに埋め込まれる。
  12. 12. Rendrの動作《クライアント》 • シリアライズされたデータと、HTML 上のIDを元にBackbone.Viewと Backbone.Modelを生成して関連づ ける。 • 以降は、通常のBackbone.jsアプリ と同様に動く。
  13. 13. つまり • スタンドアローンのBackbone.jsア プリを、Node.jsを使って配信。 • 配信時に、初回のレンダリングは完了 した状態になっている。
  14. 14. Rendrアプリの書き方
  15. 15. Rendrの構成 • ルータ • コントローラ • ビュー • テンプレート • データ・フェッチャー
  16. 16. ルータ • URLから、実行するコントローラとア クションの組み合わせを決定する。 • サーバ側とクライアント側共通。
  17. 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. 18. コントローラ • データの取得など、アプリケーション のロジック部分。 • 元のBackbone.jsには無い。 • 複数の「アクション」を持つ。 • サーバ側とクライアント側共通。
  19. 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. 20. ビュー • データ処理部分は、サーバ側とクライ アント側共通。 • サーバ側で、DOMを使うことはでき ない。 • クライアント側では、いわゆる Backbone.Viewとして動く。
  21. 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. 22. テンプレート • 標準では、Handlebarsを使用。 • サーバ側とクライアント側で、同じテ ンプレートが共有される。
  23. 23. テンプレート app/templates/users/index.hbs <h1>Users</h1> <ul> {{#each models}} <li> <a href="/users/{{login}}">{{login}}</a> </li> {{/each}} </ul>
  24. 24. データ・フェッチャー • サーバ・クライアント共通で使える API。 • サーバ動作時は、サーバの「データレ イヤー」からデータを取得。 • クライアント動作時は、 Backbone.Model/Collectionの データ取得処理が動く。
  25. 25. データレイヤー • データリクエストを処理する「データ レイヤー」を、自前で実装する必要が ある。 • ポリタスでは、Sequelize.jsを使っ てMySQLベースのデータレイヤーを 実装。
  26. 26. 開発環境 • Grunt • Stich • CommonJS形式で、クライアン ト・サーバ共にコードを共有でき る。 • JavaScript・CSSのマージ • Mocha
  27. 27. Rendrアプリ運用の実際
  28. 28. 動作環境 • サーバ • アプリ8台 • マスターDB1台 + スレーブDB8台 • Capistranoでデプロイ • デプロイ時にJavaScript/CSSを コンパイル
  29. 29. Rendrアプリのパフォーマンス • DBアクセスがない場合 → Express アプリと同等の性能。 • Rendrそのもののオーバーヘッドは無 視できる範囲(いまのところ)。
  30. 30. おわりに
  31. 31. Rendrを選択した理由 • Sails.jsなどは、クライアント⇄サー バでのコードの共有の点で、しっくり 来なかった。 • 元々Backbone.jsベースのコード資 産があった。 • Rendrはアプリ・コードの構成がシン プルで、AirBnbによる実績も期待で きた。
  32. 32. Rendrにして良かった事 • サーバとクライアントで、「言語」を 共有できるようになった。 • サーバとクライアントで、多くの「コ ード」を共有できるようになった。 • Backbone.jsのコードが、アセット 扱いからメイン扱いになってしっくり 来た。
  33. 33. Rendrの気になるところ • まだ色々未開拓。 • データレイヤーに共通のお作法がな い。 • 頻繁に内部仕様が変わる。 • ドキュメント不足してる。
  34. 34. Q&A
  35. 35. • 連絡先: @mshk • その他:「rendr」で検索

×