2012/10/1に発表したBackbone.js勉強会の資料

1. Backbone.js
+ CoffeeScript
+RonR
Cohei Aoki
@coa00

2. About Me
• 音楽や映像を生成するAlgorithmのCodeを
書くのが好き。
• インタラクティブなアート好き。

3. My GARAKUTA Works
Faderの動きで音を演奏 波形を8bitっぽい映像
Ledの光を音に変換 時間で映像を歪める

4. 本日のお話
JavaScriptを使ったアプリケーション
程度の中規模程度を行う環境についてお
話します。
情報量の多いサイト、Facebookアプ
リ、PhoneGapアプリなどをつくるこ
とを想定しています。

5. 規模が多くなってきた開発で抱える課題
1.JSにイベント制御、ステート管理、Viewの
更新、 通信などが無秩序にはいりコードの可
読性が下がる。
2.ライブラリやファイル分割を行った場合、取
得時に複数のコネクションをはることになる
ため、結合、コンプレスが必要になる。
3.CSSの記述の冗長化してしまう。
4.開発途中参加メンバーのキャッチアップに苦
戦する・・・

6. (´・ω・｀)

7. 解決案
• MVCフレームワークを導入
• Backbone.jsを導入
• ビルドスクリプトの作成
• Cakeなどでbuild,watchなど作成
• sccs、saasなどの導入

8. 今日はRonRを使って楽しましょう。
（・∀・）

9. DEMO
• Backbone.jsとRonRでさくさくブ
ログつくってから解説します。

10. Backbone.js
イベントの受信のフックにモデルとビューの更新を行え
る。ピタゴラスイッチスイッチみたいで気持ちいい。

11. Backbone.js
viewごとにエレメントを保持しているため、
更新を局所ができる。

12. Backbone.js
コレクションがおもしろい！！！

13. Backbone-rails
• Railsのコマンドを使ってBackbone.jsと
JQueryTemplateを使ったサイトのひな
形をくってくれるコマンドです。
• backbone::scaffoldでBackbone.js
をつかった簡単なBlogのようなひな形を
サーバサイドを含めすぐにつくることができ

14. ジェネレートされたコード
├── application.js
├── backbone
│ ├── bbblog.js.coffee
│ ├── models
│ │ └── post.js.coffee
│ ├── routers
│ │ └── posts_router.js.coffee
│ ├── templates
│ │ └── posts
│ │ ├── edit.jst.ejs
│ │ ├── index.jst.ejs
│ │ ├── new.jst.ejs
│ │ ├── post.jst.ejs
│ │ └── show.jst.ejs
│ └── views
│ └── posts
│ ├── edit_view.js.coffee
│ ├── index_view.js.coffee
│ ├── new_view.js.coffee
│ ├── post_view.js.coffee
│ └── show_view.js.coffee
└── posts.js.coffee

15. Backbone-rails
• backbone::scaffoldでBackbone.js
をつかった簡単なBlogのようなひな形を
サーバサイドを含めすぐにつくることができ
ます。

16. Backbone-rails
Router,View,テンプレートが追加されます。
rails g backbone:router ${contoller} $
{page1} ${page2} ... ${pageN}

17. 注意
• Backbone-railsで生成されるコー
ドはCoffeeScriptです。
• CoffeeScript嫌いな人には合わな
いかもしれません。

18. asset-pipeline
冒頭でお話したビルドの解決策
• JavaScript,CSSなどを自動的に圧縮
してくれる機能。
• CSSやJSのキャッシュなども対応して
くれる。
• hoge.css?20121001

19. SCCS/SaaS
• CSS内に共通変数をもたせることがで
きる。（絶対座標計算などに便利）
• MixInを使うとよく使うパーツの
CSS(ボタンなど)のモジュール化がで
きる。
• 別クラスで定義したCSSを綺麗に使い
まわせる。

20. CoffeeScript
• クラスの継承が可能でBackbone.js
と相性がよい。
• コールされた関数からクラスのメンバ
変数を参照できる。
• undefineとnullについての記述が
楽。

21. DEMO
• 時間があればデモ

22. このあたりすべてサポートした
フレームワークがあります。

23. ちょっと癖がありますがこちらもいいです！

24. ご清聴ありがとうございました！