backbone.jsの使用例 その1
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,417
On Slideshare
1,416
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
6

Embeds 1

http://s.deeeki.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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