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
2.9k
Other Decks in Technology
See All in Technology
SDカードフォレンジック
su3158
1
640
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
770
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
460
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
110
プロダクト開発におけるAI時代の開発生産性
shnjtk
2
240
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
1
500
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
4
670
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
470
QA/SDETの現在と、これからの挑戦
imtnd
0
140
AIエージェント開発手法と業務導入のプラクティス
ykosaka
7
1.8k
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
150
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
13
4.3k
Featured
See All Featured
Scaling GitHub
holman
459
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Being A Developer After 40
akosma
91
590k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
680
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Unsuck your backbone
ammeep
670
57k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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.
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ