前に作った簡易資料

1. 忙しい人のためのBackbone.jsと
Angular.js入門
2014/03/20

2. なぜフレームワークが必要か
• (単純化した)良くあるJavaScriptアプリケーショ
ン
① クリックされると
② フォームの内容を取得し
て
③ Ajax送信し、
④ 結果を描画する
POST http://example.com/status
{"text" : "aaaa"}
----
{"text" : "hi! aaaa"}

3. jQueryで簡単に実装！
http://jsfiddle.net/EdXzC/
簡単ですね！

4. jQueryで簡単に実装！
• 何が問題か？

5. 対象が複雑になったら・・・
• フォームの項目が大量になったら・・・
• 描画するHTMLが複雑になったら・・・
• AJAXの成功結果を受けて連動する処理が増
えたら・・・
• 監視するDOMイベントが増えたら・・・

6. フォームの項目が大量になったら・・・
ここが増える

7. 描画するHTMLが複雑になったら・・・
ここが増える

8. AJAXの成功結果を受けて連動する処
理が増えたら・・・
ここが増える

9. 監視するDOMイベントが増えたら・・・
ここが増える

10. 対象が複雑になったら・・・
• ソースコードの見通しが悪くスパゲッティ化し、
あとからソースを見たときに解読が難しくなる。
• どこに修正を加えていいかわかりづらい
• 修正がどこに影響するかわかりづらい
保守性の大幅な低下！

11. どこが悪いのか？

12. どこが悪いのか？
DOMイベントハンドラの中
に

13. どこが悪いのか？
AJAXの処理が記述され、

14. どこが悪いのか？
Model(ここではデータ)をDOM
から値を取得して構築し、

15. どこが悪いのか？
• イベントハンドリング
• モデルの構築
• AJAX通信処理
• Viewの更新
•を1カ所に実装しているのが悪い。

16. 改善その１ ～イベントハンドラの分離～
• http://jsfiddle.net/Y49kF/

17. 改善その2 ～View更新処理の分離～
• http://jsfiddle.net/bL9R6/

18. 改善その3 ～データとAjax通信の分離～
• http://jsfiddle.net/wF4tX/

19. 改善その4 ～ModelからViewの分離～
• http://jsfiddle.net/zs4tx/

20. こういうアプリケーションの作り方を
フレームワーク化したい
• 注意： MVC云々は忘れましょう
– 頭の中のMVCモデルは捨ててください

21. Backbone.js
• http://jsfiddle.net/827eH/

22. Backbone.js
• http://jsfiddle.net/827eH/
Model情報
イベントマッピング
テンプレート
Ajax通信処理
Ajaxコールバック処理

23. Backbone.js
(よりBackboneらしい書き方)
• http://jsfiddle.net/A7qj3/

24. Backbone.js
(よりBackboneらしい書き方)
• http://jsfiddle.net/A7qj3/
コールバックを直接書かず
pub/subパターンで処理
イベントを購読

25. Backbone.js
(よりBackboneらしい書き方)
• http://jsfiddle.net/A7qj3/
this.collectionが“add”イベントを発行
this.collectionの“add”イベントが発
行されたら、this.addLineを実行する

26. Backbone.js
(さらにBackboneらしい書き方)
• http://jsfiddle.net/AST2V/

27. Backbone.js
(さらにBackboneらしい書き方)
• http://jsfiddle.net/AST2V/
意味のある(制御する)DOMの単位で
Viewを分割する

28. Viewの分割

29. Viewの分割
NewStatusView
StatusesView
StatusLineView

30. データバインディングを改善
jQueryのセレクタで値を一つ
一つ取得してModelに設定
jQueryのセレクタで一つ一つ
DOMを更新

31. • Backbone.stickitを導入
• http://jsfiddle.net/S66eE/
データバインディングを改善

32. • Backbone.stickitを導入
• http://jsfiddle.net/S66eE/
データバインディングを改善
DOMの要素とModel
の属性とのマッピング
定義
this.modelとthis.$el
のバインディング
フォームを更新すると勝手に
modelもアップデート
modelを更新するとフォームも
勝手にもアップデート

33. Backbone.jsのアーキテクチャ
準備中(してないけど)

34. Angular.js
• http://jsfiddle.net/nmCTY/

35. Angular.js (よりangularらしい書き方)
• http://jsfiddle.net/F3mAv/

36. Angular.js (よりangularらしい書き方)
• http://jsfiddle.net/F3mAv/
ＤＩ

37. Angular.js
• http://jsfiddle.net/HALKq/
Angular.jsは変数名でDIしてくれるが、
JavaScriptコード圧縮した場合、変数
名が変わってしまうため、明示的に
アノテートするのがベター。

38. Angular.js
• http://jsfiddle.net/HALKq/
自動化ツールあり
https://github.com/btford/ngmin

39. Angular.jsのアーキテクチャ
準備中(してないけど)

40. Backbone.js or Angular.js
• 今回のサンプルだと圧倒的にBackboneが不
利！