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

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