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
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
140
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
230
Definition of Done
kawaguti
PRO
6
460
実践! AIエージェント導入記
1mono2prod
0
140
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
9.5k
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
490
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
220
AIのAIによるAIのための出力評価と改善
chocoyama
0
510
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
110
原則から考える保守しやすいComposable関数設計
moriatsushi
3
500
Welcome to the LLM Club
koic
0
140
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Faster Mobile Websites
deanohume
307
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
628
61k
A Tale of Four Properties
chriscoyier
160
23k
Unsuck your backbone
ammeep
671
58k
Designing Experiences People Love
moore
142
24k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
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.
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ