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

自己紹介
@Spring_MT
Infra and
App Engineer

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

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/より最初の一行目を抜粋

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

MVCの話はどこ？

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

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

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

GoFのMVC
(伝統的なMVC)

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

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

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

backboneのMVC

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

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

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

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

実際に使ってみる

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

だってわかりづｒ(ry

その前に

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

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

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

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

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