Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
「フロントエンド領域」を再定義する
Koutarou Chikuba
November 09, 2020
Technology
50
33k
「フロントエンド領域」を再定義する
Frontend Study #1
訂正: 最後のzennの記事のリンク先は、正しくは
https://zenn.dev/mizchi/articles/c638f1b3b0cd239d3eea
です
Koutarou Chikuba
November 09, 2020
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
V8 as a container on CDN Edge worker
mizchi
5
1.2k
Edge Side Frontend という新領域
mizchi
28
12k
バンドル最適化マニアクス at tfconf
mizchi
6
3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
46
19k
Deno Node 両刀
mizchi
5
1.8k
光を超えるためのフロントエンドアーキテクチャ
mizchi
82
20k
ServiceWorkerSideReactServerSideRendering
mizchi
5
740
Development Tools for Next Generation
mizchi
16
1.4k
加速するフロントエンドとPWA
mizchi
56
15k
Other Decks in Technology
See All in Technology
SPA・SSGでSSRのようなOGP対応!
simo123
2
140
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
1.3k
ついに来る!TypeScript5.0の新機能
uhyo
16
8.7k
オンプレk8sとEKSの並行運用の実際
ch1aki
0
130
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
220
ステート管理を超えるRecoil運用の考え方
uhyo
7
5.2k
GraphQLスキーマ設計の勘所
yukukotani
26
5.8k
1日5分!子育て中もインプットを続ける工夫
morihirok
1
350
Virtual Thread - 導入の背景と、効果的な使い方 -
skrb
3
240
Airdrop for Open Source Projects
epicsdao
0
250
OCIコンテナサービス関連の技術詳細 /oke-ocir-details
oracle4engineer
PRO
0
750
グローバルチームことはじめ / Bootstrapping a global team
tasshi
1
570
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
A better future with KSS
kneath
230
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
A Philosophy of Restraint
colly
193
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Become a Pro
speakerdeck
PRO
6
3.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Six Lessons from altMBA
skipperchong
15
2.3k
Why Our Code Smells
bkeepers
PRO
326
55k
Agile that works and the tools we love
rasmusluckow
320
20k
Transcript
ʮϑϩϯτΤϯυྖҬʯΛ MIZCHI - അޫଠ / PLAID INC FRONTEND STUDY #1
࠶ఆٛ͢Δ
ABOUT ▸ @mizchi / അޫଠ ▸ Frontend Engineer ▸ React
/ Node / SPA ▸ Web ͷ࠷৽ٕज़Ͱ৽͍͠ମݧΛ࣮ূ - ఏڙ͢Δͷ͕͖
ࠓ͢༰ ▸ ͜ͷ10ͷৼΓฦΓͱ࠷ۙͷτϨϯυ ▸ next.js ʹݟΔϕετϓϥΫςΟε ▸ ϑϩϯτΤϯυͷྖҬͷมԽ ▸ Cloudflare
Workers ͕Γ։͘৽ྖҬ
͡Ίʹɿҙ ▸ ࣗ Frontend ͱ͍͏ΑΓ Node.js Engineer ʹ͍ۙ ▸ ࠷ઌʙۙະདྷͷΛ͢ΔͷͰɺഽצ͕߹Θͳ͍ਓ͍Δ͔
▸ ຊεϥΠυ Rails ʹ՞ΛചΓ·͕͢ɺRails ͕Ռׂͨͨ͠Λ൱ఆ͢Δ ͷͰ͋Γ·ͤΜ
͜͜10 ͷৼΓฦΓͱ ࠷ۙͷτϨϯυ
͜͜10ͷৼΓฦΓ ▸ IE First ͷ࣌ͷऴΘΓ ▸ Frontend ʹ͓͍ͯ Node.js ͕ࢧతͳϙδγϣϯʹ
▸ ʮಈ͘ςϯϓϨʔτΤϯδϯʯ͕ͨΓલʹ
IE First ࣌ͷऴΘΓ WorldWide Japan
IE First ࣌ͷऴΘΓ ▸ ʮIEͰಈ͔ͳ͍͔Β༷ΛIEʹ߹ΘͤΔʯ =>ʮϞμϯϒϥβਫ४Λຬͨ͞ͳ͍IEஈ֊తʹΓࣺͯΔʯ ▸ αϙʔτ͠ͳ͍Θ͚Ͱͳ͍͕ɺΛҾͬுΔ߹Δ ▸ ຊԻ:
IEରԠΛΓ͗͢ΔͱɺϞμϯϒϥβͷܦݧΛՔ͛ͳ͍…
Node.jsʹΑΔϑϩϯτΤϯυ ▸ Rails Sprockets ͳͲͷݴޠ/ϑϨʔϜϫʔΫ͝ͱͷϓϦϓϩηοα͕ഇΕͨ ▸ Node.js ʹΑͬͯ Frontend Toolchain
͕ఏڙ͞ΕΔΑ͏ʹͳͬͨ
ʮಈ͘ςϯϓϨʔτʯ͕ͨΓલʹ ▸ ԾDOMٕज़ʹΑΔએݴతUI͕ීٴ ▸ ʮςϯϓϨʔτΤϯδϯʯͷׂ͕ɺੲͳ͕ΒͷจࣈྻͷੜͰͳ͘ɺߏ ͱͦͷޙͷϩδοΫཧ͢Δ͜ͱʹมԽ ▸ ݱঢ়JSҎ֎ͷબࢶ͕ͳ͍
࠷ۙͷϑϩϯτΤϯυͷྲྀߦ ▸ ύϑΥʔϚϯεࢦ ▸ Opinionated ͳʮઃܭΑΓنʯ ▸ Modern JavaScript ≒
TypeScript
https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/ > JavaScriptΣϒͷCO2Ͱ͢ɻࢲͨͪͦͷ͏ͪͷ ͍͔ͭ͘Λඞཁͱ͍ͯ͠·͕͢ɺଟ͗͢Δͱੜଶܥશମ ͕ةݥʹ͞Β͞ΕΔ͜ͱʹͳΓ·͢ɻ࠷ଟ͘ഉग़ͯ͠ ͍Δਓ(༁ऀ: ։ൃऀ)ɺੜଶܥ่͕յ͢Δ·Ͱɺͦ ͷ݁Ռʹۤ͠Ή͜ͱ͔Β࠷ԕ͍ଘࡏͰ͢ɻJS ͷഉग़ ྔΛίϯτϩʔϧ͠ͳ͍ݶΓɺΣϒίϯϐϡʔςΟ
ϯά͕͔͏ࢢϑΥʔϜϑΝΫλʔͰޭ͢Δ͜ͱ ͳ͍Ͱ͠ΐ͏ɻ ‘JavaScript is CO2’ by Alex Russell (Google) 2018
ۙͷύϑΥʔϚϯεࢦ ▸ Lighthouse ʹΑΔείΞԽ ▸ WebVitals ʹΑΔ SEO ͷӨڹ ▸
ϑϩϯτΤϯυٕज़ SPA ͷҝͷٕज़Ͱͳ͘ɺ ʮWebͷϕετϓϥΫςΟεΛ࣮ݱ͢Δͷʯ
Opinionated ͳʮઃܭΑΓنʯ ▸ Deno ▸ Rome ▸ Blitz
Deno: A secure runtime for JavaScript and TypeScript. ▸ Node.js
ΦϦδφϧ࡞ऀͷ Ryan Dahl ʹΑΔ৽͍͠ Rust + V8 ͷ JS ॲཧܥ ▸ npm ΤίγεςϜΛ൱ఆ͠ ESM ͷ URL ύε͔Βґଘղܾ ▸ ࣮ߦ࣌ʹ໌ࣔతʹݖݶΛ༩͢Δαϯ υϘοΫεϞσϧ ▸ TypeScript First https://deno.land/
Rome: Unifying the frontend development toolchain ▸ Babel ΦϦδφϧ࡞ऀ sebmck
ʹΑΔ Node.js େ౷ҰπʔϧνΣΠϯ ▸ Babel, ESlint, Webpack, Prettier, Jest Λஔ͖͑Δ ▸ ֎෦ϥΠϒϥϦඇґଘͰࣗલͷ Parser / AST Ͱ౷Ұ ▸ TypeScript First https://rome.tools/
Blitz: The Fullstack React Framework ▸ Next.js + Prisma ORM
= Fullstack ▸ ϕετϓϥΫςΟεͷ٧Ί߹Θͤ + Code Generator ▸ react-query / react-final-form / zod / etc… ▸ meteor ෩ͷisomorphic ͳϦϞʔτؔݺͼग़͠(RPCม) ▸ TypeScript First
ͳͥࠓ·Ͱ Node ͷ Fullstack Framework ͕ྲྀߦΒͳ͔͔ͬͨʁ ▸ Α͍ ORM ͕ͳ͔ͬͨ
▸ Node.js ॳظ Monolithic ͳ Rails ͷಈ͕͋ͬͨ ▸ Express খ͍͞ϛυϧΣΞͷू߹ମ ▸ Node.js ͷΤίγεςϜ͕҆ఆͤͣɺऔࣺબͰ͖ͳ͔ͬͨ
prisma2: Modern ORM + Query Builder ▸ ʮNode.js ʹྑ͍ORM ͕ͳ͍ʯͱ͍͏ঢ়گΛ෴ͤͦ͏ͳ
ORM / Query Builder ▸ એݴత Migration: ઐ༻ͷIDLͷมߋ͔ΒࣗಈͰϚΠάϨʔγϣϯΛੜ ▸ TypeScript Friendly: TSͷॊೈͳදݱྗͰͲΜͳΫΤϦʹܕ͕͘ ▸ SQL First: ࣗવͳ SQL ͱରԠ͢Δ API
prisma schema prisma api https://www.prisma.io/
PRISMA2 ͷӨڹ ▸ Prisma Λ͏ϑϨʔϜϫʔΫͷ։ൃϥογϡ ▸ Blitz.js: Next.js + Prisma2
+ Code Generator ▸ Redwood.js: React + Redwood Router + Prisma2 ▸ Frourio: MS TS First ͳ API αʔόʔ
Modern JavaScript = TypeScript ▸ ྑ͍ίʔυ = ܕ͕͋Δίʔυ ▸ ྑ͍ઃܭ
= ܕ͕͘API ▸ ྑ͍ϥΠϒϥϦ = ܕఆٛ(.d.ts)͕ఏڙ͞ΕΔϥΠϒϥϦ
·ͱΊ ▸ Frontend Toolchain Node.js ʹू͞Εͨ ▸ Node.jsपลރΕͭͭ͋Δ͕ɺ࣮͕͋Δ։ൃऀͷ Opinionated
ͳ Φʔόʔϗʔϧಉ࣌ਐߦத ▸ ৽نʹ։ൃ͞ΕΔͷɺTypeScript First
Next.js͔ΒֶͿ ϕετϓϥΫςΟε
▸ socket.io ͷ࡞ऀ Guillermo Rauch ͍Δ Vercel ͕։ൃ ▸ Vercel:
SSG + Serverless ʹ࠷దԽ͞Εͨ PaaS ▸ (ݩʑ) React ͷ SSR Server + Routing ΛηοτͰఏڙ ͢ΔϑϨʔϜϫʔΫ ▸ ॳճϨεϙϯε SSR Ͱฦ٫͠ɺҎ߱ͷભҠΛ CSR Ͱ Ҿ͖ܧ͙(Α͋͘ΔSPAͷߏ) Next.js ͱԿ͔
▸ ෳͷ࣮ߦɾग़ྗϞʔυ ▸ SSR ▸ Server ▸ Serverless ▸ SSG
▸ SSG Export ▸ Incremental Static Regeneration Next.js: Multi Paradigm Framework SSR Server webpack chunks SSG Export Server(less) Mode SSG Mode $ next build $ next export Next.js webpack serverless function SOURCE CODE server runtime browser runtime
▸ SSG mode Λಈతʹ࣮ߦ͢Δܗଶ ▸ cache Λฦͭͭ͠ɺexpire ͨ͠ͷΛཪͰೖ Εସ͑Δ ▸
Backend ߋ৽ස͕͍CMS ͳͲΛఆ Next.js: Incremental Static Regeneration SSG SERVER Edge Cache BROWSER Generate SSG Asset Stale While Revalidate CMS BROWSER BROWSER BROWSER BROWSER BROWSER BROWSER BROWSER BROWSER BROWSER BROWSER 1req/15m
▸ (Next.js ొҎલͷ) ඇৗʹෳࡶͳ SSR/CSR ΛӅṭ ▸ Node.js ͷϑϩϯτΤϯυπʔϧνΣΠϯͱɺSPA/SSR ͷϕετ
ϓϥΫςΟεΛɺҰͭͷϑϨʔϜϫʔΫʹ ▸ Vue Nuxt, Svelte Sapper(SvelteKit) ͱ͍͏ϑΥϩϫʔ Next.js ͕࣮ݱͨ͜͠ͱ
ٞ: ͦͦ SSR ඞཁʁ ▸ ΄ͱΜͲͷέʔεͰඞཁͳ͍ ▸ GoogleBot ͷ CSR
ίϯςϯπʹର͢ΔΠϯσοΫε͕࣌ؒΕΔ ▸ NodeαʔόʔΛ࣋ͨͳ͍ϝϦοτͱͷτϨʔυΦϑ ▸ Next.js SSR ͠ͳ͍ʹͯ͠༗༻
Next.js ͔ΒֶͿϕετϓϥΫςΟε: ·ͱΊ ▸ ෳࡶͳ SPA/SSR ΛӅṭ͠୭Ͱ͑ΔΑ͏ʹ ▸ Next.js+Vercel
SSG/Serverless ͰϚωʔδϨεͳํʹਐԽ ▸ SSR ଟ͘ͷέʔεͰෆཁ
ϑϩϯτΤϯυ ͷྖҬͷมԽ
Legacy Monolithic Framework (Rails, Django, etc…) CSS Markup Engineer BROWSER
SERVER JAVASCRIPT ORM Application Engineer HTML(STRING) CONTROLLER
API Server + Single Page Application Frontend Engineer BROWSER SERVER
CLIENT ROUTER ORM Application Engineer HTML(VDOM TREE) API CSS
2010s Monolithic SPA app.js (10MB)
Modern SPA 2018~ app.js home.js edit.js about.js ▸ entry as
router ▸ lazy chunks ▸ multi thread ▸ web worker ▸ service worker worker.js main thread worker thread service worker sw.js router ▸ SPA ٕज़͕ɺSPA ͷͷͱ͍͏ΑΓɺΣϒͷϕετϓϥΫςΟε
Backend API + SSR : Next.js / Nuxt Frontend Engineer
BROWSER SERVER Application Engineer CSS HTML(CSR) CONTROLLER HTML(SSR) BACKEND API INFRA AS A CODE
Blitz Fullstack Style Frontend Engineer? BROWSER SERVER CSS HTML(CSR) CONTROLLER
HTML(SSR) CONTROLLER’ ORM API
Blitz Fullstack Style ▸ ORM + Next/Nuxt ɺ Monolithic Rails
ઌฦΓ͢Δ ▸ Frontend Engineer Ͱͳ͘ɺຊདྷͷ Application Engineer ▸ ൣғ͕͗͢ΔͷͰɺ͓ͦΒ͘࠶ͼۀ͕ൃੜͦ͠͏ ▸ ·ͩྲྀߦͬͯͳ͍ɻ͜Ε͔Β
ٞ: ࠓͷ Frontend Engineer ΛͳΜͱݺ͍͍͔ ▸ (New) Application Engineer?: Backend
த৺ͷNode.js ΤϯδχΞ ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛཧ ▸ Design Engineer?: Markup + JavaScript ▸ CDN Edge Engineer?: CDN पลΛཧ
ࠓͷ Frontend Engineer ΛͳΜͱݺ͍͍͔ ▸ (New) Application Engineer?: Backend த৺ͷNode.js
ΤϯδχΞ ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛཧ ▸ Design Engineer?: Markup + JavaScript ▸ CDN Edge Engineer?: CDN पลΛཧ WE ARE HIRING! WE ARE HIRING!
ఆ: ʮNode.js ΤϯδχΞͷϙδγϣϯτʔΫͰʁʯ ▸ ೝΊΔ͕ɺݱ࣮తʹϑϩϯτΤϯυJSҎ֎ݫ͍͠ঢ়گ ▸ ࣗJS(ES5) ͕ݏͰ AltJS ϚχΞ͕ͩͬͨɺ
ES201x + TypeScript Ͱຬ ɻV8 తʹेɻ ▸ WebAssembly ʹظ ▸ Rust: yew, dodrio, percy ▸ C#: Blazor WebAssembly
C#: Blazor WebAssembly <div class="card" style="width:22rem"> <div class="card-body"> <h3 class="card-title">@Title</h3>
<p class="card-text">@ChildContent</p> <button @onclick="OnYes">Yes!</button> </div> </div> @code { [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public string Title { get; set; } private void OnYes() { Console.WriteLine("Write to the console in C#! 'Yes' button selected."); } }
Rust: Yew
ଞͷݴޠͷͨΊͷɺ Node.js Frontend ͷ͠ํ ▸ એݴతUI+Next.js Λ WebAssembly Ͱ࣮͢Δ ▸
ݱঢ় Rust + wasm_bindgen ͕ݱ࣮త͕ͩɺRust ͕ΞϓϦέʔγϣϯ Λॻ͘ͷʹ͍ͯΔ͔ͱ͍͏ͱ… ▸ GC͖ݴޠɺ WASM GC ͕༷Խ͞ΕΔ·Ͱɺग़ྗαΠζ͕ݫ͍͠ ▸ ΤίγεςϜཱʹɺWasm Binary ͷ ଟݴޠؒ Linker ༷͕ඞཁ͔
ʮଞͷݴޠʹΑΔJSπʔϧͷ࠶࣮৽͍͠τϨϯυ͔ʁʯ by Dr.Axel ▸ esbuild: JS/TS Compiler (Go) ▸ swc:
JS/TS Compiler (Rust) ▸ volta: Rust nvm alternative (Rust) ▸ fnm: npm alternative (Rust) https://2ality.com/2020/10/js-plus-other-languages.html ʮݴޠʹΑ͖ͬͯෆ͖͋ΔͷͰॴΛ׆༻͢Ε͍͍͚Ͳ JSͰॻ͘͜ͱͰυοάϑʔσΟϯάʹͳΔ͠ɺ ίϛολʔूΊ͍͢ʯ by Dr.Axel
·ͱΊ ▸ ϑϩϯτΤϯυͷϕετϓϥΫςΟε Server Application Λ৵৯ ▸ Node.js Prisma
ORM Ͱ Fullstack Framework (ओʹRails) ʹ࠶ઓ ▸ ଞͷݴޠ͕ै͢Δʹֻ͕͔࣌ؒΓͦ͏ ▸ TypeScript + ෦తʹ Rust ͕ɺ͠Β͘ϕετͳબࢶ
Cloudflare Workers ͕ Γ։͘৽ྖҬ
Cloudflare Workers ▸ CDN Edge Ͱಈ͘(!!!) Node.js ▸ ݁Ռ߹ͷ Workers
KVɺڧ߹ͷ Durable Objects ▸ CDN Edge ʹΑΔߴ͍Ԡੑͱɺ 1 req ͋ͨΓ CPU Time 50ms, Memory 128MB ͱ͍͏ڧ੍͍
CDN Edge Computing SERVER Application Engineer BROWSER EDGE WORKER (NODE.JS)
SERVER CDN EDGE CACHE New!!!
ଞͷ CDN Edge Worker ࣮ ▸ AWS
[email protected]
: Lambda ͷ
Edge ൛ ▸ Fastly
[email protected]
: WebAssembly Λ Edge ʹσϓϩΠ ▸ Akamai: Edge Workers
Cloudflare Workers ͕ଞࣾαʔϏεΑΓ༏ΕͯΔ ▸ ͷߴ͍CLIπʔϧ(wrangler) ▸ ߴσϓϩΠ ▸ ߴ͍ύϑΥʔϚϯε /
Ԡੑ ▸ Edge ಛੑʹ߹Θͤͨ Cache API
https://blog.cloudflare.com/serverless-performance-comparison-workers-lambda/
[email protected]
ͱͷൺֱ
ͳͥ Cloudflare Workers ͕ Node.js ͳͷ͔ ▸ ίϯςφͰͳ͘ V8 Isolates
(ϓϩηε) Λ CDN Edge ্ͰฒྻԽ ▸ ϦΫΤετ͝ͱʹϓϩηεׂ ▸ ࠷దԽʹ WebAssembly Λ͏ https://developers.cloudflare.com/workers/learning/how-workers-works
CDN Edge Workers ͰԿ͕Ͱ͖Δ͔ʁ ▸ ࣗ༝ͷߴ͍Ωϟογϡίϯτϩʔϧ ▸ ʮࠓͱಉ͡Node.jsΞϓϦ͕ಈ͘ʯΘ͚Ͱͳ͍ ▸ CPU੍Λຬͨ͢ΞʔΩςΫνϟΛ࠶ߟ͢Δඞཁ
▸ ੍ݶΛຬͨͨ͢Ίʹ WebAssembly ͕ΑΓඞཁͱ͞Εͦ͏
ʮϑϩϯτΤϯυྖҬΛ࠶ఆٛ͢Δʯ ·ͱΊ
কདྷͷల ▸ TypeScript + Next.js(Nuxt.js)+Rust ͕WebͷϕετϓϥΫςΟεʹͳΔ ▸ ͓ͦΒ͘ 2020 Fullstack
Node.js or Jamstack+CMS ͕ ʮελʔτ ΞοϓքͷJavaʯͰ͋Δ Rails Λஔ͖͑ΔͩΖ͏ ▸ CDN Edge Worker ׆༻Ͱʮ੩తαΠτʯ͕ಈ͖ग़͢ ▸ WebAssembly ·ͩ·ͩރΕͯͳ͍
ݱঢ়ͷ՝ ▸ ֶशࢿྉͷෆ ▸ ಈ͖͕͍ք۾ͷͨΊɺࢿྉʹ·ͱ·Δ͕࣌ؒͳ͍ ▸ Node.js քʹ͓͚ΔʮRails Guideʯ͕ͳ͍ ▸
͓ΘΓ https://zenn.dev/articles/c638f1b3b0cd239d3eea ͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ ຊൃදͷࢀߟจݙ+ςΩετ൛