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

16,154 views
16,708 views

Published on

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

Published in: Devices & Hardware
0 Comments
42 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,154
On SlideShare
0
From Embeds
0
Number of Embeds
6,625
Actions
Shares
0
Downloads
0
Comments
0
Likes
42
Embeds 0
No embeds

No notes for slide

いまさら聞けない!?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. おしまい

×