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

Frontend Study #1
訂正: 最後のzennの記事のリンク先は、正しくは https://zenn.dev/mizchi/articles/c638f1b3b0cd239d3eea です

Transcript

1. ʮϑϩϯτΤϯυྖҬʯΛ MIZCHI - ஛അޫଠ࿠ / PLAID INC FRONTEND STUDY #1 ࠶ఆٛ͢Δ
2. ABOUT ▸ @mizchi / ஛അޫଠ࿠ ▸ Frontend Engineer ▸ React / Node / SPA ▸ Web ͷ࠷৽ٕज़Ͱ৽͍͠ମݧΛ࣮ূ - ఏڙ͢Δͷ͕޷͖
3. ࠓ೔࿩͢಺༰ ▸ ͜ͷ10೥ͷৼΓฦΓͱ࠷ۙͷτϨϯυ ▸ next.js ʹݟΔϕετϓϥΫςΟε ▸ ϑϩϯτΤϯυͷྖҬͷมԽ ▸ Cloudflare Workers ͕੾Γ։͘৽ྖҬ
4. ͸͡Ίʹɿ஫ҙ఺ ▸ ࣗ෼͸ Frontend ͱ͍͏ΑΓ Node.js Engineer ʹ͍ۙ ▸ ࠷ઌ୺ʙۙະདྷͷ࿩Λ͢ΔͷͰɺഽצ͕߹Θͳ͍ਓ͸͍Δ͔΋ ▸ ຊεϥΠυ͸ Rails ʹ݌՞ΛചΓ·͕͢ɺRails ͕Ռͨͨ͠໾ׂΛ൱ఆ͢Δ ΋ͷͰ͸͋Γ·ͤΜ
5. ͜͜10 ೥ͷৼΓฦΓͱ ࠷ۙͷτϨϯυ
6. ͜͜10೥ͷৼΓฦΓ ▸ IE First ͷ࣌୅ͷऴΘΓ ▸ Frontend ʹ͓͍ͯ Node.js ͕ࢧ഑తͳϙδγϣϯʹ ▸ ʮಈ͘ςϯϓϨʔτΤϯδϯʯ͕౰ͨΓલʹ
7. IE First ࣌୅ͷऴΘΓ WorldWide Japan
8. IE First ࣌୅ͷऴΘΓ ▸ ʮIEͰಈ͔ͳ͍͔Β࢓༷ΛIEʹ߹ΘͤΔʯ =>ʮϞμϯϒϥ΢βਫ४Λຬͨ͞ͳ͍IE͸ஈ֊తʹ੾ΓࣺͯΔʯ ▸ αϙʔτ͠ͳ͍Θ͚Ͱ͸ͳ͍͕ɺ଍ΛҾͬுΔ৔߹͸੾Δ ▸ ຊԻ: IEରԠΛ΍Γ͗͢ΔͱɺϞμϯϒϥ΢βͷܦݧ஋ΛՔ͛ͳ͍…
9. Node.jsʹΑΔϑϩϯτΤϯυ ▸ Rails Sprockets ͳͲͷݴޠ/ϑϨʔϜϫʔΫ͝ͱͷϓϦϓϩηοα͕ഇΕͨ ▸ Node.js ʹΑͬͯ Frontend Toolchain ͕ఏڙ͞ΕΔΑ͏ʹͳͬͨ
10. ʮಈ͘ςϯϓϨʔτʯ͕౰ͨΓલʹ ▸ Ծ૝DOMٕज़ʹΑΔએݴతUI͕ීٴ ▸ ʮςϯϓϨʔτΤϯδϯʯͷ໾ׂ͕ɺੲͳ͕Βͷจࣈྻͷੜ੒Ͱ͸ͳ͘ɺ໦ߏ଄ ͱͦͷޙͷϩδοΫ΋؅ཧ͢Δ͜ͱʹมԽ ▸ ݱঢ়͸JSҎ֎ͷબ୒ࢶ͕ͳ͍
11. ࠷ۙͷϑϩϯτΤϯυͷྲྀߦ ▸ ύϑΥʔϚϯεࢦ޲ ▸ Opinionated ͳʮઃܭΑΓن໿ʯ ▸ Modern JavaScript ≒ TypeScript
12. https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/ > JavaScript͸΢ΣϒͷCO2Ͱ͢ɻࢲͨͪ͸ͦͷ͏ͪͷ ͍͔ͭ͘Λඞཁͱ͍ͯ͠·͕͢ɺଟ͗͢Δͱੜଶܥશମ ͕ةݥʹ͞Β͞ΕΔ͜ͱʹͳΓ·͢ɻ࠷΋ଟ͘ഉग़ͯ͠ ͍Δਓ(༁ऀ஫: ։ൃऀ)͸ɺੜଶܥ่͕յ͢Δ·Ͱɺͦ ͷ݁Ռʹۤ͠Ή͜ͱ͔Β࠷΋ԕ͍ଘࡏͰ͢ɻJS ͷഉग़ ྔΛίϯτϩʔϧ͠ͳ͍ݶΓɺ΢Σϒ͸ίϯϐϡʔςΟ ϯά͕޲͔͏ࢢ৔΍ϑΥʔϜϑΝΫλʔͰ੒ޭ͢Δ͜ͱ ͸ͳ͍Ͱ͠ΐ͏ɻ ‘JavaScript is CO2’ by Alex Russell (Google) 2018
13. ۙ೥ͷύϑΥʔϚϯεࢦ޲ ▸ Lighthouse ʹΑΔείΞԽ ▸ WebVitals ʹΑΔ SEO ΁ͷӨڹ ▸ ϑϩϯτΤϯυٕज़͸ SPA ͷҝͷٕज़Ͱ͸ͳ͘ɺ ʮWebͷϕετϓϥΫςΟεΛ࣮ݱ͢Δ΋ͷʯ΁
14. Opinionated ͳʮઃܭΑΓن໿ʯ ▸ Deno ▸ Rome ▸ Blitz
15. Deno: A secure runtime for JavaScript and TypeScript. ▸ Node.js ΦϦδφϧ࡞ऀͷ Ryan Dahl ʹΑΔ৽͍͠ Rust + V8 ͷ JS ॲཧܥ ▸ npm ΤίγεςϜΛ൱ఆ͠ ESM ͷ URL ύε͔Βґଘղܾ ▸ ࣮ߦ࣌ʹ໌ࣔతʹݖݶΛ෇༩͢Δαϯ υϘοΫεϞσϧ ▸ TypeScript First https://deno.land/
16. Rome: Unifying the frontend development toolchain ▸ Babel ΦϦδφϧ࡞ऀ sebmck ʹΑΔ Node.js େ౷ҰπʔϧνΣΠϯ ▸ Babel, ESlint, Webpack, Prettier, Jest Λஔ͖׵͑Δ ▸ ֎෦ϥΠϒϥϦඇґଘͰࣗલͷ Parser / AST Ͱ౷Ұ ▸ TypeScript First https://rome.tools/
17. Blitz: The Fullstack React Framework ▸ Next.js + Prisma ORM = Fullstack ▸ ϕετϓϥΫςΟεͷ٧Ί߹Θͤ + Code Generator ▸ react-query / react-final-form / zod / etc… ▸ meteor ෩ͷisomorphic ͳϦϞʔτؔ਺ݺͼग़͠(RPCม׵) ▸ TypeScript First
18. ͳͥࠓ·Ͱ Node ͷ Fullstack Framework ͕ྲྀߦΒͳ͔͔ͬͨʁ ▸ Α͍ ORM ͕ͳ͔ͬͨ ▸ Node.js ॳظ͸ Monolithic ͳ Rails ΁ͷ൓ಈ͕͋ͬͨ ▸ Express ͸খ͍͞ϛυϧ΢ΣΞͷू߹ମ ▸ Node.js ͷΤίγεςϜ͕҆ఆͤͣɺऔࣺબ୒Ͱ͖ͳ͔ͬͨ
19. prisma2: Modern ORM + Query Builder ▸ ʮNode.js ʹྑ͍ORM ͕ͳ͍ʯͱ͍͏ঢ়گΛ෴ͤͦ͏ͳ ORM / Query Builder ▸ એݴత Migration: ઐ༻ͷIDLͷมߋ͔ΒࣗಈͰϚΠάϨʔγϣϯΛੜ੒ ▸ TypeScript Friendly: TSͷॊೈͳදݱྗͰͲΜͳΫΤϦʹ΋ܕ͕෇͘ ▸ SQL First: ࣗવͳ SQL ͱରԠ͢Δ API
20. prisma schema prisma api https://www.prisma.io/
21. PRISMA2 ͷӨڹ ▸ Prisma Λ࢖͏ϑϨʔϜϫʔΫͷ։ൃϥογϡ ▸ Blitz.js: Next.js + Prisma2 + Code Generator ▸ Redwood.js: React + Redwood Router + Prisma2 ▸ Frourio: MS੡ TS First ͳ API αʔόʔ
22. Modern JavaScript = TypeScript ▸ ྑ͍ίʔυ = ܕ͕͋Δίʔυ ▸ ྑ͍ઃܭ = ܕ͕෇͘API ▸ ྑ͍ϥΠϒϥϦ = ܕఆٛ(.d.ts)͕ఏڙ͞ΕΔϥΠϒϥϦ
23. ·ͱΊ ▸ Frontend Toolchain ͸ Node.js ʹू໿͞Εͨ ▸ Node.jsपล͸ރΕͭͭ͋Δ͕ɺ࣮੷͕͋Δ։ൃऀͷ Opinionated ͳ Φʔόʔϗʔϧ΋ಉ࣌ਐߦத ▸ ৽نʹ։ൃ͞ΕΔ΋ͷ͸ɺTypeScript First
24. Next.js͔ΒֶͿ ϕετϓϥΫςΟε
25. ▸ socket.io ͷ࡞ऀ Guillermo Rauch ཰͍Δ Vercel ͕։ൃ ▸ Vercel: SSG + Serverless ʹ࠷దԽ͞Εͨ PaaS ▸ (ݩʑ͸) React ͷ SSR Server + Routing ΛηοτͰఏڙ ͢ΔϑϨʔϜϫʔΫ ▸ ॳճϨεϙϯε͸ SSR Ͱฦ٫͠ɺҎ߱ͷભҠΛ CSR Ͱ Ҿ͖ܧ͙(Α͋͘ΔSPAͷߏ଄) Next.js ͱ͸Կ͔
26. ▸ ෳ਺ͷ࣮ߦɾग़ྗϞʔυ ▸ 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
27. ▸ 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
28. ▸ (Next.js ొ৔Ҏલͷ) ඇৗʹෳࡶͳ SSR/CSR ΛӅṭ ▸ Node.js ͷϑϩϯτΤϯυπʔϧνΣΠϯͱɺSPA/SSR ͷϕετ ϓϥΫςΟεΛɺҰͭͷϑϨʔϜϫʔΫʹ ▸ Vue Nuxt, Svelte Sapper(SvelteKit) ͱ͍͏ϑΥϩϫʔ Next.js ͕࣮ݱͨ͜͠ͱ
29. ٞ࿦: ͦ΋ͦ΋ SSR ͸ඞཁʁ ▸ ΄ͱΜͲͷέʔεͰඞཁͳ͍ ▸ GoogleBot ͷ CSR ίϯςϯπʹର͢ΔΠϯσοΫε͕਺࣌ؒ஗ΕΔ໰୊ ▸ NodeαʔόʔΛ࣋ͨͳ͍ϝϦοτͱͷτϨʔυΦϑ ▸ Next.js ͸ SSR ͠ͳ͍ʹͯ͠΋༗༻
30. Next.js ͔ΒֶͿϕετϓϥΫςΟε: ·ͱΊ ▸ ෳࡶͳ SPA/SSR ΛӅṭ͠୭Ͱ΋࢖͑ΔΑ͏ʹ ▸ Next.js+Vercel ͸ SSG/Serverless ͰϚωʔδϨεͳํ޲ʹਐԽ ▸ SSR ͸ଟ͘ͷέʔεͰෆཁ
31. ϑϩϯτΤϯυ ͷྖҬͷมԽ
32. Legacy Monolithic Framework (Rails, Django, etc…) CSS Markup Engineer BROWSER SERVER JAVASCRIPT ORM Application Engineer HTML(STRING) CONTROLLER
33. API Server + Single Page Application Frontend Engineer BROWSER SERVER CLIENT ROUTER ORM Application Engineer HTML(VDOM TREE) API CSS
34. 2010s Monolithic SPA app.js (10MB)
35. 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 ͷ΋ͷͱ͍͏ΑΓɺ΢ΣϒͷϕετϓϥΫςΟε΁
36. Backend API + SSR : Next.js / Nuxt Frontend Engineer BROWSER SERVER Application Engineer CSS HTML(CSR) CONTROLLER HTML(SSR) BACKEND API INFRA AS A CODE
37. Blitz Fullstack Style Frontend Engineer? BROWSER SERVER CSS HTML(CSR) CONTROLLER HTML(SSR) CONTROLLER’ ORM API
38. Blitz Fullstack Style ▸ ORM + Next/Nuxt ͸ɺ Monolithic Rails ΁ઌ૆ฦΓ͢Δ ▸ ΋͸΍ Frontend Engineer Ͱ͸ͳ͘ɺຊདྷͷ Application Engineer ▸ ൣғ͕޿͗͢ΔͷͰɺ͓ͦΒ͘࠶ͼ෼ۀ͕ൃੜͦ͠͏ ▸ ·ͩྲྀߦͬͯͳ͍ɻ͜Ε͔Β
39. ٞ࿦: ࠓͷ Frontend Engineer ΛͳΜͱݺ΂͹͍͍͔໰୊ ▸ (New) Application Engineer?: Backend த৺ͷNode.js ΤϯδχΞ ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛ؅ཧ ▸ Design Engineer?: Markup + JavaScript ▸ CDN Edge Engineer?: CDN पลΛ؅ཧ
40. ࠓͷ 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!
41. ૝ఆ൓࿦: ʮNode.js ΤϯδχΞͷϙδγϣϯτʔΫͰ͸ʁʯ ▸ ೝΊΔ͕ɺݱ࣮తʹϑϩϯτΤϯυ͸JSҎ֎ݫ͍͠ঢ়گ ▸ ࣗ෼͸JS(ES5) ͕ݏͰ AltJS ϚχΞ͕ͩͬͨɺ ES201x + TypeScript Ͱຬ ଍ɻV8 ͸଎౓తʹ΋े෼ɻ ▸ WebAssembly ʹظ଴ ▸ Rust: yew, dodrio, percy ▸ C#: Blazor WebAssembly
42. 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."); } }
43. Rust: Yew
44. ଞͷݴޠͷͨΊͷɺ Node.js Frontend ͷ౗͠ํ ▸ એݴతUI+Next.js Λ WebAssembly Ͱ࣮૷͢Δ ▸ ݱঢ়͸ Rust + wasm_bindgen ͕ݱ࣮త͕ͩɺRust ͕ΞϓϦέʔγϣϯ૚ Λॻ͘ͷʹ޲͍ͯΔ͔ͱ͍͏ͱ… ▸ GC෇͖ݴޠ͸ɺ WASM GC ͕࢓༷Խ͞ΕΔ·Ͱɺग़ྗαΠζ͕ݫ͍͠ ▸ ΤίγεςϜ੒ཱʹ͸ɺWasm Binary ͷ ଟݴޠؒ Linker ࢓༷͕ඞཁ͔΋
45. ʮଞͷݴޠʹΑΔ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
46. ·ͱΊ ▸ ϑϩϯτΤϯυͷϕετϓϥΫςΟε͸ Server Application ૚Λ৵৯ ▸ Node.js ͸ Prisma ORM Ͱ Fullstack Framework (ओʹRails) ʹ࠶௅ઓ ▸ ଞͷݴޠ͕௥ै͢Δʹ͸ֻ͕͔࣌ؒΓͦ͏ ▸ TypeScript + ෦෼తʹ Rust ͕ɺ͠͹Β͘ϕετͳબ୒ࢶ
47. Cloudflare Workers ͕ ੾Γ։͘৽ྖҬ
48. Cloudflare Workers ▸ CDN Edge Ͱಈ͘(!!!) Node.js ▸ ݁Ռ੔߹ͷ Workers KVɺڧ੔߹ͷ Durable Objects ▸ CDN Edge ʹΑΔߴ͍Ԡ౴ੑͱɺ 1 req ͋ͨΓ CPU Time 50ms, Memory 128MB ͱ͍͏ڧ੍͍໿
49. CDN Edge Computing SERVER Application Engineer BROWSER EDGE WORKER (NODE.JS) SERVER CDN EDGE CACHE New!!!
50. ଞͷ CDN Edge Worker ࣮૷ ▸ AWS Lambda@Edge: Lambda ͷ Edge ൛ ▸ Fastly Compute@Edge: WebAssembly Λ Edge ʹσϓϩΠ ▸ Akamai: Edge Workers
51. Cloudflare Workers ͕ଞࣾαʔϏεΑΓ༏ΕͯΔ఺ ▸ ׬੒౓ͷߴ͍CLIπʔϧ(wrangler) ▸ ߴ଎σϓϩΠ ▸ ߴ͍ύϑΥʔϚϯε / Ԡ౴ੑ ▸ Edge ಛੑʹ߹Θͤͨ Cache API
52. https://blog.cloudflare.com/serverless-performance-comparison-workers-lambda/ Lambda@Edge ͱͷൺֱ
53. ͳͥ Cloudflare Workers ͕ Node.js ͳͷ͔ ▸ ίϯςφͰ͸ͳ͘ V8 Isolates (ϓϩηε) Λ CDN Edge ্ͰฒྻԽ ▸ ϦΫΤετ͝ͱʹϓϩηεׂ౰ ▸ ࠷దԽʹ͸ WebAssembly Λ࢖͏ https://developers.cloudflare.com/workers/learning/how-workers-works
54. CDN Edge Workers ͰԿ͕Ͱ͖Δ͔ʁ ▸ ࣗ༝౓ͷߴ͍Ωϟογϡίϯτϩʔϧ ▸ ʮࠓͱಉ͡Node.jsΞϓϦ͕ಈ͘ʯΘ͚Ͱ͸ͳ͍ ▸ CPU੍໿Λຬͨ͢ΞʔΩςΫνϟΛ࠶ߟ͢Δඞཁ ▸ ੍ݶΛຬͨͨ͢Ίʹ WebAssembly ͕ΑΓඞཁͱ͞Εͦ͏
55. ʮϑϩϯτΤϯυྖҬΛ࠶ఆٛ͢Δʯ ·ͱΊ
56. কདྷͷల๬ ▸ TypeScript + Next.js(Nuxt.js)+Rust ͕WebͷϕετϓϥΫςΟεʹͳΔ ▸ ͓ͦΒ͘ 2020೥୅͸ Fullstack Node.js or Jamstack+CMS ͕ ʮελʔτ ΞοϓքͷJavaʯͰ͋Δ Rails Λஔ͖׵͑ΔͩΖ͏ ▸ CDN Edge Worker ׆༻Ͱʮ੩తαΠτʯ͕ಈ͖ग़͢ ▸ WebAssembly ͸·ͩ·ͩރΕͯͳ͍
57. ݱঢ়ͷ՝୊ ▸ ֶशࢿྉͷෆ଍ ▸ ಈ͖͕଎͍ք۾ͷͨΊɺࢿྉʹ·ͱ·Δ͕࣌ؒͳ͍ ▸ Node.js քʹ͓͚ΔʮRails Guideʯ͕ͳ͍ ▸
58. ͓ΘΓ https://zenn.dev/articles/c638f1b3b0cd239d3eea ౤͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ ຊൃදͷࢀߟจݙ+ςΩετ൛