Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

38,997 views

Published on

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

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

  • Be the first to comment

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さん に交代します!

×