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
DevRelの始め方
moongift
PRO
2
410
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
1.1k
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
120
白金鉱業Meetup Vol.15 効果検証の怖い話_tomokazuABE_20240919
brainpadpr
2
340
Passkey Autofill に賭けるマネーフォワード ID - Money Forward Tech Day 2024
nov
1
550
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
220
フルカイテン株式会社 採用資料
fullkaiten
0
32k
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
120
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
170
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
10
1.7k
mcwithcode プロジェクト概要
takunology
0
7.9k
あなたの知らないiOS開発の世界
recruitengineers
PRO
4
200
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
How GitHub (no longer) Works
holman
310
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Speed Design
sergeychernyshev
22
440
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
The World Runs on Bad Software
bkeepers
PRO
64
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Code Reviewing Like a Champion
maltzj
517
39k
Faster Mobile Websites
deanohume
304
30k
Teambox: Starting and Learning
jrom
131
8.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
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
ʹ݁͢Δͷ͕ଟ͍ • ϢʔβʔͷͨΊʹɺαʔόʔαΠυΤϯδχΞཧղ࣮͠ફ͢Δ͖ • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ ଘࡏ͢Δ • ࠷దͳઃܭΛߟ͑ΔʹɺϑϩϯτΤϯυͷࣝඞਢ