Backbone.js勉強会

  • 762 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
762
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Backbone.js+ CoffeeScript +RonR Cohei Aoki @coa00
  • 2. About Me• 音楽や映像を生成するAlgorithmのCodeを 書くのが好き。• インタラクティブなアート好き。
  • 3. My GARAKUTA WorksFaderの動きで音を演奏 波形を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.jsviewごとにエレメントを保持しているため、更新を局所ができる。
  • 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. ご清聴ありがとうございました!