1. backbone.jsの使用例
その➀
@Spring_MT

2. 自己紹介
@Spring_MT
Infra and
App Engineer

3. backbone.jsとは？
一言でいうと。。。

4. backbone.jsとは？
Backbone.js gives structure to web applications by
providing models with key-value binding and custom
events, collections with a rich API of enumerable
functions, views with declarative event handling, and
connects it all to your existing API over a RESTful
JSON interface.
・http://backbonejs.org/より最初の一行目を抜粋

5. backbone.jsとは？
・サーバーとJSONでやりとりするRESTfulインタ
ーフェース
・key-value型のデータ(属性の設定)とカスタムイベ
ントを持つモデル
・複数のモデルを扱うためのAPIを持つコレクション
・イベントハンドリングを行うビュー

6. MVCの話はどこ？

7. webアプリケーション
(Railsとか)

8. Controller
Model View
Dispatcher
App Server
Web Browser
HTTP Request HTTP Response
データの取得と操作
データの受け渡し
HTMLのレンダリング
レンダリングが完了した
HTMLを含むHTTP Response

9. Webアプリケーション
のMVC(Model 2)
• 重い Model と軽い Controller
• Viewは永続化しない
• HTTPはステートレスなのでViewに状
態を保持する必要がない(Session
Cookieで保持)
• ControllerはModelをViewをつなぐ糊

10. GoFのMVC
(伝統的なMVC)

11. Controller Model
View
User Interaction
データの操作
操作の内容を渡す イベントを発火

12. MVC
• 永続的なView と交換可能な Controller

13. MVC
• 同じMVCという単語でも、コンテキス
トによって、内容が変わってくる

14. backboneのMVC

15. Collection
Model
View
Router
DOM
更新イベント発火
Controller
イベントを発火データの操作
User Interaction
OnHashChange
PushState

16. backbone.js
• Viewの中にビューメソッド(描画)とコン
トローラーメソッド(ロジック)を分ける
• Controllerは基本でてこない
• ModelはCollection経由で操作する

17. フレームワークとは
• アプリケーションの構築、管理を簡単
にするための道具

18. backbone.js
・サーバーとJSONでやりとりするRESTfulインタ
ーフェース
・key-value型のデータ(属性の設定)とカスタムイベ
ントを持つモデル
・豊富なリスト操作用のAPIを持つコレクション
・イベントハンドリングを行うビュー

19. 実際に使ってみる

20. ただ、サンプルアプ
リは使わないYO

21. だってわかりづｒ(ry

22. その前に

23. require.js
• モジュールの依存管理
• minify

24. では使ってみる
コードを元に説明します

25. クライアントサイド
• i18n対応どうするのか？
• render
• validation
• i18n用のモジュールもあるが使うのか？

26. ご清聴有難うござい
ました

27. 参考文献
• サバクラ両方で動く JavaScript の大規模
開発を行うために(https://gist.github.com/
tily/1362110)