Enviar búsqueda
Cargar
忙しい人のためのBackbone.jsとAngular.js入門
•
25 recomendaciones
•
8,056 vistas
Toshiaki Maki
Seguir
前に作った簡易資料
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 40
Descargar ahora
Descargar para leer sin conexión
Recomendados
Spring Initializrをハックする-カスタマイズを通してその内部実装を覗く
Spring Initializrをハックする-カスタマイズを通してその内部実装を覗く
apkiban
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
並行処理初心者のためのAkka入門
並行処理初心者のためのAkka入門
Yoshimura Soichiro
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介
AdvancedTechNight
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Masatoshi Tada
Spring fest2020 spring-security
Spring fest2020 spring-security
土岐 孝平
Spring Cloud Data Flow Overview
Spring Cloud Data Flow Overview
VMware Tanzu
Azure API Management 俺的マニュアル
Azure API Management 俺的マニュアル
貴志 上坂
Más contenido relacionado
La actualidad más candente
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
NTT DATA Technology & Innovation
失敗しない条件付きアクセスの実装
失敗しない条件付きアクセスの実装
Suguru Kunii
分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション
Masahito Zembutsu
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
apkiban
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方
Masaru Ichikawa
Text and metadata extraction with Apache Tika
Text and metadata extraction with Apache Tika
Jukka Zitting
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
CODE BLUE
Kubernetes 導入から始める DevOps について
Kubernetes 導入から始める DevOps について
Shigeru Tatsuta
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
Yahoo!デベロッパーネットワーク
Log4j in 8 slides
Log4j in 8 slides
Tarin Gamberini
WebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
Java EE から Quarkus による開発への移行について
Java EE から Quarkus による開発への移行について
Shigeru Tatsuta
できる!並列・並行プログラミング
できる!並列・並行プログラミング
Preferred Networks
自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例
Teruchika Yamada
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
apkiban
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Flink Forward
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
apkiban
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
Masatoshi Tada
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
MicroAd, Inc.(Engineer)
La actualidad más candente
(20)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
失敗しない条件付きアクセスの実装
失敗しない条件付きアクセスの実装
分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方
Text and metadata extraction with Apache Tika
Text and metadata extraction with Apache Tika
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
Kubernetes 導入から始める DevOps について
Kubernetes 導入から始める DevOps について
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
Log4j in 8 slides
Log4j in 8 slides
WebRTC Build MCU on browser
WebRTC Build MCU on browser
Java EE から Quarkus による開発への移行について
Java EE から Quarkus による開発への移行について
できる!並列・並行プログラミング
できる!並列・並行プログラミング
自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
Destacado
3分でわかるangular js
3分でわかるangular js
Shin Adachi
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
Yuta Matsumura
Angularを利用しよう
Angularを利用しよう
AfiruPain NaokiSoga
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
デザイナーとの協業を本気で考える
デザイナーとの協業を本気で考える
kwatch
Alt01-LT
Alt01-LT
Yuta Hiroto
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
TypeScriptで快適javascript
TypeScriptで快適javascript
AfiruPain NaokiSoga
Destacado
(12)
3分でわかるangular js
3分でわかるangular js
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
Angularを利用しよう
Angularを利用しよう
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
デザイナーとの協業を本気で考える
デザイナーとの協業を本気で考える
Alt01-LT
Alt01-LT
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
TypeScriptで快適javascript
TypeScriptで快適javascript
Similar a 忙しい人のためのBackbone.jsとAngular.js入門
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Shinichi Tomita
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
Nobukazu Hanada
HTML5-20100626
HTML5-20100626
Taku AMANO
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Tomohiro Kumagai
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
Play jjug2012spring
Play jjug2012spring
Takafumi Ikeda
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
Yosuke Onoue
Node.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
kamiyam .
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
Oonishi Keitarou
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
yoshinori matsumoto
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Similar a 忙しい人のためのBackbone.jsとAngular.js入門
(20)
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
HTML5-20100626
HTML5-20100626
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Play jjug2012spring
Play jjug2012spring
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Web制作勉強会 #2
Web制作勉強会 #2
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
Node.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
はじめよう Backbone.js
はじめよう Backbone.js
JavaScript 研修
JavaScript 研修
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Más de Toshiaki Maki
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
Toshiaki Maki
Concourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyo
Toshiaki Maki
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Toshiaki Maki
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
Toshiaki Maki
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Toshiaki Maki
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & Micrometer
Toshiaki Maki
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Toshiaki Maki
Spring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsug
Toshiaki Maki
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
Toshiaki Maki
BOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyo
Toshiaki Maki
Why PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring Boot
Toshiaki Maki
Zipkin Components #zipkin_jp
Zipkin Components #zipkin_jp
Toshiaki Maki
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
Toshiaki Maki
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Toshiaki Maki
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
Toshiaki Maki
Spring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjug
Toshiaki Maki
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Toshiaki Maki
Managing your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CI
Toshiaki Maki
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Toshiaki Maki
Short Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyo
Toshiaki Maki
Más de Toshiaki Maki
(20)
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
Concourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyo
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & Micrometer
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Spring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsug
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
BOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyo
Why PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring Boot
Zipkin Components #zipkin_jp
Zipkin Components #zipkin_jp
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
Spring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjug
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Managing your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CI
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Short Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyo
Último
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
2024 03 CTEA
2024 03 CTEA
arts yokohama
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
Último
(12)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
2024 04 minnanoito
2024 04 minnanoito
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
2024 03 CTEA
2024 03 CTEA
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
忙しい人のためのBackbone.jsとAngular.js入門
1.
忙しい人のためのBackbone.jsと Angular.js入門 2014/03/20
2.
なぜフレームワークが必要か • (単純化した)良くあるJavaScriptアプリケーショ ン ① クリックされると ②
フォームの内容を取得し て ③ Ajax送信し、 ④ 結果を描画する POST http://example.com/status {"text" : "aaaa"} ---- {"text" : "hi! aaaa"}
3.
jQueryで簡単に実装! http://jsfiddle.net/EdXzC/ 簡単ですね!
4.
jQueryで簡単に実装! • 何が問題か?
5.
対象が複雑になったら・・・ • フォームの項目が大量になったら・・・ • 描画するHTMLが複雑になったら・・・ •
AJAXの成功結果を受けて連動する処理が増 えたら・・・ • 監視するDOMイベントが増えたら・・・
6.
フォームの項目が大量になったら・・・ ここが増える
7.
描画するHTMLが複雑になったら・・・ ここが増える
8.
AJAXの成功結果を受けて連動する処 理が増えたら・・・ ここが増える
9.
監視するDOMイベントが増えたら・・・ ここが増える
10.
対象が複雑になったら・・・ • ソースコードの見通しが悪くスパゲッティ化し、 あとからソースを見たときに解読が難しくなる。 • どこに修正を加えていいかわかりづらい •
修正がどこに影響するかわかりづらい 保守性の大幅な低下!
11.
どこが悪いのか?
12.
どこが悪いのか? DOMイベントハンドラの中 に
13.
どこが悪いのか? AJAXの処理が記述され、
14.
どこが悪いのか? Model(ここではデータ)をDOM から値を取得して構築し、
15.
どこが悪いのか? • イベントハンドリング • モデルの構築 •
AJAX通信処理 • Viewの更新 •を1カ所に実装しているのが悪い。
16.
改善その1 ~イベントハンドラの分離~ • http://jsfiddle.net/Y49kF/
17.
改善その2 ~View更新処理の分離~ • http://jsfiddle.net/bL9R6/
18.
改善その3 ~データとAjax通信の分離~ • http://jsfiddle.net/wF4tX/
19.
改善その4 ~ModelからViewの分離~ • http://jsfiddle.net/zs4tx/
20.
こういうアプリケーションの作り方を フレームワーク化したい • 注意: MVC云々は忘れましょう –
頭の中のMVCモデルは捨ててください
21.
Backbone.js • http://jsfiddle.net/827eH/
22.
Backbone.js • http://jsfiddle.net/827eH/ Model情報 イベントマッピング テンプレート Ajax通信処理 Ajaxコールバック処理
23.
Backbone.js (よりBackboneらしい書き方) • http://jsfiddle.net/A7qj3/
24.
Backbone.js (よりBackboneらしい書き方) • http://jsfiddle.net/A7qj3/ コールバックを直接書かず pub/subパターンで処理 イベントを購読
25.
Backbone.js (よりBackboneらしい書き方) • http://jsfiddle.net/A7qj3/ this.collectionが“add”イベントを発行 this.collectionの“add”イベントが発 行されたら、this.addLineを実行する
26.
Backbone.js (さらにBackboneらしい書き方) • http://jsfiddle.net/AST2V/
27.
Backbone.js (さらにBackboneらしい書き方) • http://jsfiddle.net/AST2V/ 意味のある(制御する)DOMの単位で Viewを分割する
28.
Viewの分割
29.
Viewの分割 NewStatusView StatusesView StatusLineView
30.
データバインディングを改善 jQueryのセレクタで値を一つ 一つ取得してModelに設定 jQueryのセレクタで一つ一つ DOMを更新
31.
• Backbone.stickitを導入 • http://jsfiddle.net/S66eE/ データバインディングを改善
32.
• Backbone.stickitを導入 • http://jsfiddle.net/S66eE/ データバインディングを改善 DOMの要素とModel の属性とのマッピング 定義 this.modelとthis.$el のバインディング フォームを更新すると勝手に modelもアップデート modelを更新するとフォームも 勝手にもアップデート
33.
Backbone.jsのアーキテクチャ 準備中(してないけど)
34.
Angular.js • http://jsfiddle.net/nmCTY/
35.
Angular.js (よりangularらしい書き方) • http://jsfiddle.net/F3mAv/
36.
Angular.js (よりangularらしい書き方) • http://jsfiddle.net/F3mAv/ DI
37.
Angular.js • http://jsfiddle.net/HALKq/ Angular.jsは変数名でDIしてくれるが、 JavaScriptコード圧縮した場合、変数 名が変わってしまうため、明示的に アノテートするのがベター。
38.
Angular.js • http://jsfiddle.net/HALKq/ 自動化ツールあり https://github.com/btford/ngmin
39.
Angular.jsのアーキテクチャ 準備中(してないけど)
40.
Backbone.js or Angular.js •
今回のサンプルだと圧倒的にBackboneが不 利!
Descargar ahora