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
スクラムチームだけどエクセルで要件定義書を書くことにしました / Requirements-Specification-Document-in-Scrum
okamototakuyasr2
0
120
OODAふりかえり 何って…ただ毎スプリント、違うふりかえり手法を採用してるだけだが? / Retrospectives with OODA
kakehashi
11
2.2k
Kotlinらしいコードを書こう - Convert Java File to Kotlin File のあとにやること / What to do after Convert Java File to Kotlin File
yanzm
0
1.6k
こんなに違うよ MySQLとPostgreSQL /
sakaik
17
10k
Godot Engineを使った vision OSアプリ開発について
limes2018
0
100
私たちはなぜ事業責任者にならないといけないのか ~Webサービスを作る茨の道~
gimupop
4
1.6k
Adaptor, Helmet, SSG
watany
0
120
[GSF Japan] AIとSustainabilityの不思議な関係
dahatake
3
110
10社以上のCTO/技術顧問を経験してみえた 技術組織に起こる課題と対策
otani_yuji
1
930
BedrockUpdatesPost-GW Summary
hedgehog051
2
160
新常識! Javascript×AWS Lambdaがアツい!!
watany
3
140
OpenTelemetry Meetup 2024-06 - ABEMA と分散トレーシングのあゆみ
tetsuya28
0
230
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
Building Your Own Lightsaber
phodgson
101
5.8k
Music & Morning Musume
bryan
42
5.8k
Bash Introduction
62gerente
606
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
28
1.8k
Clear Off the Table
cherdarchuk
87
320k
How GitHub (no longer) Works
holman
305
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
How to name files
jennybc
66
95k
Thoughts on Productivity
jonyablonski
62
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.2k
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
ʹ݁͢Δͷ͕ଟ͍ • ϢʔβʔͷͨΊʹɺαʔόʔαΠυΤϯδχΞཧղ࣮͠ફ͢Δ͖ • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ ଘࡏ͢Δ • ࠷దͳઃܭΛߟ͑ΔʹɺϑϩϯτΤϯυͷࣝඞਢ