Enviar pesquisa
Carregar
いまさら聞けない!?Backbone.js 超入門
•
44 gostaram
•
21,249 visualizações
Kohei Kadowaki
Seguir
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
Leia menos
Leia mais
Dispositivos e hardware
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 91
Recomendados
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
Learning jQuery
Learning jQuery
taiju higashi
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Mais conteúdo relacionado
Mais procurados
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
gulp芸
gulp芸
Yuki Ishikawa
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Tetsuya Tatsumi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Mais procurados
(20)
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
HTML5 アプリ開発
HTML5 アプリ開発
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
React+fluxを導入した話
React+fluxを導入した話
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
gulp芸
gulp芸
AngularJSの高速化
AngularJSの高速化
HTML5 開発環境の紹介
HTML5 開発環境の紹介
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
React を導入したフロントエンド開発
React を導入したフロントエンド開発
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Web制作勉強会 #2
Web制作勉強会 #2
Destaque
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
Tom Hayakawa
UnitTestのためのクラス設計
UnitTestのためのクラス設計
Takeshi Ishida
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
Visual Studio Code 入門
Visual Studio Code 入門
Saki Homma
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
(旧版) オープンソースライセンスの基礎と実務
(旧版) オープンソースライセンスの基礎と実務
Yutaka Kachi
Destaque
(6)
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
UnitTestのためのクラス設計
UnitTestのためのクラス設計
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Visual Studio Code 入門
Visual Studio Code 入門
angular1脳で見るangular2
angular1脳で見るangular2
(旧版) オープンソースライセンスの基礎と実務
(旧版) オープンソースライセンスの基礎と実務
Semelhante a いまさら聞けない!?Backbone.js 超入門
非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
Masakazu Muraoka
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
Mitsuru Ogawa
Kerasで可視化いろいろ
Kerasで可視化いろいろ
Masakazu Muraoka
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
Mitsuo Kawashima
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
Html5で変わるいろんなこと
Html5で変わるいろんなこと
Masakazu Muraoka
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Kensaku Komatsu
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
Html5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
Masakazu Muraoka
Semelhante a いまさら聞けない!?Backbone.js 超入門
(20)
非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
Kerasで可視化いろいろ
Kerasで可視化いろいろ
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
_HTML5で組んでみた_
_HTML5で組んでみた_
Html5で変わるいろんなこと
Html5で変わるいろんなこと
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Html5 and Graphics
Html5 and Graphics
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Htmlのコトバ
Htmlのコトバ
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Html5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
Mais de Kohei Kadowaki
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
プログラマーのお仕事
プログラマーのお仕事
Kohei Kadowaki
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
Kohei Kadowaki
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
Kohei Kadowaki
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
SocketStream入門
SocketStream入門
Kohei Kadowaki
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
WebSocketことはじめ
WebSocketことはじめ
Kohei Kadowaki
Mais de Kohei Kadowaki
(16)
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
プログラマーのお仕事
プログラマーのお仕事
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
SocketStream入門
SocketStream入門
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
AndroidでWebSocket
AndroidでWebSocket
WebSocketことはじめ
WebSocketことはじめ
いまさら聞けない!?Backbone.js 超入門
1.
いまさら聞けない!? Backbone.js 超入門 2013/6/8 第7回
HTML5など勉強会 - kadoppe
2.
自己紹介 名前:門脇 恒平 @kadoppe 職業:ソフトウェアエンジニア Backbone.js歴:1年半 所属: HTML5-West.jp
コアメンバ ShareWis Inc. CTO
3.
スライド: http://www.slideshare.net/kadoppe サンプルコード: https://github.com/kadoppe/html5etc-7
4.
おことわり
5.
今日の話は HTML5に 関係なし
6.
だって・・・
7.
HTML5など 勉強会
8.
今日の内容
9.
メイン: 5W1H おまけ: 問題と失敗談
10.
What: Backbone.jsってなんだ?
11.
Backbone.js
12.
クライアントサイド MVC フレームワーク
13.
時間がないので ひらたく言うと
14.
Webアプリの JavaScriptコードを 楽に・キレイに 書くための道具
15.
Where: どこで使われてるの?
16.
hulu
17.
Foursquare
18.
ShareWis
19.
その他活用事例多数
20.
Who: どんな人が使えばいいの?
21.
JavaScriptを たくさん書く人
22.
大規模な JavaScriptを 書く人
23.
フロントエンド エンジニア
24.
必要なスキル: JavaScript jQuery or Zepto.js
25.
Zepto.js jQuery互換の軽量ライブラリ
26.
あるといいスキル: Underscore.js
27.
Underscore.js 痒いところに手が届くJSライブラリ
28.
When: いつ使うの?
29.
今でしょ!
30.
Backbone.jsを 活用できる Webアプリ例
31.
例1: シングルページ アプリケーション
32.
ページ遷移せずに 画面をどんどん 切り替えたいときに
33.
例2: 大量のイベント処理・ DOM操作が発生する アプリケーション
34.
インタラクティブな Webアプリを つくりたいときに
35.
例2: データを扱う アプリケーション
36.
データをもとにして ページを動的に 組立てたいときに
37.
Why: なぜ使うの?
38.
Backbone.js を使うべき 5つの理由
39.
理由1: コードの見通しが良くなる
40.
プログラムを 複数のモジュールに 分割できる
41.
メンテナンス性向上!
42.
理由2: シングルページアプリ がつくりやすい
43.
Routerが便利!
44.
理由3: 様々な種類のデータ が扱いやすい
45.
Model・Collection が便利!
46.
理由4: イベント処理・DOM 操作関連のコードが カオスになりにくい
47.
Viewが便利!
48.
理由5: 類似フレームワークと 比べて軽量
49.
6.3 KB
50.
モバイル環境 でも使える
51.
How: どうやって使うの?
52.
その前に Backbone.jsの 構成要素を紹介
53.
4つの構成要素
54.
Router Model Collection View
55.
Router: アプリの状態を管理
56.
Model: データの管理や加工
57.
Collection: 複数のModelを扱う 配列みたいなもの
58.
View: イベント処理・DOM 操作・Model/ Collectionの管理
59.
View Collection Model 相関図 Router
60.
実際に何か つくってみる
61.
プチ ライブ コーディング
62.
つくるもの: ToDoリスト
63.
スタート!
64.
おさらい
65.
アプリケーションの構造 FormView TodoListView StatsView AppView Todos Collection Todo Model ControlsView View同士はCollectionのイベントを介して連携
66.
実際に つくってみて わかったこと
67.
1. 役割ごとに コードを分割できた
68.
2. 疎結合な コードが書けた
69.
疎結合= コード間の結びつきが 弱いこと
70.
Viewは 他のViewのことを 知らない
71.
メンテナンス性が 高いコードが書けた!
72.
ぜひ使おう
73.
でもちょっと 待って
74.
おまけ: 問題点と失敗談
75.
Backbone.jsの問題: 決まり事が少ない 自由度が高い
76.
うまく書かないと スパゲッティコードが 途端にできあがる
77.
失敗談1: Viewのコードが長く 複雑になる
78.
理由1: Viewが担当する ページ要素が広すぎる
79.
理由1: Viewの責任範囲をう まく分割できてない AppView ページ全体をひとつのViewで まかなおうとする → Viewのコードが長く、複雑に
80.
理由1: Viewの責任範囲をう まく分割できてない FormView TodoListView StatsView AppView ControlsView ページを複数要素に分割して 小さなViewを割り当てる → コードの役割分担が明確に!
81.
理由2: Viewに データ処理に関する コードを書いている
82.
View Collection Model Viewにデータ処理に関する コードがたくさん含まれる → Viewのコードが長く、複雑に データ処理 データ処理 データ処理 データ処理 データ処理 データ処理
83.
Model Collection View データ処理に関するコードは Model・Collectionへ → データ処理が再利用可能に データ処理 データ処理 データ処理 データ処理 View View
84.
失敗談2: View同士を連携させる ためのコードを たくさん書いてしまう
85.
理由: Model/Collection のイベントを うまく活用できてない
86.
View 各Viewが直接連携している → 連携のためのコードが増える → 各Viewが疎結合ではなくなる View View
View View
87.
View Modelのイベントを介して連携 → 連携のためのコードが減る → 各Viewが疎結合になる View View
View View Model
88.
他にも 考えることは たくさん!
89.
どんどん 情報共有 しましょー!
90.
Let s Try
!!
91.
おしまい