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