Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJS 勉強会 #4 - 実戦!AngularJS
Search
Makoto Sakata
December 03, 2013
Technology
20
12k
AngularJS 勉強会 #4 - 実戦!AngularJS
Makoto Sakata
December 03, 2013
Tweet
Share
More Decks by Makoto Sakata
See All by Makoto Sakata
Hubotレビュアーおみくじ @ githubkaigi
sakatam
14
3k
Other Decks in Technology
See All in Technology
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
190
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
rrreeeyyy
0
120
20250807 Applied Engineer Open House
sakana_ai
PRO
2
620
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
380
会社にデータエンジニアがいることでできるようになること
10xinc
7
900
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1k
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
210
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2.6k
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
110
Kiro と Q Dev で 同じゲームを作らせてみた
r3_yamauchi
PRO
1
120
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
390
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Site-Speed That Sticks
csswizardry
10
770
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Documentation Writing (for coders)
carmenintech
73
5k
Building Applications with DynamoDB
mza
96
6.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
࣮ઓ! AngularJS AngularJS ͷϓϩμΫτద༻ܦݧ͔ΒֶΜͩ͜ͱ
ࣗݾհ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform
Inc. ! લ৬: Gilt Groupe Japan!
ࣗݾհ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform
Inc. ! લ৬: Gilt Groupe Japan!
ΞδΣϯμ ❖ ϓϩδΣΫτʹ͍ͭͯ! ❖ γεςϜߏˍਓһߏ! ❖ ͳΜͰAngularJSʁ (vs. Backbone.js)! ❖
։ൃϑϩʔ! ❖ ࣮ઓೖ࣌ͷTips
ϓϩδΣΫτʹ͍ͭͯ
ϓϩδΣΫτʹ͍ͭͯ • ։ൃظؒ: ͓Αͦ3ϲ݄ؒ (20135݄ʙ7݄)! • EίϚʔεαΠτ(νέοςΟϯάɾαʔϏε) ͷϦχϡʔΞϧ! • Mobile
First Ξϓϩʔν! • ͍ͭͰʹ AngularJS
❖ ݁Ռ! ❖ https://m.giltcity.jp ϓϩδΣΫτʹ͍ͭͯ
❖ ݁Ռ! ❖ https://m.giltcity.jp! ❖ ͱ্ͬͯख͍͖͘·ͨ͠ɻ ϓϩδΣΫτʹ͍ͭͯ
γεςϜˍਓһߏ ❖ چߏ - ϨΨγʔSOA jsp! java servlet Legacy API
(RPC) DB
γεςϜˍਓһߏ ❖ ৽ߏ - ϞμϯSOA jsp! java servlet Legacy API
(RPC) DB AngularJS App Node.js (REST) Legacy API (RPC) DB
γεςϜˍਓһߏ ❖ ਓһ AngularJS App Node.js (REST) Legacy API (RPC)
DB UX σβΠφʔ Frontend JS ΤϯδχΞ Backend JS ΤϯδχΞ
ͳΜͰAngularJSʁ (vs. Backbone.js)
ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ GiltͷϝΠϯϓϩμΫτBackbone.js
ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ Backbone.js! ❖ ॊೈੑ͕ߴ͍! ❖ ͦͷ໘ɺ։ൃऀͷྗྔͰίʔυ࣭͕Β͖͍ͭ͢! ❖
ίʔυͷϞδϡʔϧԽ։ൃऀ࣍ୈ
ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕Ή͔͍ͣ͠ ❖ Backbone.js! ❖ ॊೈੑ͕ߴ͍! ❖
ͦͷ໘ɺ։ൃऀͷྗྔͰίʔυ࣭͕Β͖͍ͭ͢! ❖ ίʔυͷϞδϡʔϧԽ։ൃऀ࣍ୈ
❖ AngularJS! ❖ ॊೈੑͰBackbone.jsʹྼΔ͕…! ❖ Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͢͠͞)! ❖ DI/Module! ❖
APIϨεϙϯεmockՄೳ → B/E։ൃͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ ͳΜͰAngularJSʁ (vs. Backbone.js)
ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕؆୯ ❖ AngularJS! ❖ ॊೈੑͰBackbone.jsʹྼΔ͕…! ❖
Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͢͠͞)! ❖ DI/Module! ❖ APIϨεϙϯεmockՄೳ → B/E։ൃͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ
։ൃϑϩʔ
❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5:
νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν
❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5:
νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → ج൫ͮ͘Γʹ࣌ؒΛ͔͚ͨͷ͕ޭͨ͠! ɾϑΝΠϧߏɾϏϧυϓϩηε ɾAPIΫϥΠΞϯτͳͲͷجఈΫϥε
❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5:
νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → FrontendΤϯδχΞʹ͔ͬ͠ΓೃΕͯΒ͏ ɾDI / Ϟδϡʔϧࢤ / ςετϑΝʔετͷ֓೦ཧղ ɾͪΐͬͱͨ͠DirectiveΛ࡞ͬͯΈΔ
❖ ։ൃΠςϨʔγϣϯ! ❖ ҰൠతͳΣϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά
/ Unit Test / Viewεέϧτϯ࣮! ❖ CSSελΠϦϯά ։ൃϑϩʔ
։ൃϑϩʔ → ʮී௨ʹʯςετɾϑΝʔετͰ͖Δʂ ɹ͜ͷϓϩδΣΫτͰ! ɹɾUnit Test ඞਢ! ɹɾEnd to End
Test ΫϦςΟΧϧɾύε֬ೝ༻ ❖ ։ൃΠςϨʔγϣϯ! ❖ ҰൠతͳΣϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά / Unit Test / Viewεέϧτϯ࣮! ❖ CSSελΠϦϯά
AngularJS ࣮ઓೖͷTips
❖ ֊Խ͞ΕͨϞσϧɾσʔλͷঢ়ଶཧ! ❖ viewͱ݁͠ͳ͍Ϟσϧͷঢ়ଶΛͲ͏ཧ͢Δ͔ʁ! ❖ = AngularJSͷॴʮγϯϓϧͳϞσϧʯͷ෭࡞༻! ❖ ຊՈGoogle GroupsͰٞʹͳ͍͕ͬͯͨɺ໌֬ͳ
͑ແ͠ (http://goo.gl/j0BqM1)! ❖ ͜ͷϓϩδΣΫτͰɺϞσϧΛઙͯ͘͠ճආ AngularJS ࣮ઓೖͷTips
❖ $rootScope.$broadcast! ❖ ≒ େҬδϟϯϓ! ❖ ศརͳ͚ͩʹதಟੑ͕͋Δ! ❖ ͍͗͢ΔͱDIͷҙຯ͕ͳ͘ͳΔͷͰҙʂ AngularJS
࣮ઓೖͷTips
❖ ԾҾͷMinifyରԠ! ❖ Minify͞Εͯಈ͔ͳ͘ͳΔͷΛ͙ AngularJS ࣮ઓೖͷTips
❖ ϦΫΤετͷංେԽ! ❖ ΞϓϦຊମˍϏϡʔ! ❖ httpͷίετ͕ߴ͍ϞόΠϧ͚αΠτཁҙ! ❖ Ϗϧυ࣌ʹόϯυϧ͢Δ! ❖ webmake
ͰΞϓϦέʔγϣϯΛ·ͱΊΔ! ❖ angular-template Ͱ view Λόϯυϧ! ❖ APIͷઃܭΛ͢Δ AngularJS ࣮ઓೖͷTips
❖ SEO/Crawlerରࡦ! ❖ single-page appશൠͷͰ͕͢! ❖ User-Agentผͯ͠ɺPhantomJSͰ αʔόαΠυϨϯμϦϯά͢Δͷָ͕ AngularJS ࣮ઓೖͷTips
❖ ᐜ༕ͩͬͨ͜ͱ! ❖ Two-way Binding ʹΑΔϨεϙϯεѱԽ! ❖ ԆϩʔυʹΑΔϨΠΞτͣ͘Ε! ❖ AngularJSຊମͷαΠζ
(minifyͯ͠100KB) AngularJS ࣮ઓೖͷTips → ܕམͪAndroidͰαΫαΫ
❖ ΄ͲΑ੍͍ɾϞδϡʔϧԽͷڧ੍! ❖ FrontendΤϯδχΞͷఈ্͛! ❖ AngularJSνʔϜ։ൃ͖ ΨϯΨϯ࣮ઓೖ͍ͯͩ͘͠͞ʂ (ͨͩ͠ࣄલ४උ೦ೖΓʹ) ·ͱΊ
❖ ʮຊͰ௨͑ΔγϦίϯόϨʔͷελʔτΞοϓʯ! ❖ ΤϯδχΞืूதͰ͢ (Frontend & Backend)! ❖ Rails /
Node.js / CoffeeScript! ❖ ࣍ظϑϩϯτΤϯυAngularJSΛ࠾༻༧ఆ! ❖ http://kaizenplatform.in/ KAIZEN Platform Inc.
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ