Movatterモバイル変換


[0]ホーム

URL:


Toshio Ehara, profile picture
Uploaded byToshio Ehara
41,402 views

BACKBONE.JSによるWebアプリケーション開発について

フロントエンドとJavaScriptJavaScriptのMV*向けライブラリBACKBONE.JSによるWebアプリケーション開発について「オープンソースカンファレンス 2013 福岡」のHTML5と最近のフロントエンド事情で発表した資料です。

Embed presentation

Downloaded 105 times
HTML5と最近のフロントエンド事情フロントエンドとJavaScriptJavaScriptのMV*向けライブラリBACKBONE.JSによるWebアプリケーション開発について2013/11/16(土) オープンソースカンファレンス 2013 Fukuoka写真はWeb制作向け無料写真素材/ぱくたそ http://www.pakutaso.comを使ってます。ありがとうございます。
自己紹介です========江原と申します。(@itokami1123)福岡で業務アプリをJSで作って暮らしてます。こんな野望が持ってます。・業務系WebアプリのUIをモット使いやすくしたい!・JavaEEとJSを仲良くさせたい!・コミュニティの力で福岡を一つに!景気上昇↑雇用拡大↑・生涯福岡でエンジニアしたい!
!さてさて、今日のお話は===============!jQueryのみで大きな規模のWebアプリを書くとJSが非常に読みにくくなります。!そこで読みやすいコードを書く為にBackbone.jsとMV*の考え方を導入しました。!結果良かった点、悪かった点をお話したいと思います。!どうぞよろしくお願いいたします!
(ところで、MV*って何?
MV*とはModel(データ)とView(DOM描画)を分離する事をいいます。(MVC、MVVM、MVP…一杯ありますがよく分からないのでまとめてMV*って表現してます)ViewはModelの変更結果を反映する仕組みを持ちます。
(あぁ、MVCね。既にMVCやってるよ?
注・o・意ブラウザViewHTML今日お話しするのはサーバサイドでHTMLを生成するMVCではありません。ControllerModel業務ロジックViewHTML生成Model業務ロジックWebサーバ
注意ブラウザViewクライアント(ブラウザ)側でHTMLを生成するJavaScriptをModelとViewで分ける話です。ViewHTML・o・JSでHTML生成Model表示情報XML/JSONWebサービスAPIModel業務ロジックModel業務ロジックWebサーバ
(えっ、JavaScriptで分離?どうやってするの?
ModelとViewで分ける人気JSライブラリと言えば…!Angular.js (アンギュラージェイエス)Knockout.js(ノックアウトジェイエス)Backbone.js(バックボーンジェイエス)!この3つが有名です!
Googleトレンドで調べてみると…..私は、Backbone.jsが推しなんですけど…AngularJSが最近人気の急上昇みたいです。(ショック)\今日は Backbone.jsの説明します!/
(JavaScriptでMV*ライブラリ?そんな大袈裟な…
では、Backbone.js導入前に起きた問題をご紹介します!
こういうWebアプリを作る事になりました。連絡先一覧阿部 辛抱池面 太郎池面 太郎イケメン タロウイケメン タロウ池面 太郎島 次郎○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○。○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○。蛇場 好尾編集登録キャンセ* 左の連絡先一覧を選ぶと右に詳細が表示される* 編集ボタンで詳細編集可能
3人のチームです。A君とB君がフロントを担当でもう一人(鯖君)がJSONを返却するAPIを担当します。HTMLCSSJavaScriptA君B君JSONなんかJSONを返すWebAPIサーバ君
A君とB君は仲良く役割を分担し、プロジェクト開始されました。連絡先一覧池面 太郎阿部 辛抱イケメン タロウ池面 太郎島 次郎蛇場 好尾A君暗黒 美夢サーバのJSONデータを取得して表示するよ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○。編集B君左で選んだ連絡先詳細表示と内容を編集するよ
おっと!?開始そうそう二人の様子が!?(╬⊙д⊙)B君Clickイベントが探しにくい!A君情報を編集しにくい!えぇっ!じゃぁどうすればいいのよ!もう、仲良くしてよ〜 (ToT君
B君はお怒りの様子…では、A君のソースを見てみましょう!
一覧を表示する為、Ajaxから取得したデータを描画してます。描画情報DOMイベント処理DetailView#showメソッドを呼び出し怒るような問題ないですよね。でも、このままソースが長くなると…
あちこちにDOMイベントが点在するととっても探しにくくなりますね。
他の人が書いたJSは、どこにDOMイベントが書いているのか分かりにくいものですね。ではどうすれば良いのでしょうか?Backbone.jsを用いた解決方法を示します。
Backbone.jsでは DOMイベントとハンドラの組み合わせをevents という決まった位置に記載します。どこにイベントが書いてあるか迷わないですね! (^-^
Clickイベントが探しにくい!情報を編集しにくいよ!(╬⊙д⊙)次は情報について考えましょう!B君
現状の表示情報(データ)の取り扱いイメージはこんな感じです。
状現表示データ\AJaxで取得/一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君
状現表示データ一覧表示\DOMに反映!/ ListView詳細表示DetailViewDOM参照DOM参照A君\おっ出た!/B君
状現\選択時にデータの参照を渡す!/表示データ表示データ一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君
状現表示データ表示データ一覧表示ListView詳細表示DetailView \DOMに反映!/DOM参照DOM参照A君B君 \お〜出た!/
状現表示データ表示データ一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君\編集!/
状現表示データ表示データ一覧表示ListView詳細表示DetailViewDOM参照DOM参照反映されない…A君B君\あれ?/
ではMV*はどんな仕組みになるのでしょうか?復習しましょう〜!ポイントは2つ。Model(データ)と View(DOM描画)を分離するViewはModelの変更結果を反映する
V*M表示データ\AJaxで取得/表示情報DataModel一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君
V*M\表示データ変更イベント発生!/DataModel\データ変更に気づく!/表示データ\データ変更に気づく!/!!一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君
V*MDataModel表示データ\自動反映/一覧表示ListView\DOMに反映/詳細表示DetailViewDOM参照DOM参照\DOMに反映/A君B君\お〜出た!/\お〜出た!/
V*MDataModel表示データ一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君\編集/
V*M\表示データ変更イベント発生!/DataModel\データ変更に気づく!/表示データ\データ変更に気づく!/!!一覧表示ListView詳細表示DetailViewDOM参照DOM参照A君B君
V*MDataModel表示データ\自動反映/一覧表示ListView\DOMに反映/詳細表示DetailViewDOM参照DOM参照A君常に表示データが反映される!\お〜出た!/\DOMに反映/B君\お〜出た!/
V*MDataModel表示データ\自動反映/\自動反映/\自動反映/ListViewDetailViewHogeViewFugaDOM参照DOM参照DOM参照DOM何個VIewがあっても常に最新データが表示されるよ
Modelデータに連動するView(DOM表示)が増えるほどMV*パターンは勝手に連動してくれて便利ですね!Backbone.jsでは ModelデータとView(DOM描画)の連動をどう書くのでしょうか?
イベント監視機能(listenTo)を使います。this.list(Model)の監視とメソッド登録しています。一覧情報モデル(this.listData)にてreset発生時にcreateRenderメソッドが呼ばれます。ここに一覧の描画処理を書きます。一覧情報モデル(this.listData)にてchange発生時にupdateRenderメソッドが呼ばれます。ここに一覧の描画処理を書きます。
A君直したよ〜(どや!B君わぁ〜、読みやすくなったわ〜お互いのJSに影響が少なくコーディング出来ます。これで仲良しですね!めでたしめでたし。
まとめ!
!!Backbone.jsを導入してよかった点=====================!DOM操作イベントの記述場所が決まってJSが読みやすい!!Modelイベント監視のlisetnToが便利!!やんわりとJSソースの構造にルールが出来る!!DOM操作がModelに無いのでテストが書きやすい!!
!!Backbone.jsを導入で困っている点=====================!JSコーディングが遅くなっちゃうModelとViewの設計が必要。鍛錬しないとサクサク書けません..!Modelデータ反映の記述は必要でも、backbone.stickitというのを使うと出来るらしいですよ。!ルール違反して書けちゃう→結局、JSを書く為には自分に厳しくなくちゃいけないです。
なんだかんだMV*ライブラリを使うとJSがきれいになります!是非使ってみてくださいね!
以上で私の発表は終わりです。ご清聴ありがとうございました!
HTML5@福岡のボス @akase244さん に交代します!

Recommended

PDF
いまさら聞けない!?Backbone.js 超入門
PDF
jQueryを中心としたJavaScript
PDF
「新しい」を生み出すためのWebアプリ開発とその周辺
PDF
Learning jQuery
PDF
なぜ人は必死でjQueryを捨てようとしているのか
ODP
HTML5 アプリ開発
PDF
Mojolicious+redisでチャットを作った
KEY
続・Twitter bootstrap入門 #html5j
PDF
RailsでReact.jsを動かしてみた話
PDF
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
PDF
イマドキのフロントエンドエンジニアの道具箱
PDF
Web frontend performance tuning
PDF
gulp芸
PDF
JavaScriptと共に歩いて行く決意をした君へ
PDF
オープンソースで始めるオフラインアプリケーション開発入門
PPTX
Async awaitでの繰り返し処理についての小話
PDF
React+fluxを導入した話
PDF
120225 bootstrap
PPTX
Angular js はまりどころ
PDF
JavaScript 研修
ODP
今流行りのウェブアプリ開発環境Yeoman
PDF
AngularJSの高速化
PDF
svelte と tailwind で始めるフロントエンド開発
PDF
Mojoliciousでつくる! Webアプリ入門
PPTX
Kerasで可視化いろいろ
ODP
HTML5 開発環境の紹介
PDF
Service Workers Push API Hands-on
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
PDF
5分でわかる?Backbone.js ことはじめ
PDF
次世代Web業務アプリケーション

More Related Content

PDF
いまさら聞けない!?Backbone.js 超入門
PDF
jQueryを中心としたJavaScript
PDF
「新しい」を生み出すためのWebアプリ開発とその周辺
PDF
Learning jQuery
PDF
なぜ人は必死でjQueryを捨てようとしているのか
ODP
HTML5 アプリ開発
PDF
Mojolicious+redisでチャットを作った
KEY
続・Twitter bootstrap入門 #html5j
いまさら聞けない!?Backbone.js 超入門
jQueryを中心としたJavaScript
「新しい」を生み出すためのWebアプリ開発とその周辺
Learning jQuery
なぜ人は必死でjQueryを捨てようとしているのか
HTML5 アプリ開発
Mojolicious+redisでチャットを作った
続・Twitter bootstrap入門 #html5j

What's hot

PDF
RailsでReact.jsを動かしてみた話
PDF
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
PDF
イマドキのフロントエンドエンジニアの道具箱
PDF
Web frontend performance tuning
PDF
gulp芸
PDF
JavaScriptと共に歩いて行く決意をした君へ
PDF
オープンソースで始めるオフラインアプリケーション開発入門
PPTX
Async awaitでの繰り返し処理についての小話
PDF
React+fluxを導入した話
PDF
120225 bootstrap
PPTX
Angular js はまりどころ
PDF
JavaScript 研修
ODP
今流行りのウェブアプリ開発環境Yeoman
PDF
AngularJSの高速化
PDF
svelte と tailwind で始めるフロントエンド開発
PDF
Mojoliciousでつくる! Webアプリ入門
PPTX
Kerasで可視化いろいろ
ODP
HTML5 開発環境の紹介
PDF
Service Workers Push API Hands-on
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
RailsでReact.jsを動かしてみた話
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
イマドキのフロントエンドエンジニアの道具箱
Web frontend performance tuning
gulp芸
JavaScriptと共に歩いて行く決意をした君へ
オープンソースで始めるオフラインアプリケーション開発入門
Async awaitでの繰り返し処理についての小話
React+fluxを導入した話
120225 bootstrap
Angular js はまりどころ
JavaScript 研修
今流行りのウェブアプリ開発環境Yeoman
AngularJSの高速化
svelte と tailwind で始めるフロントエンド開発
Mojoliciousでつくる! Webアプリ入門
Kerasで可視化いろいろ
HTML5 開発環境の紹介
Service Workers Push API Hands-on
SIROK技術勉強会 #1 「Reactってなんだ?」

Viewers also liked

PDF
5分でわかる?Backbone.js ことはじめ
PDF
次世代Web業務アプリケーション
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
PDF
フロントエンド初学者がSPAに手を出してみた
PDF
angular1脳で見るangular2
PDF
(旧版) オープンソースライセンスの基礎と実務
5分でわかる?Backbone.js ことはじめ
次世代Web業務アプリケーション
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
フロントエンド初学者がSPAに手を出してみた
angular1脳で見るangular2
(旧版) オープンソースライセンスの基礎と実務

Similar to BACKBONE.JSによるWebアプリケーション開発について

PPTX
Railsのフロントエンド開発を考える
PDF
Knockout を用いた大規模 JavaScript 開発
PPTX
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
PDF
我が家のフロントエンド開発事情
PDF
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
PDF
Backbone.js
PDF
Javaな人が気を付けるべきJavaScriptコーディングスタイル
PDF
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
PPTX
PDF
Vue.js ハンズオン資料
PDF
開発スタイルのこれから for Backbone (powerd by Yeoman)
PDF
Backbone.js入門
PDF
Browser Computing Structure
KEY
Web App Framework at SwapSkills vol28
PDF
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
PPTX
HTML5時代のフロントエンド開発入門
PPTX
2016 03 05_yokohama_north
PDF
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
PPTX
HTML5最新動向
PPTX
JavaScriptの変遷/TypeScriptとは.pptx
 
Railsのフロントエンド開発を考える
Knockout を用いた大規模 JavaScript 開発
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
我が家のフロントエンド開発事情
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
Backbone.js
Javaな人が気を付けるべきJavaScriptコーディングスタイル
RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)
Vue.js ハンズオン資料
開発スタイルのこれから for Backbone (powerd by Yeoman)
Backbone.js入門
Browser Computing Structure
Web App Framework at SwapSkills vol28
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
HTML5時代のフロントエンド開発入門
2016 03 05_yokohama_north
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
HTML5最新動向
JavaScriptの変遷/TypeScriptとは.pptx
 

More from Toshio Ehara

PDF
iPhoneアプリを Javaで書くよ?
PDF
Java初心者勉強会(2015/08/07)資料
PDF
Java電卓勉強会資料
PDF
BABELで、ES2015(ES6)を学ぼう!
PDF
AngularJSで業務システムUI部品化
PDF
traceur-compilerで ECMAScript6を体験
PDF
traceur-compilerで未来のJavaScriptを体験
PDF
AngularJS入門の巻2
PDF
JenkinsをJava開発でこんな感じで使っています
PDF
AngularJS入門の巻
PDF
AngularJS+TypeScriptを試してみた。
PDF
AngularJSのDirectiveで俺俺タグつくっちゃお
PDF
HTML5のCanvas入門 - Img画像を編集してみよう -
PDF
福岡のIT勉強会情報の集め方(LT資料)
PDF
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
PDF
JavaScriptのテストコード 一緒に勉強しませんか??
PDF
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
PDF
LT Leap MotionとJavaScriptで遊ぼう!
PDF
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
PDF
BACKBONE.JSでMVC始めませんか?
iPhoneアプリを Javaで書くよ?
Java初心者勉強会(2015/08/07)資料
Java電卓勉強会資料
BABELで、ES2015(ES6)を学ぼう!
AngularJSで業務システムUI部品化
traceur-compilerで ECMAScript6を体験
traceur-compilerで未来のJavaScriptを体験
AngularJS入門の巻2
JenkinsをJava開発でこんな感じで使っています
AngularJS入門の巻
AngularJS+TypeScriptを試してみた。
AngularJSのDirectiveで俺俺タグつくっちゃお
HTML5のCanvas入門 - Img画像を編集してみよう -
福岡のIT勉強会情報の集め方(LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
JavaScriptのテストコード 一緒に勉強しませんか??
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
LT Leap MotionとJavaScriptで遊ぼう!
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
BACKBONE.JSでMVC始めませんか?

BACKBONE.JSによるWebアプリケーション開発について


[8]ページ先頭

©2009-2025 Movatter.jp