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
だってわかりづr(ry
その前に
require.js
• モジュールの依存管理
• minify
では使ってみる
コードを元に説明します
クライアントサイド
• i18n対応どうするのか?
• render
• validation
• i18n用のモジュールもあるが使うのか?
ご清聴有難うござい
ました
参考文献
• サバクラ両方で動く JavaScript の大規模
開発を行うために(https://gist.github.com/
tily/1362110)

backbone.jsの使用例 その1