BACKBONE.JSによるWebアプリケーション開発について

HTML5と最近のフロントエンド事情

フロントエンドとJavaScript
JavaScriptのMV*向けライブラリ
BACKBONE.JSによるWebアプリケーション開発について

2013/11/16(土) オープンソースカンファレンス 2013 Fukuoka
写真はWeb制作向け無料写真素材／ぱくたそ http://www.pakutaso.comを使ってます。ありがとうございます。

自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJSで作って暮らしてます。
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい！
・JavaEEとJSを仲良くさせたい！
・コミュニティの力で福岡を一つに！景気上昇↑雇用拡大↑
・生涯福岡でエンジニアしたい！

!

さてさて、今日のお話は
===============
!

jQueryのみで大きな規模のWebアプリを書くと
JSが非常に読みにくくなります。
!

そこで読みやすいコードを書く為に
Backbone.jsとMV*の考え方を導入しました。
!

結果良かった点、悪かった点をお話したいと思います。
!

どうぞよろしくお願いいたします！

(

ところで、MV*って何？

MV*とはModel(データ)とView(DOM描画)を分離する事をいいます。
(MVC、MVVM、MVP…一杯ありますがよく分からないのでまとめてMV*って表現してます)

ViewはModelの変更結果を反映する仕組みを持ちます。

(

あぁ、MVCね。既にMVCやってるよ？

注

・o・

意

ブラウザ
View
HTML

今日お話しするのは
サーバサイドでHTMLを
生成するMVCではありません。

Controller
Model

業務ロジック

View
HTML生成

Model

業務ロジック

Webサーバ

注
意

ブラウザ
View

クライアント(ブラウザ)側で
HTMLを生成するJavaScriptを
ModelとViewで分ける話です。

View

HTML

・o・

JSでHTML生成

Model

表示情報

XML/JSON

WebサービスAPI

Model

業務ロジック

Model

業務ロジック

Webサーバ

(

えっ、JavaScriptで分離？どうやってするの？

ModelとViewで分ける人気JSライブラリと言えば…
!

Angular.js （アンギュラージェイエス）
Knockout.js（ノックアウトジェイエス）
Backbone.js（バックボーンジェイエス）
!

この３つが有名です！

Googleトレンドで調べてみると…..

私は、Backbone.jsが推しなんですけど…
AngularJSが最近人気の急上昇みたいです。(ショック)
＼今日は Backbone.jsの説明します！／

(

JavaScriptでMV*ライブラリ？そんな大袈裟な…

では、Backbone.js導入前に起きた問題をご紹介します！

こういうWebアプリを作る事になりました。

連絡先一覧
阿部辛抱

池面太郎

池面太郎

イケメンタロウ


池面太郎
島次郎

○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○
○○○○○。

○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○
○○○○○。

蛇場好尾
編集

登録

キャンセ

* 左の連絡先一覧を選ぶと右に詳細が表示される
* 編集ボタンで詳細編集可能

3人のチームです。
A君とB君がフロントを担当で
もう一人(鯖君)がJSONを返却するAPIを担当します。

HTML
CSS
JavaScript
A君

B君

JSON

なんか
JSONを返す
WebAPIサーバ

君

A君とB君は仲良く役割を分担し、プロジェクト開始されました。

連絡先一覧

池面太郎
阿部辛抱

池面太郎
島次郎
蛇場好尾

A君

暗黒美夢

サーバのJSONデータを
取得して表示するよ

○○○○○○○○○○○○○
○○○○○○○○○○○○○
○○○○○○○○○○○。
編集

B君

左で選んだ連絡先詳細表示と
内容を編集するよ

おっと！？開始そうそう二人の様子が！？

(╬⊙д⊙)

B君

Clickイベントが探しにくい！

A君

情報を編集しにくい！

えぇっ！
じゃぁどうすればいいのよ！

もう、仲良くしてよ〜 (ToT

君

B君はお怒りの様子…
では、A君のソースを見てみましょう！

一覧を表示する為、Ajaxから取得したデータを描画してます。

描画情報

DOMイベント処理

DetailView#showメソッドを呼び出し

怒るような問題ないですよね。
でも、このままソースが長くなると…

あちこちにDOMイベントが点在すると
とっても探しにくくなりますね。

他の人が書いたJSは、どこにDOMイベントが
書いているのか分かりにくいものですね。
ではどうすれば良いのでしょうか？
Backbone.jsを用いた解決方法を示します。

Backbone.jsでは DOMイベントとハンドラの組み合わせを

events という決まった位置に記載します。
どこにイベントが書いてあるか迷わないですね！ (^-^

Clickイベントが探しにくい！
情報を編集しにくいよ！(╬⊙д⊙)

次は情報について考えましょう！

B君

現状の表示情報（データ）の取り扱い
イメージはこんな感じです。

状

現

表示データ

＼AJaxで取得／

一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

A君

B君

状

現

表示データ
一覧表示
＼DOMに反映！／ ListView

詳細表示
DetailView

DOM参照

DOM参照

A君
＼おっ出た！／

B君

状

現

＼選択時にデータの参照を渡す！／

表示データ

表示データ

一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

A君

B君

状

現

表示データ

表示データ

一覧表示
ListView

詳細表示
DetailView ＼DOMに反映！／

DOM参照

DOM参照

A君

B君＼お〜出た！／

状

現

表示データ

表示データ

一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

A君

B君

＼編集！／

状

現

表示データ

表示データ

一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

反映されない…

A君

B君

＼あれ？／

ではMV＊はどんな仕組みになるのでしょうか？

復習しましょう〜！ポイントは２つ。
Model(データ)と View(DOM描画)を分離する
ViewはModelの変更結果を反映する

V*
M

表示データ
＼AJaxで取得／
表示情報
DataModel

一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

A君

B君

V*
M

＼表示データ変更イベント発生！／

DataModel
＼データ変更に気づく！／

表示データ

＼データ変更に気づく！／

！

！
一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

A君

B君

V*
M

DataModel
表示データ

＼自動反映／
一覧表示
ListView
＼DOMに反映／

詳細表示
DetailView

DOM参照

DOM参照

＼DOMに反映／

A君

B君

＼お〜出た！／


V*
M

DataModel
表示データ

一覧表示
ListView

詳細表示
DetailView

DOM参照

DOM参照

A君

B君

＼編集／

V*
M

DataModel
表示データ

＼自動反映／
一覧表示
ListView
＼DOMに反映／

詳細表示
DetailView

DOM参照

DOM参照

A君

常に表示データが
反映される！


＼DOMに反映／

B君


V*
M

DataModel
表示データ

＼自動反映／

＼自動反映／

＼自動反映／

ListView

DetailView

HogeView

Fuga

DOM参照

DOM参照

DOM参照

DOM

何個VIewがあっても常に最新データが表示されるよ

Modelデータに連動するView(DOM表示)が増えるほど
MV*パターンは勝手に連動してくれて便利ですね！
Backbone.jsでは ModelデータとView(DOM描画)の
連動をどう書くのでしょうか？

イベント監視機能(listenTo)を使います。
this.list(Model)の監視とメソッド登録しています。

一覧情報モデル(this.listData)にて
reset発生時にcreateRenderメソッドが呼ばれます。
ここに一覧の描画処理を書きます。

一覧情報モデル(this.listData)にて
change発生時にupdateRenderメソッドが呼ばれます。
ここに一覧の描画処理を書きます。

A君

直したよ〜（どや！

B君

わぁ〜、読みやすくなったわ〜

お互いのJSに影響が少なくコーディング出来ます。
これで仲良しですね！めでたしめでたし。

!
!

Backbone.jsを導入してよかった点
=====================
!

DOM操作イベントの記述場所が決まってJSが読みやすい!
!

Modelイベント監視のlisetnToが便利！
!

やんわりとJSソースの構造にルールが出来る！
!

DOM操作がModelに無いのでテストが書きやすい！
!

!
!

Backbone.jsを導入で困っている点
=====================
!

JSコーディングが遅くなっちゃう
ModelとViewの設計が必要。鍛錬しないとサクサク書けません..

!

Modelデータ反映の記述は必要
でも、backbone.stickitというのを使うと出来るらしいですよ。

!

ルール違反して書けちゃう
→結局、JSを書く為には自分に厳しくなくちゃいけないです。

なんだかんだMV*ライブラリを使うとJSがきれいになります！
是非使ってみてくださいね！

以上で私の発表は終わりです。ご清聴ありがとうございました！

HTML5@福岡のボス @akase244さんに交代します！

BACKBONE.JSによるWebアプリケーション開発について

More Related Content

BACKBONE.JSによるWebアプリケーション開発について