backbone.jsの使用例 その1
-
Upload
makoto-haruyama -
Category
Documents
-
view
1.446 -
download
2
description
Transcript of backbone.jsの使用例 その1
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
CollectionModel
View
Router
DOM
更新イベント発火
Controller
イベントを発火データの操作
User Interaction
OnHashChangePushState
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)