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

19,211 views

Published on

2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。

Published in: Devices & Hardware
  • Be the first to comment

いまさら聞けない!?Backbone.js 超入門

  1. 1. いまさら聞けない!?Backbone.js 超入門2013/6/8 第7回 HTML5など勉強会 - kadoppe
  2. 2. 自己紹介名前:門脇 恒平 @kadoppe職業:ソフトウェアエンジニアBackbone.js歴:1年半所属:HTML5-West.jp コアメンバShareWis Inc. CTO
  3. 3. スライド:http://www.slideshare.net/kadoppeサンプルコード:https://github.com/kadoppe/html5etc-7
  4. 4. おことわり
  5. 5. 今日の話はHTML5に関係なし
  6. 6. だって・・・
  7. 7. HTML5など勉強会
  8. 8. 今日の内容
  9. 9. メイン: 5W1Hおまけ: 問題と失敗談
  10. 10. What:Backbone.jsってなんだ?
  11. 11. Backbone.js
  12. 12. クライアントサイドMVCフレームワーク
  13. 13. 時間がないのでひらたく言うと
  14. 14. WebアプリのJavaScriptコードを楽に・キレイに書くための道具
  15. 15. Where:どこで使われてるの?
  16. 16. hulu
  17. 17. Foursquare
  18. 18. ShareWis
  19. 19. その他活用事例多数
  20. 20. Who:どんな人が使えばいいの?
  21. 21. JavaScriptをたくさん書く人
  22. 22. 大規模なJavaScriptを書く人
  23. 23. フロントエンドエンジニア
  24. 24. 必要なスキル:JavaScriptjQuery or Zepto.js
  25. 25. Zepto.js jQuery互換の軽量ライブラリ
  26. 26. あるといいスキル:Underscore.js
  27. 27. Underscore.js 痒いところに手が届くJSライブラリ
  28. 28. When:いつ使うの?
  29. 29. 今でしょ!
  30. 30. Backbone.jsを活用できるWebアプリ例
  31. 31. 例1:シングルページアプリケーション
  32. 32. ページ遷移せずに画面をどんどん切り替えたいときに
  33. 33. 例2:大量のイベント処理・DOM操作が発生するアプリケーション
  34. 34. インタラクティブなWebアプリをつくりたいときに
  35. 35. 例2:データを扱うアプリケーション
  36. 36. データをもとにしてページを動的に組立てたいときに
  37. 37. Why:なぜ使うの?
  38. 38. Backbone.jsを使うべき5つの理由
  39. 39. 理由1:コードの見通しが良くなる
  40. 40. プログラムを複数のモジュールに分割できる
  41. 41. メンテナンス性向上!
  42. 42. 理由2:シングルページアプリがつくりやすい
  43. 43. Routerが便利!
  44. 44. 理由3:様々な種類のデータが扱いやすい
  45. 45. Model・Collectionが便利!
  46. 46. 理由4:イベント処理・DOM操作関連のコードがカオスになりにくい
  47. 47. Viewが便利!
  48. 48. 理由5:類似フレームワークと比べて軽量
  49. 49. 6.3 KB
  50. 50. モバイル環境でも使える
  51. 51. How:どうやって使うの?
  52. 52. その前にBackbone.jsの構成要素を紹介
  53. 53. 4つの構成要素
  54. 54. RouterModelCollectionView
  55. 55. Router:アプリの状態を管理
  56. 56. Model:データの管理や加工
  57. 57. Collection:複数のModelを扱う配列みたいなもの
  58. 58. View:イベント処理・DOM操作・Model/Collectionの管理
  59. 59. ViewCollectionModel相関図Router
  60. 60. 実際に何かつくってみる
  61. 61. プチライブコーディング
  62. 62. つくるもの:ToDoリスト
  63. 63. スタート!
  64. 64. おさらい
  65. 65. アプリケーションの構造FormViewTodoListViewStatsViewAppViewTodosCollectionTodoModelControlsViewView同士はCollectionのイベントを介して連携
  66. 66. 実際につくってみてわかったこと
  67. 67. 1. 役割ごとにコードを分割できた
  68. 68. 2. 疎結合なコードが書けた
  69. 69. 疎結合=コード間の結びつきが弱いこと
  70. 70. Viewは他のViewのことを知らない
  71. 71. メンテナンス性が高いコードが書けた!
  72. 72. ぜひ使おう
  73. 73. でもちょっと待って
  74. 74. おまけ:問題点と失敗談
  75. 75. Backbone.jsの問題:決まり事が少ない自由度が高い
  76. 76. うまく書かないとスパゲッティコードが途端にできあがる
  77. 77. 失敗談1:Viewのコードが長く複雑になる
  78. 78. 理由1:Viewが担当するページ要素が広すぎる
  79. 79. 理由1:Viewの責任範囲をうまく分割できてないAppViewページ全体をひとつのViewでまかなおうとする→ Viewのコードが長く、複雑に
  80. 80. 理由1:Viewの責任範囲をうまく分割できてないFormViewTodoListViewStatsViewAppViewControlsViewページを複数要素に分割して小さなViewを割り当てる→ コードの役割分担が明確に!
  81. 81. 理由2:Viewにデータ処理に関するコードを書いている
  82. 82. ViewCollectionModelViewにデータ処理に関するコードがたくさん含まれる→ Viewのコードが長く、複雑にデータ処理データ処理データ処理データ処理データ処理データ処理
  83. 83. ModelCollectionViewデータ処理に関するコードはModel・Collectionへ→ データ処理が再利用可能にデータ処理データ処理データ処理データ処理ViewView
  84. 84. 失敗談2:View同士を連携させるためのコードをたくさん書いてしまう
  85. 85. 理由:Model/Collectionのイベントをうまく活用できてない
  86. 86. View各Viewが直接連携している→ 連携のためのコードが増える→ 各Viewが疎結合ではなくなるViewView ViewView
  87. 87. ViewModelのイベントを介して連携→ 連携のためのコードが減る→ 各Viewが疎結合になるViewView ViewViewModel
  88. 88. 他にも考えることはたくさん!
  89. 89. どんどん情報共有しましょー!
  90. 90. Let s Try !!
  91. 91. おしまい

×