Advertisement
いまさら聞けない！？Backbone.js 超入門
Jun. 7, 2013•0 likes•21,210 views
44 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Report
Devices & Hardware
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
Kohei KadowakiFollow
Software Engineer at PLAID, Inc.Advertisement
いまさら聞けない！？Backbone.js 超入門
- いまさら聞けない！？ Backbone.js 超入門 2013/6/8 第7回 HTML5など勉強会 - kadoppe
- 自己紹介 名前：門脇 恒平 @kadoppe 職業：ソフトウェアエンジニア Backbone.js歴：1年半 所属： HTML5-West.jp コアメンバ ShareWis Inc. CTO
- スライド： http://www.slideshare.net/kadoppe サンプルコード： https://github.com/kadoppe/html5etc-7
- おことわり
- 今日の話は HTML5に 関係なし
- だって・・・
- HTML5など 勉強会
- 今日の内容
- メイン: 5W1H おまけ: 問題と失敗談
- What： Backbone.jsってなんだ？
- Backbone.js
- クライアントサイド MVC フレームワーク
- 時間がないので ひらたく言うと
- Webアプリの JavaScriptコードを 楽に・キレイに 書くための道具
- Where： どこで使われてるの？
- hulu
- Foursquare
- ShareWis
- その他活用事例多数
- Who： どんな人が使えばいいの？
- JavaScriptを たくさん書く人
- 大規模な JavaScriptを 書く人
- フロントエンド エンジニア
- 必要なスキル： JavaScript jQuery or Zepto.js
- Zepto.js jQuery互換の軽量ライブラリ
- あるといいスキル： Underscore.js
- Underscore.js 痒いところに手が届くJSライブラリ
- When： いつ使うの？
- 今でしょ！
- Backbone.jsを 活用できる Webアプリ例
- 例１： シングルページ アプリケーション
- ページ遷移せずに 画面をどんどん 切り替えたいときに
- 例２： 大量のイベント処理・ DOM操作が発生する アプリケーション
- インタラクティブな Webアプリを つくりたいときに
- 例２： データを扱う アプリケーション
- データをもとにして ページを動的に 組立てたいときに
- Why： なぜ使うの？
- Backbone.js を使うべき ５つの理由
- 理由１： コードの見通しが良くなる
- プログラムを 複数のモジュールに 分割できる
- メンテナンス性向上！
- 理由２： シングルページアプリ がつくりやすい
- Routerが便利！
- 理由３： 様々な種類のデータ が扱いやすい
- Model・Collection が便利！
- 理由４： イベント処理・DOM 操作関連のコードが カオスになりにくい
- Viewが便利！
- 理由５： 類似フレームワークと 比べて軽量
- 6.3 KB
- モバイル環境 でも使える
- How： どうやって使うの？
- その前に Backbone.jsの 構成要素を紹介
- ４つの構成要素
- Router Model Collection View
- Router： アプリの状態を管理
- Model： データの管理や加工
- Collection： 複数のModelを扱う 配列みたいなもの
- View： イベント処理・DOM 操作・Model／ Collectionの管理
- View Collection Model 相関図 Router
- 実際に何か つくってみる
- プチ ライブ コーディング
- つくるもの： ToDoリスト
- スタート！
- おさらい
- アプリケーションの構造 FormView TodoListView StatsView AppView Todos Collection Todo Model ControlsView View同士はCollectionのイベントを介して連携
- 実際に つくってみて わかったこと
- 1. 役割ごとに コードを分割できた
- 2. 疎結合な コードが書けた
- 疎結合＝ コード間の結びつきが 弱いこと
- Viewは 他のViewのことを 知らない
- メンテナンス性が 高いコードが書けた！
- ぜひ使おう
- でもちょっと 待って
- おまけ： 問題点と失敗談
- Backbone.jsの問題： 決まり事が少ない 自由度が高い
- うまく書かないと スパゲッティコードが 途端にできあがる
- 失敗談１： Viewのコードが長く 複雑になる
- 理由１： Viewが担当する ページ要素が広すぎる
- 理由１： Viewの責任範囲をう まく分割できてない AppView ページ全体をひとつのViewで まかなおうとする → Viewのコードが長く、複雑に
- 理由１： Viewの責任範囲をう まく分割できてない FormView TodoListView StatsView AppView ControlsView ページを複数要素に分割して 小さなViewを割り当てる → コードの役割分担が明確に！
- 理由２： Viewに データ処理に関する コードを書いている
- View Collection Model Viewにデータ処理に関する コードがたくさん含まれる → Viewのコードが長く、複雑に データ処理 データ処理 データ処理 データ処理 データ処理 データ処理
- Model Collection View データ処理に関するコードは Model・Collectionへ → データ処理が再利用可能に データ処理 データ処理 データ処理 データ処理 View View
- 失敗談２： View同士を連携させる ためのコードを たくさん書いてしまう
- 理由： Model／Collection のイベントを うまく活用できてない
- View 各Viewが直接連携している → 連携のためのコードが増える → 各Viewが疎結合ではなくなる View View View View
- View Modelのイベントを介して連携 → 連携のためのコードが減る → 各Viewが疎結合になる View View View View Model
- 他にも 考えることは たくさん！
- どんどん 情報共有 しましょー！
- Let s Try !!
- おしまい
Advertisement