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.2k
社内で初SPAをAngularで完成させるまでとその後
#roppongirb
hatappi
May 31, 2017
Tweet
Share
More Decks by hatappi
See All by hatappi
RubyではじめるGraphQL
hatappi
0
690
RubyでChainerつくってます!!
hatappi
2
1.3k
TDDな個人開発
hatappi
0
210
できるだけ楽して楽しくRails開発しよう
hatappi
2
280
EKSにRailsをのせた
hatappi
1
970
RubyとApache Arrow
hatappi
0
1.9k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2k
Fargateで夢は見られるのか
hatappi
1
1.9k
個人サービスをFargateに移行したよ
hatappi
1
560
Other Decks in Technology
See All in Technology
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
240
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
330
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
3
12k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
110
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.5k
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Happy Clients
brianwarren
92
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Product Roadmaps are Hard
iamctodd
44
9.7k
A Tale of Four Properties
chriscoyier
151
22k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Agile that works and the tools we love
rasmusluckow
325
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
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