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
47
25k
「フロントエンド領域」を再定義する
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
mizchi
76
18k
mizchi
5
680
mizchi
17
1.1k
mizchi
55
14k
mizchi
18
8.6k
mizchi
4
4.5k
mizchi
18
17k
mizchi
7
7.3k
mizchi
21
19k
Other Decks in Technology
See All in Technology
sansandsoc
2
580
hito58
1
730
ayanadesu
0
330
1stship
0
240
karamem0
1
710
youtalk
0
260
pohjus
0
3.3k
yshr1200
0
170
andoshin11
0
140
opdavies
0
1.8k
hikiaki
0
180
grapecity_dev
0
130
Featured
See All Featured
kneath
295
39k
matthewcrist
73
7.5k
aarron
257
36k
searls
205
36k
michaelherold
224
8.5k
brettharned
93
3k
jmmastey
10
610
chrislema
231
16k
iamctodd
19
2k
chriscoyier
684
180k
frogandcode
128
20k
jponch
103
5k
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 Lambda@Edge: Lambda ͷ
Edge ൛ ▸ Fastly Compute@Edge: WebAssembly Λ Edge ʹσϓϩΠ ▸ Akamai: Edge Workers
Cloudflare Workers ͕ଞࣾαʔϏεΑΓ༏ΕͯΔ ▸ ͷߴ͍CLIπʔϧ(wrangler) ▸ ߴσϓϩΠ ▸ ߴ͍ύϑΥʔϚϯε /
Ԡੑ ▸ Edge ಛੑʹ߹Θͤͨ Cache API
https://blog.cloudflare.com/serverless-performance-comparison-workers-lambda/ Lambda@Edge ͱͷൺֱ
ͳͥ 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 ͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ ຊൃදͷࢀߟจݙ+ςΩετ൛