1. BackboneJS
2013.6.8 @Build Insider
13年6月10日月曜日

2. 自己紹介
清水 大輔
LINE 株式会社
twitter: @tori3_jp
Web先端技術味見部 課長
13年6月10日月曜日

3. Agenda
Backbonejsとは
デモアプリ
テスト、パフォーマンス
13年6月10日月曜日

4. Backbonejsとは
MV*アプリを作る手助けとなるJavaScriptライブラリ
オブジェクト思考、MVCについての知識が必要
動的要素が少ないページでは不要
13年6月10日月曜日

5. 自由なデザイン、体験を提供するフレームワーク
“Backbone should continue to be a tool that gives you the freedom to design
the full experience of your web application.”
13年6月10日月曜日

6. Plugin, Utility
backbone relational
backbone forms
marionettejs
backbone boilerplate
13年6月10日月曜日

7. Popularity
http://caliper.io/blog/2013/Javascript-Framework-Popularity/
13年6月10日月曜日

8. jQuery (Zepto, Ender)
underscore.js ( lo-dash)
json2.js
13年6月10日月曜日

9. Backbone.Event
Backbone.Model
Backbone.Collection
Backbone.View
Backbone.Sync
Backbone.Router
13年6月10日月曜日

10. DEMO
13年6月10日月曜日

11. Event
Observerパターン
イベント通知 & 監視
13年6月10日月曜日

12. Model & Collection
データの保持、検証、操作
内部的にunderscoreを多用
13年6月10日月曜日

13. View
DOMの操作、DOM Eventの処理
template (underscore, mustache...)
13年6月10日月曜日

14. Sync
REST API (GET, POST, PUT, DELETE, PATCH)
Model, Collectionから処理を移譲
{wait: true} サーバーレスポンスを待つ
13年6月10日月曜日

15. Router
pushState
permalink
SEO
13年6月10日月曜日

16. Test
DOMからビジネスロジックが分離
ユニットテストが書きやすくなる(jasmine, mocha ...)
Grunt.js
13年6月10日月曜日

17. DEMO
13年6月10日月曜日

18. パフォーマンス
DOM
メモリ管理
通信
13年6月10日月曜日

19. DOM
reflow、repaintを減らす
document.createDocumentFragment();
イベントの発生、処理をコントロール ex. {silent:true}
delegate event
13年6月10日月曜日

20. メモリ管理
on(), off()でview <=> model間の参照が残りメモリーリークを引き起
こす
1.0でlistenTo(), stopListener()が追加view#remove()で暗黙的
にstopListener()がcallさせる
view#removeでの後処理を意識する
13年6月10日月曜日

21. 通信
データを集約してリクエスト減らす
localStorageをキャッシュとして使う
13年6月10日月曜日

22. まとめ
軽量、シンプルなので気軽に使えます
テストを書きましょう
MV* Frameworkを使うのは当たり前になる（なってい
る？）
13年6月10日月曜日

23. https://github.com/tori3/backbone_demo
13年6月10日月曜日

24. Thanks
13年6月10日月曜日