際際滷

脱しい繁のためのBackbone.jsと
Angular.js秘�T
2014/03/20

なぜフレ�`ムワ�`クが駅勣か
? (�g�晒した)措くあるJavaScriptアプリケ�`ショ
ン
� クリックされると
� フォ�`ムの坪否を函誼し
て
� Ajax僕佚し、
∠ �Y惚を宙鮫する
POST http://example.com/status
{"text" : "aaaa"}
----
{"text" : "hi! aaaa"}

jQueryで��gに�g廾�
http://jsfiddle.net/EdXzC/
��gですね�

jQueryで��gに�g廾�
? 採が��}か�

��が�}�jになったら???
? フォ�`ムの�朕が寄楚になったら???
? 宙鮫するHTMLが�}�jになったら???
? AJAXの撹孔�Y惚を鞭けて�B�咾垢�I尖が��
えたら???
? �O�するDOMイベントが��えたら???

フォ�`ムの�朕が寄楚になったら???
ここが��える

宙鮫するHTMLが�}�jになったら???

AJAXの撹孔�Y惚を鞭けて�B�咾垢�I
尖が��えたら???

�O�するDOMイベントが��えたら???

��が�}�jになったら???
? ソ�`スコ�`ドの�宥しが��くスパゲッティ晒し、
あとからソ�`スを�たときに盾�iが�yしくなる。
? どこに俐屎を紗えていいかわかりづらい
? 俐屎がどこに唹�するかわかりづらい
隠便來の寄嫌な詰和�

どこが��いのか�
DOMイベントハンドラの嶄
に

AJAXの�I尖が�峰され、

Model(ここではデ�`タ)をDOM
から�､鯣ゝ辰靴��Bし、

? イベントハンドリング
? モデルの��B
? AJAX宥佚�I尖
? Viewの厚仟
?を1カ侭に�g廾しているのが��い。

個鋲その１゛イベントハンドラの蛍�x゛
? http://jsfiddle.net/Y49kF/

個鋲その2 ゛View厚仟�I尖の蛍�x゛
? http://jsfiddle.net/bL9R6/

個鋲その3 ゛デ�`タとAjax宥佚の蛍�x゛
? http://jsfiddle.net/wF4tX/

個鋲その4 ゛ModelからViewの蛍�x゛
? http://jsfiddle.net/zs4tx/

こういうアプリケ�`ションの恬り圭を
フレ�`ムワ�`ク晒したい
? 廣吭� MVC堝？は梨れましょう
�C 遊の嶄の珂閣遺モデルは�里討討�世気�

Backbone.js
? http://jsfiddle.net/827eH/

Backbone.js
? http://jsfiddle.net/827eH/
Model秤��
イベントマッピング
テンプレ�`ト
Ajax宥佚�I尖
Ajaxコ�`ルバック�I尖

Backbone.js
(よりBackboneらしい��Ⅲ�)
? http://jsfiddle.net/A7qj3/

Backbone.js
コ�`ルバックを岷俊��
pub/subパタ�`ンで�I尖
イベントを��i

Backbone.js
this.collectionが＾add￣イベントを�k佩
this.collectionの＾add￣イベントが�k
佩されたら、this.addLineを�g佩する

Backbone.js
(さらにBackboneらしい��Ⅲ�)
? http://jsfiddle.net/AST2V/

Backbone.js
(さらにBackboneらしい��Ⅲ�)
? http://jsfiddle.net/AST2V/
吭龍のある(崙囮する)DOMの�g了で
Viewを蛍護する

閣庄艶敬の蛍護
NewStatusView
StatusesView
StatusLineView

デ�`タバインディングを個鋲
jQueryのセレクタで�､鰔擦�
匯つ函誼してModelに�O協
jQueryのセレクタで匯つ匯つ
DOMを厚仟

? Backbone.stickitを��
? http://jsfiddle.net/S66eE/

? Backbone.stickitを��
? http://jsfiddle.net/S66eE/
DOMの勣殆とModel
の奉來とのマッピング
協�x
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コ�`ド�R�sした��蓮�篳�
兆が�笋錣辰討靴泙Δ燭瓠��承弔�
アノテ�`トするのがベタ�`。

Angular.js
? http://jsfiddle.net/HALKq/
徭�啝�挑`ルあり
https://github.com/btford/ngmin

Angular.jsのア�`キテクチャ
��籌�(してないけど)

Backbone.js or Angular.js
? 書指のサンプルだと�R宜議にBackboneが音
旋�

際際滷

脱しい繁のための京温界一恢看稼艶.逮壊と粥稼乙顎鉛温姻.逮壊秘壇

Recommended

More Related Content

Viewers also liked (12)

Similar to 脱しい繁のための京温界一恢看稼艶.逮壊と粥稼乙顎鉛温姻.逮壊秘壇 (20)

More from Toshiaki Maki (20)

Recently uploaded (8)

脱しい繁のための京温界一恢看稼艶.逮壊と粥稼乙顎鉛温姻.逮壊秘壇