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
サーバーサイドエンジニアも知っておくべきフロントエンドの今
Search
itkrt2y
March 22, 2019
Technology
55
120k
サーバーサイドエンジニアも知っておくべきフロントエンドの今
Rails Developers Meetup 2019
itkrt2y
March 22, 2019
Tweet
Share
More Decks by itkrt2y
See All by itkrt2y
ざっくり学ぶ言語のしくみ
itkrt2y
4
4k
Other Decks in Technology
See All in Technology
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
760
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
240
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
170
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
280
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
20240912 JJUGナイトセミナー
mii1004
0
130
プログラム検証入門
riru
5
760
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
120
Road to Single Activity
yurihondo
1
200
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
1
1.1k
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.1k
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
179
21k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
How STYLIGHT went responsive
nonsquared
93
5.1k
Designing Experiences People Love
moore
138
23k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
How to train your dragon (web standard)
notwaldorf
85
5.6k
In The Pink: A Labor of Love
frogandcode
139
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Transcript
αʔόʔαΠυΤϯδχΞ ͓͖ͬͯ͘ ϑϩϯτΤϯυͷࠓ
ࣗݾհ • ൘ ୡ (@itkrt2y) • λέϢʔɾΣϒגࣜձࣾ • Ruby on
Rails ͷडୗ։ൃձࣾ • RubyKaigi 2019 Platinum εϙϯαʔ • Ruby on Rails ͷ͓ࣄืूதʂ
None
ࠓ͢͜ͱ ϑϩϯτΤϯυͷ 1. ݱࡏͷΤίγεςϜ 2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ
ࠓ͢͜ͱ ϑϩϯτΤϯυͷ 1. ݱࡏͷΤίγεςϜ <= 2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ
ݱࡏͷΤίγεςϜ
ݴޠ
ݴޠ TypeScript TS ʹग़དྷͳ͍ཧ༝͕͋Δ߹ͷΈ ESNext ʮTS Λಋೖ͖͔͢ʯͰΉ࣌ط ʹऴΘ͍ͬͯΔ
ίϯύΠϧʢτϥϯεύΠϧʣઌ Ұൠతʹ ES5 ͨͩɺͦΖͦΖ IE11 ඇରԠͷܾஅΛͯ͠ɺES2015 Ҏ্ʹͯ͠ ͍͍࣌
DOM ཧ
DOM ཧ Ծ DOM ܥʢએݴత Viewʣ • React • Vue
• Angular • Elm
એݴత View ʹΑΓ DOM ͕ཧՄೳʹ Ҏલ jQuery ͳͲͰखଓ͖తʹ DOM Λૢ࡞͍ͯͨ͠ɻ
Ծ DOM ʹΑͬͯαʔόʔαΠυతͳʮ͋Δঢ়ଶʹରͯ͋͠ Δ͖ DOM Λఆٛ͢Δʯͱ͍͏એݴత View ͷύϥμΠϜ͕ϑ ϩϯτΤϯυʹ࣋ͪࠐ·ΕɺJS Ͱ DOM ΛཧͰ͖ΔΑ͏ʹ ͳͬͨɻ
lit-html Google ͷ Polymer νʔϜ͕࡞͍ͬͯΔ ϥΠϒϥϦ Ծ DOM Ͱͳ͍͚ͲɺDOM ͷ
diff Λऔͬͯࠩߋ৽ग़དྷͯɺԾ DOM ܥ ΑΓ͍ ·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ ͓͍ͬͯͯଛͳ͍Ͱ͢
Editor
Editor Visual Studio Code vscode + TypeScript + ESLint +
Prettier ͷ։ൃମݧ͕ྑ͗͢Δɻ ଞͷΤσΟλΛ͍͍ͨਓɺ·ͣ͜ ͷ։ൃମݧΛຯΘ্ͬͨͰଞͷΤσΟλ Λ͍ͬͯͩ͘͞ɻ
Linter
Linter • ESLint • TSLintʢͨͩ͠ɺۙʑ deprecated ʹ ͳΔʣ ੲ JSHint,
JSLint ͳͲ͋Γ·͕ͨ͠ɺ ࠓ ESLint Ұڧ
Formatter
Formatter Prettier ࠓʹೖ͔ͬͯΒ prettier-ruby ͷ։ൃ ͕ٸܹʹਐΜͰ͍Δͷ͕ͱͯخ͍͠
module bundler
module bundler • WEB αʔϏε։ൃ => webpack • ϥΠϒϥϦ։ൃ =>
Rollup pika ͷಈཁνΣοΫ webpacker Θͳ͍ํ͕͍͍Ͱ͢
Test
Test • Jest • E2E ςετ Jest + Puppeteer ੲ
Mocha, Chai, Karma, Jasmine ͳͲ ৭ʑ͋Γ·͕ͨ͠ɺࠓجຊ Jest
ඇಉظॲཧ
ඇಉظॲཧ axios GET ͚ͩͳΒ fetch Ͱ͍͍Ͱ͕͢ɺGET Ҏ֎Λ࢝͠ΊΔͱ໘ ʹͳΔͷͰ axios ͕Φεεϝ
ajax ࠓ͔Βಋೖ͢Δٕज़Ͱ͏ͳ͍Ͱ͢
Web Components
Web Components polyfill ΛೖΕΕ͑Δٕज़ʹͳ͍ͬͯΔɻ ͨͩɺpolyfill ͷग़དྷ͕ѱ͍ͱ͍͏͕͋ΔͷͰɺ͏࣌ҙ ͕ඞཁɻ
Web Components ͰԾ DOM ࢮ͵ʁ ݱঢ়ͷ Web Components Ծ DOM
ʹൺͯ໌Β͔ʹػೳ ͕Γ͍ͯͳ͍͠ෆࣗ༝ͳͷͰɺࠓͷͱ͜ΖͦΕͳ͍ ͨͩɺWeb Components Ͱॻ͚Δͷ Web Components Ͱ ॻ͘ྲྀΕʹͳ͖͍ͬͯͯΔɻ
Ҏ্ɺݱࡏͷΤίγεςϜͰͨ͠
ࠓ͢͜ͱ ϑϩϯτΤϯυͷ 1. ݱࡏͷΤίγεςϜ 2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ <=
࠷ۙͷͷ
࠷ۙͷͷ • CDN Worker • Micro Frontends • PWA •
ϨϯμϦϯά࠷దԽ • Web Payments / Web Authentication
࠷ۙͷͷ • CDN Worker <= ࠓ͜Ε͚ͩ • Micro Frontends •
PWA • ϨϯμϦϯά࠷దԽ • Web Payments / Web Authentication
CDN Worker
͓͜ͱΘΓ ਖ਼໊ࣜশ͕ଟଘࡏ͠ͳ͍ͷͰɺCDN Worker ԾͷදݱͰ͢
CDN Worker ͱʁ CDN ͷϦΫΤετɾϨεϙϯεʹϑοΫͯ͠ɺCDN ͷ͋Δ ΤοδϩέʔγϣϯͰॲཧΛΒͤΔ͜ͱͷͰ͖Δ JS ࣮ߦڥ
ϓϥοτϑΥʔϜ • AWS Lambda@Edge + CloudFront • Cloudflare Workers •
Google Cloud Functions + Firebase Hosting Cloud Functions ͷ࣮ߦڥΤοδϩέʔγϣϯͰͳ͍͕ɺΕΔ͜ͱେମಉ͡
CDN Worker ͷ ͍ͱ͜Ζ
BFF Λ Τοδϩέʔγϣϯʹ ஔ͚Δ
BFF Backend For Frontend ϑϩϯτΤϯυͱόοΫΤϯυͷհ ׂͷྫ • ೝূ • API
Aggregation • Server Side Rendering • Cache
SPA ٕज़Λ༻͍ͨڥͰ ͜Ε·ͰΓ͔ͨͬͨ͜ͱͱ ͦͷ՝
Γ͔ͨͬͨ͜ͱ 1 1. FMP / SEO Λ࠷దԽ͍ͨ͠ 2. ͦͷͨΊʹɺϨϯμϦϯάࡁΈ HTML
ΛΫϥΠΞϯτʹૹΓͨ ͍ 3. ͭ·ΓɺSSR ͍ͨ͠ ՝ SSR ʹ JS ࣮ߦڥ͕ඞཁ
Γ͔ͨͬͨ͜ͱ 2 1. RTT ΛߴԽ͍ͨ͠ 2. ͦͷͨΊʹɺ௨৴ڑΛ࠷ʹ͍ͨ͠ 3. ͭ·ΓɺΤοδϩέʔγϣϯͰ௨৴Λ͍݁ͨ͠ ՝
ಈతαΠτͷ߹ɺΦϦδϯαʔόʔͰ HTML Λ࡞ͬͯૹͬͯΒΘ ͳ͚ΕͳΒͳ͍
CDN Worker ͳΒղܾͰ͖Δ • ΤοδϩέʔγϣϯͰϨϯμϦϯάͯ͠ϨεϙϯεΛฦͤΔ • ϨϯμϦϯάࡁΈ HTML Λ CDN
ʹΩϟογϡ͢Δ͜ͱͰɺ2 ճҎ߱ͷϨε ϙϯε͞Βʹ͍ • ࠷ߴͷ RTT / FMP / SEO • ϨϯμϦϯά༻ͷ Node.js αʔόʔΛࣗલͰݐͯͳ͍͍ͯ͘ • ΦϦδϯαʔόʔΛͲͷϦʔδϣϯʹஔ͍͕ͯͳ͘ͳΔ • ίετͷ͍҆ɾαʔϏεఏڙͷૣ͍ϦʔδϣϯΛબͰ͖ΔΑ͏ʹͳΔ • ΦϦδϯαʔόʔͷϦΫΤετΛ࠷খԽͰ͖Δ
Ұ൪ظ͍ͯ͠ΔϓϥοτϑΥʔϜ
Ҏ্ɺCDN Worker Ͱͨ͠
࠷ޙʹɺϑϩϯτΤϯυʹ͍͍ͭͯ͑ͨ͜ͱ • ΤίγεςϜेʹख़͍ͯ͠Δ • ։ൃମݧ͕ͷ͘͢͝ྑ͘ͳ͍ͬͯΔ • ϥΠϒϥϦͷཚཱམͪண͍͍ͯͯɺมԽૣ͘ͳ͍ • ࠷ۙͷ UX
ʹ݁͢Δͷ͕ଟ͍ • ϢʔβʔͷͨΊʹɺαʔόʔαΠυΤϯδχΞཧղ࣮͠ફ͢Δ͖ • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ ଘࡏ͢Δ • ࠷దͳઃܭΛߟ͑ΔʹɺϑϩϯτΤϯυͷࣝඞਢ