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
event...
backbone.jsとは?
・サーバーとJSONでやりとりするRESTfulインタ
ーフェース
・key-value型のデータ(属性の設定)とカスタムイベ
ントを持つモデル
・複数のモデルを扱うためのAPIを持つコレクション
・イベントハンド...
MVCの話はどこ?
webアプリケーション
(Railsとか)
Controller
Model View
Dispatcher
App Server
Web Browser
HTTP Request HTTP Response
データの取得と操作
データの受け渡し
HTMLのレンダリング
レンダリングが完...
Webアプリケーション
のMVC(Model 2)
• 重い Model と軽い Controller
• Viewは永続化しない
• HTTPはステートレスなのでViewに状
態を保持する必要がない(Session
Cookieで保持)
• ...
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)
Upcoming SlideShare
Loading in...5
×

backbone.jsの使用例 その1

1,123

Published on

backbone.jsの使用例 その1

  1. 1. backbone.jsの使用例 その➀ @Spring_MT
  2. 2. 自己紹介 @Spring_MT Infra and App Engineer
  3. 3. backbone.jsとは? 一言でいうと。。。
  4. 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. 5. backbone.jsとは? ・サーバーとJSONでやりとりするRESTfulインタ ーフェース ・key-value型のデータ(属性の設定)とカスタムイベ ントを持つモデル ・複数のモデルを扱うためのAPIを持つコレクション ・イベントハンドリングを行うビュー
  6. 6. MVCの話はどこ?
  7. 7. webアプリケーション (Railsとか)
  8. 8. Controller Model View Dispatcher App Server Web Browser HTTP Request HTTP Response データの取得と操作 データの受け渡し HTMLのレンダリング レンダリングが完了した HTMLを含むHTTP Response
  9. 9. Webアプリケーション のMVC(Model 2) • 重い Model と軽い Controller • Viewは永続化しない • HTTPはステートレスなのでViewに状 態を保持する必要がない(Session Cookieで保持) • ControllerはModelをViewをつなぐ糊
  10. 10. GoFのMVC (伝統的なMVC)
  11. 11. Controller Model View User Interaction データの操作 操作の内容を渡す イベントを発火
  12. 12. MVC • 永続的なView と交換可能な Controller
  13. 13. MVC • 同じMVCという単語でも、コンテキス トによって、内容が変わってくる
  14. 14. backboneのMVC
  15. 15. Collection Model View Router DOM 更新イベント発火 Controller イベントを発火データの操作 User Interaction OnHashChange PushState
  16. 16. backbone.js • Viewの中にビューメソッド(描画)とコン トローラーメソッド(ロジック)を分ける • Controllerは基本でてこない • ModelはCollection経由で操作する
  17. 17. フレームワークとは • アプリケーションの構築、管理を簡単 にするための道具
  18. 18. backbone.js ・サーバーとJSONでやりとりするRESTfulインタ ーフェース ・key-value型のデータ(属性の設定)とカスタムイベ ントを持つモデル ・豊富なリスト操作用のAPIを持つコレクション ・イベントハンドリングを行うビュー
  19. 19. 実際に使ってみる
  20. 20. ただ、サンプルアプ リは使わないYO
  21. 21. だってわかりづr(ry
  22. 22. その前に
  23. 23. require.js • モジュールの依存管理 • minify
  24. 24. では使ってみる コードを元に説明します
  25. 25. クライアントサイド • i18n対応どうするのか? • render • validation • i18n用のモジュールもあるが使うのか?
  26. 26. ご清聴有難うござい ました
  27. 27. 参考文献 • サバクラ両方で動く JavaScript の大規模 開発を行うために(https://gist.github.com/ tily/1362110)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×