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勉強会

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

  • Be the first to comment

Backbone.js勉強会

  1. 1. Backbone.js+ CoffeeScript +RonR Cohei Aoki @coa00
  2. 2. About Me• 音楽や映像を生成するAlgorithmのCodeを 書くのが好き。• インタラクティブなアート好き。
  3. 3. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像Ledの光を音に変換 時間で映像を歪める
  4. 4. 本日のお話JavaScriptを使ったアプリケーション程度の中規模程度を行う環境についてお話します。情報量の多いサイト、Facebookアプリ、PhoneGapアプリなどをつくることを想定しています。
  5. 5. 規模が多くなってきた開発で抱える課題1.JSにイベント制御、ステート管理、Viewの 更新、 通信などが無秩序にはいりコードの可 読性が下がる。2.ライブラリやファイル分割を行った場合、取 得時に複数のコネクションをはることになる ため、結合、コンプレスが必要になる。3.CSSの記述の冗長化してしまう。4.開発途中参加メンバーのキャッチアップに苦 戦する・・・
  6. 6. (´・ω・`)
  7. 7. 解決案• MVCフレームワークを導入 • Backbone.jsを導入• ビルドスクリプトの作成 • Cakeなどでbuild,watchなど作成• sccs、saasなどの導入
  8. 8. 今日はRonRを使って楽しましょう。 (・∀・)
  9. 9. DEMO• Backbone.jsとRonRでさくさくブ ログつくってから解説します。
  10. 10. Backbone.jsイベントの受信のフックにモデルとビューの更新を行える。ピタゴラスイッチスイッチみたいで気持ちいい。
  11. 11. Backbone.jsviewごとにエレメントを保持しているため、更新を局所ができる。
  12. 12. Backbone.jsコレクションがおもしろい!!!
  13. 13. Backbone-rails• Railsのコマンドを使ってBackbone.jsと JQueryTemplateを使ったサイトのひな 形をくってくれるコマンドです。• backbone::scaffoldでBackbone.js をつかった簡単なBlogのようなひな形を サーバサイドを含めすぐにつくることができ
  14. 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. 15. Backbone-rails• backbone::scaffoldでBackbone.js をつかった簡単なBlogのようなひな形を サーバサイドを含めすぐにつくることができ ます。
  16. 16. Backbone-rails Router,View,テンプレートが追加されます。rails g backbone:router ${contoller} ${page1} ${page2} ... ${pageN}
  17. 17. 注意• Backbone-railsで生成されるコー ドはCoffeeScriptです。• CoffeeScript嫌いな人には合わな いかもしれません。
  18. 18. asset-pipeline冒頭でお話したビルドの解決策• JavaScript,CSSなどを自動的に圧縮 してくれる機能。• CSSやJSのキャッシュなども対応して くれる。• hoge.css?20121001
  19. 19. SCCS/SaaS• CSS内に共通変数をもたせることがで きる。(絶対座標計算などに便利)• MixInを使うとよく使うパーツの CSS(ボタンなど)のモジュール化がで きる。• 別クラスで定義したCSSを綺麗に使い まわせる。
  20. 20. CoffeeScript• クラスの継承が可能でBackbone.js と相性がよい。• コールされた関数からクラスのメンバ 変数を参照できる。• undefineとnullについての記述が 楽。
  21. 21. DEMO• 時間があればデモ
  22. 22. このあたりすべてサポートした フレームワークがあります。
  23. 23. ちょっと癖がありますがこちらもいいです!
  24. 24. ご清聴ありがとうございました!

×