Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

忙しい人のためのBackbone.jsとAngular.js入門

前に作った簡易資料

Related Books

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

忙しい人のためのBackbone.jsとAngular.js入門

  1. 1. 忙しい人のためのBackbone.jsと Angular.js入門 2014/03/20
  2. 2. なぜフレームワークが必要か • (単純化した)良くあるJavaScriptアプリケーショ ン ① クリックされると ② フォームの内容を取得し て ③ Ajax送信し、 ④ 結果を描画する POST http://example.com/status {"text" : "aaaa"} ---- {"text" : "hi! aaaa"}
  3. 3. jQueryで簡単に実装! http://jsfiddle.net/EdXzC/ 簡単ですね!
  4. 4. jQueryで簡単に実装! • 何が問題か?
  5. 5. 対象が複雑になったら・・・ • フォームの項目が大量になったら・・・ • 描画するHTMLが複雑になったら・・・ • AJAXの成功結果を受けて連動する処理が増 えたら・・・ • 監視するDOMイベントが増えたら・・・
  6. 6. フォームの項目が大量になったら・・・ ここが増える
  7. 7. 描画するHTMLが複雑になったら・・・ ここが増える
  8. 8. AJAXの成功結果を受けて連動する処 理が増えたら・・・ ここが増える
  9. 9. 監視するDOMイベントが増えたら・・・ ここが増える
  10. 10. 対象が複雑になったら・・・ • ソースコードの見通しが悪くスパゲッティ化し、 あとからソースを見たときに解読が難しくなる。 • どこに修正を加えていいかわかりづらい • 修正がどこに影響するかわかりづらい 保守性の大幅な低下!
  11. 11. どこが悪いのか?
  12. 12. どこが悪いのか? DOMイベントハンドラの中 に
  13. 13. どこが悪いのか? AJAXの処理が記述され、
  14. 14. どこが悪いのか? Model(ここではデータ)をDOM から値を取得して構築し、
  15. 15. どこが悪いのか? • イベントハンドリング • モデルの構築 • AJAX通信処理 • Viewの更新 •を1カ所に実装しているのが悪い。
  16. 16. 改善その1 ~イベントハンドラの分離~ • http://jsfiddle.net/Y49kF/
  17. 17. 改善その2 ~View更新処理の分離~ • http://jsfiddle.net/bL9R6/
  18. 18. 改善その3 ~データとAjax通信の分離~ • http://jsfiddle.net/wF4tX/
  19. 19. 改善その4 ~ModelからViewの分離~ • http://jsfiddle.net/zs4tx/
  20. 20. こういうアプリケーションの作り方を フレームワーク化したい • 注意: MVC云々は忘れましょう – 頭の中のMVCモデルは捨ててください
  21. 21. Backbone.js • http://jsfiddle.net/827eH/
  22. 22. Backbone.js • http://jsfiddle.net/827eH/ Model情報 イベントマッピング テンプレート Ajax通信処理 Ajaxコールバック処理
  23. 23. Backbone.js (よりBackboneらしい書き方) • http://jsfiddle.net/A7qj3/
  24. 24. Backbone.js (よりBackboneらしい書き方) • http://jsfiddle.net/A7qj3/ コールバックを直接書かず pub/subパターンで処理 イベントを購読
  25. 25. Backbone.js (よりBackboneらしい書き方) • http://jsfiddle.net/A7qj3/ this.collectionが“add”イベントを発行 this.collectionの“add”イベントが発 行されたら、this.addLineを実行する
  26. 26. Backbone.js (さらにBackboneらしい書き方) • http://jsfiddle.net/AST2V/
  27. 27. Backbone.js (さらにBackboneらしい書き方) • http://jsfiddle.net/AST2V/ 意味のある(制御する)DOMの単位で Viewを分割する
  28. 28. Viewの分割
  29. 29. Viewの分割 NewStatusView StatusesView StatusLineView
  30. 30. データバインディングを改善 jQueryのセレクタで値を一つ 一つ取得してModelに設定 jQueryのセレクタで一つ一つ DOMを更新
  31. 31. • Backbone.stickitを導入 • http://jsfiddle.net/S66eE/ データバインディングを改善
  32. 32. • Backbone.stickitを導入 • http://jsfiddle.net/S66eE/ データバインディングを改善 DOMの要素とModel の属性とのマッピング 定義 this.modelとthis.$el のバインディング フォームを更新すると勝手に modelもアップデート modelを更新するとフォームも 勝手にもアップデート
  33. 33. Backbone.jsのアーキテクチャ 準備中(してないけど)
  34. 34. Angular.js • http://jsfiddle.net/nmCTY/
  35. 35. Angular.js (よりangularらしい書き方) • http://jsfiddle.net/F3mAv/
  36. 36. Angular.js (よりangularらしい書き方) • http://jsfiddle.net/F3mAv/ DI
  37. 37. Angular.js • http://jsfiddle.net/HALKq/ Angular.jsは変数名でDIしてくれるが、 JavaScriptコード圧縮した場合、変数 名が変わってしまうため、明示的に アノテートするのがベター。
  38. 38. Angular.js • http://jsfiddle.net/HALKq/ 自動化ツールあり https://github.com/btford/ngmin
  39. 39. Angular.jsのアーキテクチャ 準備中(してないけど)
  40. 40. Backbone.js or Angular.js • 今回のサンプルだと圧倒的にBackboneが不 利!

×