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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

backbone.jsの使用例 その1

1,010
views

Published on


0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,010
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
6
Embeds 0
No embeds

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)

×