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
社内で初SPAをAngularで完成させるまでとその後
Search
hatappi
May 31, 2017
Technology
1
2.4k
社内で初SPAをAngularで完成させるまでとその後
#roppongirb
hatappi
May 31, 2017
Tweet
Share
More Decks by hatappi
See All by hatappi
RubyではじめるGraphQL
hatappi
0
810
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
280
できるだけ楽して楽しくRails開発しよう
hatappi
2
310
EKSにRailsをのせた
hatappi
1
1.1k
RubyとApache Arrow
hatappi
0
2.3k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.3k
Fargateで夢は見られるのか
hatappi
1
2.1k
個人サービスをFargateに移行したよ
hatappi
1
640
Other Decks in Technology
See All in Technology
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
120
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.9k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
What's new in Go 1.24?
ciarana
1
110
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
540
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
140
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
A Tale of Four Properties
chriscoyier
158
23k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Visualization
eitanlees
146
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Bash Introduction
62gerente
611
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Transcript
ࣾͰॳSPAΛAngularͰ ͤ͞Δ·Ͱͱͦͷޙ by hatappi @Roppongi.rb #3 "Rails x Frontend-Tech" 1
ࣗݾհ • ໊લ: ാத ༔࡞ • hatappi: hatappi1225: • ձࣾ:
גࣜձࣾSpeee 2
3
4 ͜Ε1ϲ݄લ ·Ͱ͓͠Ͱ͢
5 ·ͣ͡Ίʹ
6 Angular2 ??? Angular4 ???
AngularͬͯݺΜͰͶ 7 IUUQTXXXZPVUVCFDPNXBUDI WB+*.P-HR6@PGFBUVSFZPVUVCFU
ސ٬ཧγεςϜͷ࡞ • ݩʑӡ༻͞Ε͍ͯͨ֎෦αʔϏεΛϦϓϨΠε͢Δ ϓϩδΣΫτ • 20166݄͘Β͍ʹfirst commitͯ͠10݄͘Β͍ ʹϦϦʔε • RailsΛAPIͱͯ͠༻ͯ͠ϑϩϯτTypescriptͰ
AngularΛͬͯ·͢ 8
γεςϜߏ • Rails5͔ΒೖͬͨAPI ModeΛ ༻ͨ͠APIαʔόʔ • JSϑΝΠϧ܈Λ͢ΔΠϯ ελϯε • ͯ͢httpsԽࡁΈ
(GCS͕httpsʹରԠ͍ͯͨ͠JS ϑΝΠϧ܈͔ͦ͜Β͠ ͔ͨͬͨ) 9
Angularͷར༻ཧ༝ • جװγεςϜͱͳΔͷͰଞͷαʔϏε͔Βࢀর͞ ΕΔલఏ͕͋ΔͷͰAPIͱϑϩϯτΛ͢Δઃܭ ʹͨ͠ͷͰϑϩϯτͰಠཱͨ͠ͷ͕ඞཁͩͬͨ • AngularΛͬͯΈ͔ͨͬͨ 10
AngularΛ࠾༻ͯ͠ྑ͔ͬͨ • webpackͷઃఆͱ͔ࣗͰ͢Δͷ... • AngularͰఏڙ͍ͯ͠·͢ @angular/cli 11 • http clientԿ͓͏…
• AngularͰఏڙ͍ͯ͠·͢ @angular/http • routerͲ͏͠Α͏... • AngularͰఏڙ͍ͯ͠·͢ @angular/router
AngularΛ࠾༻ͯ͠ྑ͔ͬͨ 12 ΄͍͠ͷ΄ͱΜͲ "OHVMBS͕ఏڙͯ͘͠Εͨ
13 ։ൃ࣌ͷۤ࿑
։ൃ࣌ͷۤ࿑ • ֶशίετͷ૿Ճ • Rails͚ͩͰͳ͘Angularͱ͍͏Framework • Railsͷศརͳhelper༻Ͱ͖ͳ͍ • form_for,link_toͳͲ͑ͳ͍ͷͰࣗͰhtml Λॻ͘
• I18nʹؔͯ͠APIͱFrontͰͷ2ॏͰཧ 14
15 ϦϦʔεޙͷۤ࿑
16 ॳظϩʔσΟϯά͕͍! ͍͍ͩͨ8ඵڧ
17 SPAͳΜͰ࠷ॳͷϩʔσΟϯά ͔͔࣌ؒΓ·͢ʁ
18
ྲྀೖͷେChatwork 19 Google Analytics
ղܾࡦ • ϦϦʔεॳຊ൪ͰJITίϯύΠϧΛߦ͍ͬͯͨ • CLIͰAoTίϯύΠϧͰϏϧυ͢ΔΦϓγϣϯ͕͋ ΔͷͰͦΕΛ༻ 20 # 1.0.0-beta.28͔Β--prodͰ--aot͕defaultͰtrue ng
build --prod --aot=true
ͦͷ݁Ռ • ॳظϩʔσΟϯά2ඵҎԼ͘Β͍ • ࣄલʹίϯύΠϧͨ͠ͷΛ͢ΔͷͰϑΝΠϧ αΠζ૿͑Δ͕gzipͰѹॖͯ͠ 21 ,# .
ංେԽ͠ͳ͍ͨΊʹ • Կߟ͑ͳ͍ͱػೳΛ͚͍ͯ͘͠͝ͱʹϑΝΠ ϧαΠζ૿͍͑ͯ͘ • Lazy LoadingػೳΛ༻ͯ͋͠·ΓΘͳ͍ػೳ ͳͲΞΫηε͕͋ͬͨ࣌ʹಡΈࠐ·ΕΔΑ͏ʹ͢ Δ 22
23 ·ͱΊ
·ͱΊ • Ϣʔβʔʹ৽͍͠Ϣʔβʔମݧ͕༩͑ΒΕͨ • ڹ͕͋ͬͨͱݴΘͳ͍ • RailsͱAngularͱ͍͏Έ߹ΘͤΛߟ͑ΔͳΒݸਓతʹ webpackerΛΘͣʹCLIΛͬͨ΄͏͕ྑ͍ • ࢀߟ:Rails+webpackerͰAngularΛ͞ΘͬͯΈΔ
http://hatappi.hateblo.jp/entry/2017/05/20/180706 • AngularΛΔ্Ͱng-japanͱ͍͏slackνʔϜʹೖΔͱ ͔ͲΔ 24