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

忙しい人のための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カ所に実装しているのが悪い。

改善その１～イベントハンドラの分離～ • 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の分割 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/ ＤＩ

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入門

More Related Content

What's hot

Viewers also liked

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

More from Toshiaki Maki

Recently uploaded

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