「フロントエンド領域」を再定義する

by Koutarou Chikuba

Slide 1

Slide 1 text

ʮϑϩϯτΤϯυྖҬʯΛ MIZCHI - ஛അޫଠ࿠ / PLAID INC FRONTEND STUDY #1 ࠶ఆٛ͢Δ

Slide 2

Slide 2 text

ABOUT ▸ @mizchi / ஛അޫଠ࿠ ▸ Frontend Engineer ▸ React / Node / SPA ▸ Web ͷ࠷৽ٕज़Ͱ৽͍͠ମݧΛ࣮ূ - ఏڙ͢Δͷ͕޷͖

Slide 3

Slide 3 text

ࠓ೔࿩͢಺༰ ▸ ͜ͷ10೥ͷৼΓฦΓͱ࠷ۙͷτϨϯυ ▸ next.js ʹݟΔϕετϓϥΫςΟε ▸ ϑϩϯτΤϯυͷྖҬͷมԽ ▸ Cloudﬂare Workers ͕੾Γ։͘৽ྖҬ

Slide 4

Slide 4 text

͸͡Ίʹɿ஫ҙ఺ ▸ ࣗ෼͸ Frontend ͱ͍͏ΑΓ Node.js Engineer ʹ͍ۙ ▸ ࠷ઌ୺ʙۙະདྷͷ࿩Λ͢ΔͷͰɺഽצ͕߹Θͳ͍ਓ͸͍Δ͔΋ ▸ ຊεϥΠυ͸ Rails ʹ݌՞ΛചΓ·͕͢ɺRails ͕Ռͨͨ͠໾ׂΛ൱ఆ͢Δ ΋ͷͰ͸͋Γ·ͤΜ

Slide 5

Slide 5 text

͜͜10 ೥ͷৼΓฦΓͱ ࠷ۙͷτϨϯυ

Slide 6

Slide 6 text

͜͜10೥ͷৼΓฦΓ ▸ IE First ͷ࣌୅ͷऴΘΓ ▸ Frontend ʹ͓͍ͯ Node.js ͕ࢧ഑తͳϙδγϣϯʹ ▸ ʮಈ͘ςϯϓϨʔτΤϯδϯʯ͕౰ͨΓલʹ

Slide 7

Slide 7 text

IE First ࣌୅ͷऴΘΓ WorldWide Japan

Slide 8

Slide 8 text

IE First ࣌୅ͷऴΘΓ ▸ ʮIEͰಈ͔ͳ͍͔Β࢓༷ΛIEʹ߹ΘͤΔʯ =>ʮϞμϯϒϥ΢βਫ४Λຬͨ͞ͳ͍IE͸ஈ֊తʹ੾ΓࣺͯΔʯ ▸ αϙʔτ͠ͳ͍Θ͚Ͱ͸ͳ͍͕ɺ଍ΛҾͬுΔ৔߹͸੾Δ ▸ ຊԻ: IEରԠΛ΍Γ͗͢ΔͱɺϞμϯϒϥ΢βͷܦݧ஋ΛՔ͛ͳ͍…

Slide 9

Slide 9 text

Node.jsʹΑΔϑϩϯτΤϯυ ▸ Rails Sprockets ͳͲͷݴޠ/ϑϨʔϜϫʔΫ͝ͱͷϓϦϓϩηοα͕ഇΕͨ ▸ Node.js ʹΑͬͯ Frontend Toolchain ͕ఏڙ͞ΕΔΑ͏ʹͳͬͨ

Slide 10

Slide 10 text

ʮಈ͘ςϯϓϨʔτʯ͕౰ͨΓલʹ ▸ Ծ૝DOMٕज़ʹΑΔએݴతUI͕ීٴ ▸ ʮςϯϓϨʔτΤϯδϯʯͷ໾ׂ͕ɺੲͳ͕Βͷจࣈྻͷੜ੒Ͱ͸ͳ͘ɺ໦ߏ଄ ͱͦͷޙͷϩδοΫ΋؅ཧ͢Δ͜ͱʹมԽ ▸ ݱঢ়͸JSҎ֎ͷબ୒ࢶ͕ͳ͍

Slide 11

Slide 11 text

࠷ۙͷϑϩϯτΤϯυͷྲྀߦ ▸ ύϑΥʔϚϯεࢦ޲ ▸ Opinionated ͳʮઃܭΑΓن໿ʯ ▸ Modern JavaScript ≒ TypeScript

Slide 12

Slide 12 text

https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/ > JavaScript͸΢ΣϒͷCO2Ͱ͢ɻࢲͨͪ͸ͦͷ͏ͪͷ ͍͔ͭ͘Λඞཁͱ͍ͯ͠·͕͢ɺଟ͗͢Δͱੜଶܥશମ ͕ةݥʹ͞Β͞ΕΔ͜ͱʹͳΓ·͢ɻ࠷΋ଟ͘ഉग़ͯ͠ ͍Δਓ(༁ऀ஫: ։ൃऀ)͸ɺੜଶܥ่͕յ͢Δ·Ͱɺͦ ͷ݁Ռʹۤ͠Ή͜ͱ͔Β࠷΋ԕ͍ଘࡏͰ͢ɻJS ͷഉग़ ྔΛίϯτϩʔϧ͠ͳ͍ݶΓɺ΢Σϒ͸ίϯϐϡʔςΟ ϯά͕޲͔͏ࢢ৔΍ϑΥʔϜϑΝΫλʔͰ੒ޭ͢Δ͜ͱ ͸ͳ͍Ͱ͠ΐ͏ɻ ‘JavaScript is CO2’ by Alex Russell (Google) 2018

Slide 13

Slide 13 text

ۙ೥ͷύϑΥʔϚϯεࢦ޲ ▸ Lighthouse ʹΑΔείΞԽ ▸ WebVitals ʹΑΔ SEO ΁ͷӨڹ ▸ ϑϩϯτΤϯυٕज़͸ SPA ͷҝͷٕज़Ͱ͸ͳ͘ɺ ʮWebͷϕετϓϥΫςΟεΛ࣮ݱ͢Δ΋ͷʯ΁

Slide 14

Slide 14 text

Opinionated ͳʮઃܭΑΓن໿ʯ ▸ Deno ▸ Rome ▸ Blitz

Slide 15

Slide 15 text

Deno: A secure runtime for JavaScript and TypeScript. ▸ Node.js ΦϦδφϧ࡞ऀͷ Ryan Dahl ʹΑΔ৽͍͠ Rust + V8 ͷ JS ॲཧܥ ▸ npm ΤίγεςϜΛ൱ఆ͠ ESM ͷ URL ύε͔Βґଘղܾ ▸ ࣮ߦ࣌ʹ໌ࣔతʹݖݶΛ෇༩͢Δαϯ υϘοΫεϞσϧ ▸ TypeScript First https://deno.land/

Slide 16

Slide 16 text

Rome: Unifying the frontend development toolchain ▸ Babel ΦϦδφϧ࡞ऀ sebmck ʹΑΔ Node.js େ౷ҰπʔϧνΣΠϯ ▸ Babel, ESlint, Webpack, Prettier, Jest Λஔ͖׵͑Δ ▸ ֎෦ϥΠϒϥϦඇґଘͰࣗલͷ Parser / AST Ͱ౷Ұ ▸ TypeScript First https://rome.tools/

Slide 17

Slide 17 text

Blitz: The Fullstack React Framework ▸ Next.js + Prisma ORM = Fullstack ▸ ϕετϓϥΫςΟεͷ٧Ί߹Θͤ + Code Generator ▸ react-query / react-ﬁnal-form / zod / etc… ▸ meteor ෩ͷisomorphic ͳϦϞʔτؔ਺ݺͼग़͠(RPCม׵) ▸ TypeScript First

Slide 18

Slide 18 text

ͳͥࠓ·Ͱ Node ͷ Fullstack Framework ͕ྲྀߦΒͳ͔͔ͬͨʁ ▸ Α͍ ORM ͕ͳ͔ͬͨ ▸ Node.js ॳظ͸ Monolithic ͳ Rails ΁ͷ൓ಈ͕͋ͬͨ ▸ Express ͸খ͍͞ϛυϧ΢ΣΞͷू߹ମ ▸ Node.js ͷΤίγεςϜ͕҆ఆͤͣɺऔࣺબ୒Ͱ͖ͳ͔ͬͨ

Slide 19

Slide 19 text

prisma2: Modern ORM + Query Builder ▸ ʮNode.js ʹྑ͍ORM ͕ͳ͍ʯͱ͍͏ঢ়گΛ෴ͤͦ͏ͳ ORM / Query Builder ▸ એݴత Migration: ઐ༻ͷIDLͷมߋ͔ΒࣗಈͰϚΠάϨʔγϣϯΛੜ੒ ▸ TypeScript Friendly: TSͷॊೈͳදݱྗͰͲΜͳΫΤϦʹ΋ܕ͕෇͘ ▸ SQL First: ࣗવͳ SQL ͱରԠ͢Δ API

Slide 20

Slide 20 text

prisma schema prisma api https://www.prisma.io/

Slide 21

Slide 21 text

PRISMA2 ͷӨڹ ▸ Prisma Λ࢖͏ϑϨʔϜϫʔΫͷ։ൃϥογϡ ▸ Blitz.js: Next.js + Prisma2 + Code Generator ▸ Redwood.js: React + Redwood Router + Prisma2 ▸ Frourio: MS੡ TS First ͳ API αʔόʔ

Slide 22

Slide 22 text

Modern JavaScript = TypeScript ▸ ྑ͍ίʔυ = ܕ͕͋Δίʔυ ▸ ྑ͍ઃܭ = ܕ͕෇͘API ▸ ྑ͍ϥΠϒϥϦ = ܕఆٛ(.d.ts)͕ఏڙ͞ΕΔϥΠϒϥϦ

Slide 23

Slide 23 text

·ͱΊ ▸ Frontend Toolchain ͸ Node.js ʹू໿͞Εͨ ▸ Node.jsपล͸ރΕͭͭ͋Δ͕ɺ࣮੷͕͋Δ։ൃऀͷ Opinionated ͳ Φʔόʔϗʔϧ΋ಉ࣌ਐߦத ▸ ৽نʹ։ൃ͞ΕΔ΋ͷ͸ɺTypeScript First

Slide 24

Slide 24 text

Next.js͔ΒֶͿ ϕετϓϥΫςΟε

Slide 25

Slide 25 text

▸ socket.io ͷ࡞ऀ Guillermo Rauch ཰͍Δ Vercel ͕։ൃ ▸ Vercel: SSG + Serverless ʹ࠷దԽ͞Εͨ PaaS ▸ (ݩʑ͸) React ͷ SSR Server + Routing ΛηοτͰఏڙ ͢ΔϑϨʔϜϫʔΫ ▸ ॳճϨεϙϯε͸ SSR Ͱฦ٫͠ɺҎ߱ͷભҠΛ CSR Ͱ Ҿ͖ܧ͙(Α͋͘ΔSPAͷߏ଄) Next.js ͱ͸Կ͔

Slide 26

Slide 26 text

▸ ෳ਺ͷ࣮ߦɾग़ྗϞʔυ ▸ 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

Slide 27

Slide 27 text

▸ 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

Slide 28

Slide 28 text

▸ (Next.js ొ৔Ҏલͷ) ඇৗʹෳࡶͳ SSR/CSR ΛӅṭ ▸ Node.js ͷϑϩϯτΤϯυπʔϧνΣΠϯͱɺSPA/SSR ͷϕετ ϓϥΫςΟεΛɺҰͭͷϑϨʔϜϫʔΫʹ ▸ Vue Nuxt, Svelte Sapper(SvelteKit) ͱ͍͏ϑΥϩϫʔ Next.js ͕࣮ݱͨ͜͠ͱ

Slide 29

Slide 29 text

ٞ࿦: ͦ΋ͦ΋ SSR ͸ඞཁʁ ▸ ΄ͱΜͲͷέʔεͰඞཁͳ͍ ▸ GoogleBot ͷ CSR ίϯςϯπʹର͢ΔΠϯσοΫε͕਺࣌ؒ஗ΕΔ໰୊ ▸ NodeαʔόʔΛ࣋ͨͳ͍ϝϦοτͱͷτϨʔυΦϑ ▸ Next.js ͸ SSR ͠ͳ͍ʹͯ͠΋༗༻

Slide 30

Slide 30 text

Next.js ͔ΒֶͿϕετϓϥΫςΟε: ·ͱΊ ▸ ෳࡶͳ SPA/SSR ΛӅṭ͠୭Ͱ΋࢖͑ΔΑ͏ʹ ▸ Next.js+Vercel ͸ SSG/Serverless ͰϚωʔδϨεͳํ޲ʹਐԽ ▸ SSR ͸ଟ͘ͷέʔεͰෆཁ

Slide 31

Slide 31 text

ϑϩϯτΤϯυ ͷྖҬͷมԽ

Slide 32

Slide 32 text

Legacy Monolithic Framework (Rails, Django, etc…) CSS Markup Engineer BROWSER SERVER JAVASCRIPT ORM Application Engineer HTML(STRING) CONTROLLER

Slide 33

Slide 33 text

API Server + Single Page Application Frontend Engineer BROWSER SERVER CLIENT ROUTER ORM Application Engineer HTML(VDOM TREE) API CSS

Slide 34

Slide 34 text

2010s Monolithic SPA app.js (10MB)

Slide 35

Slide 35 text

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 ͷ΋ͷͱ͍͏ΑΓɺ΢ΣϒͷϕετϓϥΫςΟε΁

Slide 36

Slide 36 text

Backend API + SSR : Next.js / Nuxt Frontend Engineer BROWSER SERVER Application Engineer CSS HTML(CSR) CONTROLLER HTML(SSR) BACKEND API INFRA AS A CODE

Slide 37

Slide 37 text

Blitz Fullstack Style Frontend Engineer? BROWSER SERVER CSS HTML(CSR) CONTROLLER HTML(SSR) CONTROLLER’ ORM API

Slide 38

Slide 38 text

Blitz Fullstack Style ▸ ORM + Next/Nuxt ͸ɺ Monolithic Rails ΁ઌ૆ฦΓ͢Δ ▸ ΋͸΍ Frontend Engineer Ͱ͸ͳ͘ɺຊདྷͷ Application Engineer ▸ ൣғ͕޿͗͢ΔͷͰɺ͓ͦΒ͘࠶ͼ෼ۀ͕ൃੜͦ͠͏ ▸ ·ͩྲྀߦͬͯͳ͍ɻ͜Ε͔Β

Slide 39

Slide 39 text

ٞ࿦: ࠓͷ Frontend Engineer ΛͳΜͱݺ΂͹͍͍͔໰୊ ▸ (New) Application Engineer?: Backend த৺ͷNode.js ΤϯδχΞ ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛ؅ཧ ▸ Design Engineer?: Markup + JavaScript ▸ CDN Edge Engineer?: CDN पลΛ؅ཧ

Slide 40

Slide 40 text

ࠓͷ 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!

Slide 41

Slide 41 text

૝ఆ൓࿦: ʮNode.js ΤϯδχΞͷϙδγϣϯτʔΫͰ͸ʁʯ ▸ ೝΊΔ͕ɺݱ࣮తʹϑϩϯτΤϯυ͸JSҎ֎ݫ͍͠ঢ়گ ▸ ࣗ෼͸JS(ES5) ͕ݏͰ AltJS ϚχΞ͕ͩͬͨɺ ES201x + TypeScript Ͱຬ ଍ɻV8 ͸଎౓తʹ΋े෼ɻ ▸ WebAssembly ʹظ଴ ▸ Rust: yew, dodrio, percy ▸ C#: Blazor WebAssembly

Slide 42

Slide 42 text

C#: Blazor WebAssembly

@Title

@ChildContent

Yes!

@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."); } }

Slide 43

Slide 43 text

Rust: Yew

Slide 44

Slide 44 text

ଞͷݴޠͷͨΊͷɺ Node.js Frontend ͷ౗͠ํ ▸ એݴతUI+Next.js Λ WebAssembly Ͱ࣮૷͢Δ ▸ ݱঢ়͸ Rust + wasm_bindgen ͕ݱ࣮త͕ͩɺRust ͕ΞϓϦέʔγϣϯ૚ Λॻ͘ͷʹ޲͍ͯΔ͔ͱ͍͏ͱ… ▸ GC෇͖ݴޠ͸ɺ WASM GC ͕࢓༷Խ͞ΕΔ·Ͱɺग़ྗαΠζ͕ݫ͍͠ ▸ ΤίγεςϜ੒ཱʹ͸ɺWasm Binary ͷ ଟݴޠؒ Linker ࢓༷͕ඞཁ͔΋

Slide 45

Slide 45 text

ʮଞͷݴޠʹΑΔ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

Slide 46

Slide 46 text

·ͱΊ ▸ ϑϩϯτΤϯυͷϕετϓϥΫςΟε͸ Server Application ૚Λ৵৯ ▸ Node.js ͸ Prisma ORM Ͱ Fullstack Framework (ओʹRails) ʹ࠶௅ઓ ▸ ଞͷݴޠ͕௥ै͢Δʹ͸ֻ͕͔࣌ؒΓͦ͏ ▸ TypeScript + ෦෼తʹ Rust ͕ɺ͠͹Β͘ϕετͳબ୒ࢶ

Slide 47

Slide 47 text

Cloudflare Workers ͕ ੾Γ։͘৽ྖҬ

Slide 48

Slide 48 text

Cloudflare Workers ▸ CDN Edge Ͱಈ͘(!!!) Node.js ▸ ݁Ռ੔߹ͷ Workers KVɺڧ੔߹ͷ Durable Objects ▸ CDN Edge ʹΑΔߴ͍Ԡ౴ੑͱɺ 1 req ͋ͨΓ CPU Time 50ms, Memory 128MB ͱ͍͏ڧ੍͍໿

Slide 49

Slide 49 text

CDN Edge Computing SERVER Application Engineer BROWSER EDGE WORKER (NODE.JS) SERVER CDN EDGE CACHE New!!!

Slide 50

Slide 50 text

ଞͷ CDN Edge Worker ࣮૷ ▸ AWS Lambda@Edge: Lambda ͷ Edge ൛ ▸ Fastly Compute@Edge: WebAssembly Λ Edge ʹσϓϩΠ ▸ Akamai: Edge Workers

Slide 51

Slide 51 text

Cloudflare Workers ͕ଞࣾαʔϏεΑΓ༏ΕͯΔ఺ ▸ ׬੒౓ͷߴ͍CLIπʔϧ(wrangler) ▸ ߴ଎σϓϩΠ ▸ ߴ͍ύϑΥʔϚϯε / Ԡ౴ੑ ▸ Edge ಛੑʹ߹Θͤͨ Cache API

Slide 52

Slide 52 text

https://blog.cloudﬂare.com/serverless-performance-comparison-workers-lambda/ Lambda@Edge ͱͷൺֱ

Slide 53

Slide 53 text

ͳͥ Cloudflare Workers ͕ Node.js ͳͷ͔ ▸ ίϯςφͰ͸ͳ͘ V8 Isolates (ϓϩηε) Λ CDN Edge ্ͰฒྻԽ ▸ ϦΫΤετ͝ͱʹϓϩηεׂ౰ ▸ ࠷దԽʹ͸ WebAssembly Λ࢖͏ https://developers.cloudﬂare.com/workers/learning/how-workers-works

Slide 54

Slide 54 text

CDN Edge Workers ͰԿ͕Ͱ͖Δ͔ʁ ▸ ࣗ༝౓ͷߴ͍Ωϟογϡίϯτϩʔϧ ▸ ʮࠓͱಉ͡Node.jsΞϓϦ͕ಈ͘ʯΘ͚Ͱ͸ͳ͍ ▸ CPU੍໿Λຬͨ͢ΞʔΩςΫνϟΛ࠶ߟ͢Δඞཁ ▸ ੍ݶΛຬͨͨ͢Ίʹ WebAssembly ͕ΑΓඞཁͱ͞Εͦ͏

Slide 55

Slide 55 text

ʮϑϩϯτΤϯυྖҬΛ࠶ఆٛ͢Δʯ ·ͱΊ

Slide 56

Slide 56 text

কདྷͷల๬ ▸ TypeScript + Next.js(Nuxt.js)+Rust ͕WebͷϕετϓϥΫςΟεʹͳΔ ▸ ͓ͦΒ͘ 2020೥୅͸ Fullstack Node.js or Jamstack+CMS ͕ ʮελʔτ ΞοϓքͷJavaʯͰ͋Δ Rails Λஔ͖׵͑ΔͩΖ͏ ▸ CDN Edge Worker ׆༻Ͱʮ੩తαΠτʯ͕ಈ͖ग़͢ ▸ WebAssembly ͸·ͩ·ͩރΕͯͳ͍

Slide 57

Slide 57 text

ݱঢ়ͷ՝୊ ▸ ֶशࢿྉͷෆ଍ ▸ ಈ͖͕଎͍ք۾ͷͨΊɺࢿྉʹ·ͱ·Δ͕࣌ؒͳ͍ ▸ Node.js քʹ͓͚ΔʮRails Guideʯ͕ͳ͍ ▸

Slide 58

Slide 58 text

͓ΘΓ https://zenn.dev/articles/c638f1b3b0cd239d3eea ౤͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ ຊൃදͷࢀߟจݙ+ςΩετ൛