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
GopherCon Tour 概略
logica0419
2
190
バイブコーディングと継続的デプロイメント
nwiizo
2
410
「Verify with Wallet API」を アプリに導入するために
hinakko
1
230
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
270
20250929_QaaS_vol20
mura_shin
0
110
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
400
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
120
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
340
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Mobile First: as difficult as doing things right
swwweet
224
10k
Navigating Team Friction
lara
189
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Visualization
eitanlees
148
16k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Site-Speed That Sticks
csswizardry
11
880
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.
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ