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

37,075 views

Published on

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

「オープンソースカンファレンス 2013 福岡」の
HTML5と最近のフロントエンド事情で発表した資料です。

0 Comments
87 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
37,075
On SlideShare
0
From Embeds
0
Number of Embeds
8,429
Actions
Shares
0
Downloads
100
Comments
0
Likes
87
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5と最近のフロントエンド事情 フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 2013/11/16(土) オープンソースカンファレンス 2013 Fukuoka 写真はWeb制作向け無料写真素材/ぱくたそ http://www.pakutaso.comを使ってます。ありがとうございます。
  2. 2. 自己紹介です ======== 江原と申します。(@itokami1123) 福岡で業務アプリをJSで作って暮らしてます。 こんな野望が持ってます。 ・業務系WebアプリのUIをモット使いやすくしたい! ・JavaEEとJSを仲良くさせたい! ・コミュニティの力で福岡を一つに!景気上昇↑雇用拡大↑ ・生涯福岡でエンジニアしたい!
  3. 3. ! さてさて、今日のお話は =============== ! jQueryのみで大きな規模のWebアプリを書くと JSが非常に読みにくくなります。 ! そこで読みやすいコードを書く為に Backbone.jsとMV*の考え方を導入しました。 ! 結果良かった点、悪かった点をお話したいと思います。 ! どうぞよろしくお願いいたします!
  4. 4. ( ところで、MV*って何?
  5. 5. MV*とはModel(データ)とView(DOM描画)を分離する事をいいます。 (MVC、MVVM、MVP…一杯ありますがよく分からないのでまとめてMV*って表現してます) ViewはModelの変更結果を反映する仕組みを持ちます。
  6. 6. ( あぁ、MVCね。既にMVCやってるよ?
  7. 7. 注 ・o・ 意 ブラウザ View HTML 今日お話しするのは サーバサイドでHTMLを 生成するMVCではありません。 Controller Model 業務ロジック View HTML生成 Model 業務ロジック Webサーバ
  8. 8. 注 意 ブラウザ View クライアント(ブラウザ)側で HTMLを生成するJavaScriptを ModelとViewで分ける話です。 View HTML ・o・ JSでHTML生成 Model 表示情報 XML/JSON WebサービスAPI Model 業務ロジック Model 業務ロジック Webサーバ
  9. 9. ( えっ、JavaScriptで分離?どうやってするの?
  10. 10. ModelとViewで分ける人気JSライブラリと言えば… ! Angular.js (アンギュラージェイエス) Knockout.js(ノックアウトジェイエス) Backbone.js(バックボーンジェイエス) ! この3つが有名です!
  11. 11. Googleトレンドで調べてみると….. 私は、Backbone.jsが推しなんですけど… AngularJSが最近人気の急上昇みたいです。(ショック) \今日は Backbone.jsの説明します!/
  12. 12. ( JavaScriptでMV*ライブラリ?そんな大袈裟な…
  13. 13. では、Backbone.js導入前に起きた問題をご紹介します!
  14. 14. こういうWebアプリを作る事になりました。 連絡先一覧 阿部 辛抱 池面 太郎 池面 太郎 イケメン タロウ イケメン タロウ 池面 太郎 島 次郎 ○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○ ○○○○○。 ○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○ ○○○○○。 蛇場 好尾 編集 登録 キャンセ * 左の連絡先一覧を選ぶと右に詳細が表示される * 編集ボタンで詳細編集可能
  15. 15. 3人のチームです。 A君とB君がフロントを担当で もう一人(鯖君)がJSONを返却するAPIを担当します。 HTML CSS JavaScript A君 B君 JSON なんか JSONを返す WebAPIサーバ 君
  16. 16. A君とB君は仲良く役割を分担し、プロジェクト開始されました。 連絡先一覧 池面 太郎 阿部 辛抱 イケメン タロウ 池面 太郎 島 次郎 蛇場 好尾 A君 暗黒 美夢 サーバのJSONデータを 取得して表示するよ ○○○○○○○○○○○○○ ○○○○○○○○○○○○○ ○○○○○○○○○○○。 編集 B君 左で選んだ連絡先詳細表示と 内容を編集するよ
  17. 17. おっと!?開始そうそう二人の様子が!? (╬⊙д⊙) B君 Clickイベントが探しにくい! A君 情報を編集しにくい! えぇっ! じゃぁどうすればいいのよ! もう、仲良くしてよ〜 (ToT 君
  18. 18. B君はお怒りの様子… では、A君のソースを見てみましょう!
  19. 19. 一覧を表示する為、Ajaxから取得したデータを描画してます。 描画情報 DOMイベント処理 DetailView#showメソッドを呼び出し 怒るような問題ないですよね。 でも、このままソースが長くなると…
  20. 20. あちこちにDOMイベントが点在すると とっても探しにくくなりますね。
  21. 21. 他の人が書いたJSは、どこにDOMイベントが 書いているのか分かりにくいものですね。 ではどうすれば良いのでしょうか? Backbone.jsを用いた解決方法を示します。
  22. 22. Backbone.jsでは DOMイベントとハンドラの組み合わせを events という決まった位置に記載します。 どこにイベントが書いてあるか迷わないですね! (^-^
  23. 23. Clickイベントが探しにくい! 情報を編集しにくいよ!(╬⊙д⊙) 次は情報について考えましょう! B君
  24. 24. 現状の表示情報(データ)の取り扱い イメージはこんな感じです。
  25. 25. 状 現 表示データ \AJaxで取得/ 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君
  26. 26. 状 現 表示データ 一覧表示 \DOMに反映!/ ListView 詳細表示 DetailView DOM参照 DOM参照 A君 \おっ出た!/ B君
  27. 27. 状 現 \選択時にデータの参照を渡す!/ 表示データ 表示データ 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君
  28. 28. 状 現 表示データ 表示データ 一覧表示 ListView 詳細表示 DetailView \DOMに反映!/ DOM参照 DOM参照 A君 B君 \お〜出た!/
  29. 29. 状 現 表示データ 表示データ 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君 \編集!/
  30. 30. 状 現 表示データ 表示データ 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 反映されない… A君 B君 \あれ?/
  31. 31. ではMV*はどんな仕組みになるのでしょうか? 復習しましょう〜!ポイントは2つ。 Model(データ)と View(DOM描画)を分離する ViewはModelの変更結果を反映する
  32. 32. V* M 表示データ \AJaxで取得/ 表示情報 DataModel 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君
  33. 33. V* M \表示データ変更イベント発生!/ DataModel \データ変更に気づく!/ 表示データ \データ変更に気づく!/ ! ! 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君
  34. 34. V* M DataModel 表示データ \自動反映/ 一覧表示 ListView \DOMに反映/ 詳細表示 DetailView DOM参照 DOM参照 \DOMに反映/ A君 B君 \お〜出た!/ \お〜出た!/
  35. 35. V* M DataModel 表示データ 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君 \編集/
  36. 36. V* M \表示データ変更イベント発生!/ DataModel \データ変更に気づく!/ 表示データ \データ変更に気づく!/ ! ! 一覧表示 ListView 詳細表示 DetailView DOM参照 DOM参照 A君 B君
  37. 37. V* M DataModel 表示データ \自動反映/ 一覧表示 ListView \DOMに反映/ 詳細表示 DetailView DOM参照 DOM参照 A君 常に表示データが 反映される! \お〜出た!/ \DOMに反映/ B君 \お〜出た!/
  38. 38. V* M DataModel 表示データ \自動反映/ \自動反映/ \自動反映/ ListView DetailView HogeView Fuga DOM参照 DOM参照 DOM参照 DOM 何個VIewがあっても常に最新データが表示されるよ
  39. 39. Modelデータに連動するView(DOM表示)が増えるほど MV*パターンは勝手に連動してくれて便利ですね! Backbone.jsでは ModelデータとView(DOM描画)の 連動をどう書くのでしょうか?
  40. 40. イベント監視機能(listenTo)を使います。 this.list(Model)の監視とメソッド登録しています。 一覧情報モデル(this.listData)にて reset発生時にcreateRenderメソッドが呼ばれます。 ここに一覧の描画処理を書きます。 一覧情報モデル(this.listData)にて change発生時にupdateRenderメソッドが呼ばれます。 ここに一覧の描画処理を書きます。
  41. 41. A君 直したよ〜(どや! B君 わぁ〜、読みやすくなったわ〜 お互いのJSに影響が少なくコーディング出来ます。 これで仲良しですね!めでたしめでたし。
  42. 42. まとめ!
  43. 43. ! ! Backbone.jsを導入してよかった点 ===================== ! DOM操作イベントの記述場所が決まってJSが読みやすい! ! Modelイベント監視のlisetnToが便利! ! やんわりとJSソースの構造にルールが出来る! ! DOM操作がModelに無いのでテストが書きやすい! !
  44. 44. ! ! Backbone.jsを導入で困っている点 ===================== ! JSコーディングが遅くなっちゃう ModelとViewの設計が必要。鍛錬しないとサクサク書けません.. ! Modelデータ反映の記述は必要 でも、backbone.stickitというのを使うと出来るらしいですよ。 ! ルール違反して書けちゃう →結局、JSを書く為には自分に厳しくなくちゃいけないです。
  45. 45. なんだかんだMV*ライブラリを使うとJSがきれいになります! 是非使ってみてくださいね!
  46. 46. 以上で私の発表は終わりです。ご清聴ありがとうございました!
  47. 47. HTML5@福岡のボス @akase244さん に交代します!

×