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

Koutarou Chikuba

November 09, 2020

Tweet Share

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 ౤͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ ຊൃදͷࢀߟจݙ+ςΩετ൛