Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

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

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 91 Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Anuncio

Similares a いまさら聞けない!?Backbone.js 超入門 (20)

Más de Kohei Kadowaki (16)

Anuncio

Más reciente (20)

いまさら聞けない!?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. 必要なスキル: JavaScript jQuery 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. Router Model Collection View
  55. 55. Router: アプリの状態を管理
  56. 56. Model: データの管理や加工
  57. 57. Collection: 複数のModelを扱う 配列みたいなもの
  58. 58. View: イベント処理・DOM 操作・Model/ Collectionの管理
  59. 59. View Collection Model 相関図 Router
  60. 60. 実際に何か つくってみる
  61. 61. プチ ライブ コーディング
  62. 62. つくるもの: ToDoリスト
  63. 63. スタート!
  64. 64. おさらい
  65. 65. アプリケーションの構造 FormView TodoListView StatsView AppView Todos Collection Todo Model ControlsView View同士は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の責任範囲をう まく分割できてない FormView TodoListView StatsView AppView ControlsView ページを複数要素に分割して 小さなViewを割り当てる → コードの役割分担が明確に!
  81. 81. 理由2: Viewに データ処理に関する コードを書いている
  82. 82. View Collection Model Viewにデータ処理に関する コードがたくさん含まれる → Viewのコードが長く、複雑に データ処理 データ処理 データ処理 データ処理 データ処理 データ処理
  83. 83. Model Collection View データ処理に関するコードは Model・Collectionへ → データ処理が再利用可能に データ処理 データ処理 データ処理 データ処理 View View
  84. 84. 失敗談2: View同士を連携させる ためのコードを たくさん書いてしまう
  85. 85. 理由: Model/Collection のイベントを うまく活用できてない
  86. 86. View 各Viewが直接連携している → 連携のためのコードが増える → 各Viewが疎結合ではなくなる View View View View
  87. 87. View Modelのイベントを介して連携 → 連携のためのコードが減る → 各Viewが疎結合になる View View View View Model
  88. 88. 他にも 考えることは たくさん!
  89. 89. どんどん 情報共有 しましょー!
  90. 90. Let s Try !!
  91. 91. おしまい

×