Submit Search
Upload
Backbone.js勉強会
•
Download as KEY, PDF
•
1 like
•
1,253 views
Cohei Aoki
Follow
2012/10/1に発表したBackbone.js勉強会の資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 24
Download now
Recommended
Backbone.js入門
Backbone.js入門
AdvancedTechNight
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
BACKBONE.JSでMVC始めませんか?
BACKBONE.JSでMVC始めませんか?
Toshio Ehara
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
re:Titanium 今ここでもう一度、はじめての Titanium #2
re:Titanium 今ここでもう一度、はじめての Titanium #2
Ryutaro Miyashita
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Recommended
Backbone.js入門
Backbone.js入門
AdvancedTechNight
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
BACKBONE.JSでMVC始めませんか?
BACKBONE.JSでMVC始めませんか?
Toshio Ehara
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
re:Titanium 今ここでもう一度、はじめての Titanium #2
re:Titanium 今ここでもう一度、はじめての Titanium #2
Ryutaro Miyashita
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
Vue.js ハンズオン資料
Vue.js ハンズオン資料
よしだ あつし
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
More Related Content
Viewers also liked
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
Vue.js ハンズオン資料
Vue.js ハンズオン資料
よしだ あつし
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
Viewers also liked
(6)
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
Vue.js ハンズオン資料
Vue.js ハンズオン資料
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
はじめよう Backbone.js
はじめよう Backbone.js
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
Recently uploaded
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Recently uploaded
(9)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
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.
ご清聴ありがとうございました!
Editor's Notes
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Download now