Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
Uploaded by
Kohei Kadowaki
21,296 views
いまさら聞けない!?Backbone.js 超入門
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
Devices & Hardware
◦
Read more
44
Save
Share
Embed
Embed presentation
1
/ 91
2
/ 91
3
/ 91
4
/ 91
5
/ 91
6
/ 91
7
/ 91
8
/ 91
9
/ 91
10
/ 91
11
/ 91
12
/ 91
13
/ 91
14
/ 91
15
/ 91
16
/ 91
17
/ 91
18
/ 91
19
/ 91
20
/ 91
21
/ 91
22
/ 91
23
/ 91
24
/ 91
25
/ 91
26
/ 91
27
/ 91
28
/ 91
29
/ 91
30
/ 91
31
/ 91
32
/ 91
33
/ 91
34
/ 91
35
/ 91
36
/ 91
37
/ 91
38
/ 91
39
/ 91
40
/ 91
41
/ 91
42
/ 91
43
/ 91
44
/ 91
45
/ 91
46
/ 91
47
/ 91
48
/ 91
49
/ 91
50
/ 91
51
/ 91
52
/ 91
53
/ 91
54
/ 91
55
/ 91
56
/ 91
57
/ 91
58
/ 91
59
/ 91
60
/ 91
61
/ 91
62
/ 91
63
/ 91
64
/ 91
65
/ 91
66
/ 91
67
/ 91
68
/ 91
69
/ 91
70
/ 91
71
/ 91
72
/ 91
73
/ 91
74
/ 91
75
/ 91
76
/ 91
77
/ 91
78
/ 91
79
/ 91
80
/ 91
81
/ 91
82
/ 91
83
/ 91
84
/ 91
85
/ 91
86
/ 91
87
/ 91
88
/ 91
89
/ 91
90
/ 91
91
/ 91
More Related Content
PDF
BACKBONE.JSによるWebアプリケーション開発について
by
Toshio Ehara
PDF
jQueryを中心としたJavaScript
by
hideaki honda
PDF
なぜ人は必死でjQueryを捨てようとしているのか
by
Yoichi Toyota
PDF
RailsでReact.jsを動かしてみた話
by
yoshioka_cb
PDF
「新しい」を生み出すためのWebアプリ開発とその周辺
by
Yusuke Wada
PDF
JavaScript 研修
by
Yuki Ishikawa
PDF
Learning jQuery
by
taiju higashi
PDF
まだ DOM 操作で消耗してるの?
by
Yuki Ishikawa
BACKBONE.JSによるWebアプリケーション開発について
by
Toshio Ehara
jQueryを中心としたJavaScript
by
hideaki honda
なぜ人は必死でjQueryを捨てようとしているのか
by
Yoichi Toyota
RailsでReact.jsを動かしてみた話
by
yoshioka_cb
「新しい」を生み出すためのWebアプリ開発とその周辺
by
Yusuke Wada
JavaScript 研修
by
Yuki Ishikawa
Learning jQuery
by
taiju higashi
まだ DOM 操作で消耗してるの?
by
Yuki Ishikawa
What's hot
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
by
Naoyuki Kataoka
PDF
JavaScriptと共に歩いて行く決意をした君へ
by
Muyuu Fujita
PDF
svelte と tailwind で始めるフロントエンド開発
by
Shuichi Takaya
ODP
HTML5 アプリ開発
by
tomo_masakura
PDF
Backbonejs @BuildInsiderOffline #1
by
daisuke shimizu
PDF
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
by
松田 千尋
PDF
React+fluxを導入した話
by
Yuki Ishikawa
PDF
Javaな人が気を付けるべきJavaScriptコーディングスタイル
by
Maaya Ishida
PDF
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
by
schoowebcampus
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
by
Itaru Kitagawa
PDF
gulp芸
by
Yuki Ishikawa
PDF
AngularJSの高速化
by
Kon Yuichi
ODP
HTML5 開発環境の紹介
by
tomo_masakura
PDF
Mojolicious+redisでチャットを作った
by
Tetsuya Tatsumi
PPTX
React を導入したフロントエンド開発
by
daisuke-a-matsui
ODP
今流行りのウェブアプリ開発環境Yeoman
by
tomo_masakura
PDF
AngularJSでの非同期処理の話
by
Yosuke Onoue
KEY
続・Twitter bootstrap入門 #html5j
by
Toshiaki Maki
PDF
Mojoliciousでつくる! Webアプリ入門
by
Yusuke Wada
PDF
Web制作勉強会 #2
by
Moto Yan
SIROK技術勉強会 #1 「Reactってなんだ?」
by
Naoyuki Kataoka
JavaScriptと共に歩いて行く決意をした君へ
by
Muyuu Fujita
svelte と tailwind で始めるフロントエンド開発
by
Shuichi Takaya
HTML5 アプリ開発
by
tomo_masakura
Backbonejs @BuildInsiderOffline #1
by
daisuke shimizu
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
by
松田 千尋
React+fluxを導入した話
by
Yuki Ishikawa
Javaな人が気を付けるべきJavaScriptコーディングスタイル
by
Maaya Ishida
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
by
schoowebcampus
サーバサイドエンジニアが 1年間まじめにSPAやってみた
by
Itaru Kitagawa
gulp芸
by
Yuki Ishikawa
AngularJSの高速化
by
Kon Yuichi
HTML5 開発環境の紹介
by
tomo_masakura
Mojolicious+redisでチャットを作った
by
Tetsuya Tatsumi
React を導入したフロントエンド開発
by
daisuke-a-matsui
今流行りのウェブアプリ開発環境Yeoman
by
tomo_masakura
AngularJSでの非同期処理の話
by
Yosuke Onoue
続・Twitter bootstrap入門 #html5j
by
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
by
Yusuke Wada
Web制作勉強会 #2
by
Moto Yan
Viewers also liked
PDF
2013 02 09_osc2013_hamamatsu_osm
by
Tom Hayakawa
KEY
UnitTestのためのクラス設計
by
Takeshi Ishida
PDF
5分でわかる?Backbone.js ことはじめ
by
Kohei Kadowaki
PPTX
Visual Studio Code 入門
by
Saki Homma
PDF
angular1脳で見るangular2
by
Moriyuki Arakawa
PDF
(旧版) オープンソースライセンスの基礎と実務
by
Yutaka Kachi
2013 02 09_osc2013_hamamatsu_osm
by
Tom Hayakawa
UnitTestのためのクラス設計
by
Takeshi Ishida
5分でわかる?Backbone.js ことはじめ
by
Kohei Kadowaki
Visual Studio Code 入門
by
Saki Homma
angular1脳で見るangular2
by
Moriyuki Arakawa
(旧版) オープンソースライセンスの基礎と実務
by
Yutaka Kachi
Similar to いまさら聞けない!?Backbone.js 超入門
PDF
backbone.jsの使用例 その1
by
Makoto Haruyama
PDF
Backbone.js
by
daisuke shimizu
PPTX
忙しい人のためのBackbone.jsとAngular.js入門
by
Toshiaki Maki
PDF
実践Backbone.Marionette 現場の悩みと解決まで
by
Ryuma Tsukano
PDF
Study Intro Backbone
by
Gensei Kawasaki
PDF
introduction to Marionette.js (jscafe14)
by
Ryuma Tsukano
PPT
20130924 Picomon CRH勉強会
by
Yukihiro Kitazawa
PDF
Parse.comと始めるBackbone.js入門(jscafe7)
by
Ryuma Tsukano
PPTX
20161125 米田 angular_jsを触ってみた
by
Tsuyoshi Saito
backbone.jsの使用例 その1
by
Makoto Haruyama
Backbone.js
by
daisuke shimizu
忙しい人のためのBackbone.jsとAngular.js入門
by
Toshiaki Maki
実践Backbone.Marionette 現場の悩みと解決まで
by
Ryuma Tsukano
Study Intro Backbone
by
Gensei Kawasaki
introduction to Marionette.js (jscafe14)
by
Ryuma Tsukano
20130924 Picomon CRH勉強会
by
Yukihiro Kitazawa
Parse.comと始めるBackbone.js入門(jscafe7)
by
Ryuma Tsukano
20161125 米田 angular_jsを触ってみた
by
Tsuyoshi Saito
More from Kohei Kadowaki
PDF
Pebble + JavaScriptでつくるスマートウォッチアプリ
by
Kohei Kadowaki
PDF
Firefox OSでSVGをつかってみた
by
Kohei Kadowaki
PDF
Inline SVG - トラブルとその対策
by
Kohei Kadowaki
PDF
Webでもできるデータビジュアライゼーション
by
Kohei Kadowaki
PDF
D3.js と SVG によるデータビジュアライゼーション
by
Kohei Kadowaki
PDF
プログラマーのお仕事
by
Kohei Kadowaki
PDF
SVGでつくるインタラクティブWebアプリケーション
by
Kohei Kadowaki
PDF
UnityでつくるはじめてのPONG
by
Kohei Kadowaki
PDF
インラインSVGをつかって地図っぽいものをつくってみる
by
Kohei Kadowaki
PDF
ShareWisをFirefoxで動かすためのSVG的とりくみ
by
Kohei Kadowaki
PDF
d3jsではじめるデータビジュアライゼーション入門
by
Kohei Kadowaki
PDF
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
by
Kohei Kadowaki
PDF
SocketStream入門
by
Kohei Kadowaki
PDF
WebSocket + Node.jsでつくるチャットアプリ
by
Kohei Kadowaki
PDF
AndroidでWebSocket
by
Kohei Kadowaki
PDF
WebSocketことはじめ
by
Kohei Kadowaki
Pebble + JavaScriptでつくるスマートウォッチアプリ
by
Kohei Kadowaki
Firefox OSでSVGをつかってみた
by
Kohei Kadowaki
Inline SVG - トラブルとその対策
by
Kohei Kadowaki
Webでもできるデータビジュアライゼーション
by
Kohei Kadowaki
D3.js と SVG によるデータビジュアライゼーション
by
Kohei Kadowaki
プログラマーのお仕事
by
Kohei Kadowaki
SVGでつくるインタラクティブWebアプリケーション
by
Kohei Kadowaki
UnityでつくるはじめてのPONG
by
Kohei Kadowaki
インラインSVGをつかって地図っぽいものをつくってみる
by
Kohei Kadowaki
ShareWisをFirefoxで動かすためのSVG的とりくみ
by
Kohei Kadowaki
d3jsではじめるデータビジュアライゼーション入門
by
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
by
Kohei Kadowaki
SocketStream入門
by
Kohei Kadowaki
WebSocket + Node.jsでつくるチャットアプリ
by
Kohei Kadowaki
AndroidでWebSocket
by
Kohei Kadowaki
WebSocketことはじめ
by
Kohei Kadowaki
いまさら聞けない!?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.
おしまい