Backbone.js勉強会

1,247 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,247
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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. ご清聴ありがとうございました!

    ×