Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Koutarou Chikuba

November 09, 2020
Tweet

More Decks by Koutarou Chikuba

Other Decks in Technology

Transcript

  1. ABOUT ▸ @mizchi / ஛അޫଠ࿠ ▸ Frontend Engineer ▸ React

    / Node / SPA ▸ Web ͷ࠷৽ٕज़Ͱ৽͍͠ମݧΛ࣮ূ - ఏڙ͢Δͷ͕޷͖
  2. ͸͡Ίʹɿ஫ҙ఺ ▸ ࣗ෼͸ Frontend ͱ͍͏ΑΓ Node.js Engineer ʹ͍ۙ ▸ ࠷ઌ୺ʙۙະདྷͷ࿩Λ͢ΔͷͰɺഽצ͕߹Θͳ͍ਓ͸͍Δ͔΋

    ▸ ຊεϥΠυ͸ Rails ʹ݌՞ΛചΓ·͕͢ɺRails ͕Ռͨͨ͠໾ׂΛ൱ఆ͢Δ ΋ͷͰ͸͋Γ·ͤΜ
  3. ۙ೥ͷύϑΥʔϚϯεࢦ޲ ▸ Lighthouse ʹΑΔείΞԽ ▸ WebVitals ʹΑΔ SEO ΁ͷӨڹ ▸

    ϑϩϯτΤϯυٕज़͸ SPA ͷҝͷٕज़Ͱ͸ͳ͘ɺ ʮWebͷϕετϓϥΫςΟεΛ࣮ݱ͢Δ΋ͷʯ΁
  4. Deno: A secure runtime for JavaScript and TypeScript. ▸ Node.js

    ΦϦδφϧ࡞ऀͷ Ryan Dahl ʹΑΔ৽͍͠ Rust + V8 ͷ JS ॲཧܥ ▸ npm ΤίγεςϜΛ൱ఆ͠ ESM ͷ URL ύε͔Βґଘղܾ ▸ ࣮ߦ࣌ʹ໌ࣔతʹݖݶΛ෇༩͢Δαϯ υϘοΫεϞσϧ ▸ TypeScript First https://deno.land/
  5. Rome: Unifying the frontend development toolchain ▸ Babel ΦϦδφϧ࡞ऀ sebmck

    ʹΑΔ Node.js େ౷ҰπʔϧνΣΠϯ ▸ Babel, ESlint, Webpack, Prettier, Jest Λஔ͖׵͑Δ ▸ ֎෦ϥΠϒϥϦඇґଘͰࣗલͷ Parser / AST Ͱ౷Ұ ▸ TypeScript First https://rome.tools/
  6. Blitz: The Fullstack React Framework ▸ Next.js + Prisma ORM

    = Fullstack ▸ ϕετϓϥΫςΟεͷ٧Ί߹Θͤ + Code Generator ▸ react-query / react-final-form / zod / etc… ▸ meteor ෩ͷisomorphic ͳϦϞʔτؔ਺ݺͼग़͠(RPCม׵) ▸ TypeScript First
  7. ͳͥࠓ·Ͱ Node ͷ Fullstack Framework ͕ྲྀߦΒͳ͔͔ͬͨʁ ▸ Α͍ ORM ͕ͳ͔ͬͨ

    ▸ Node.js ॳظ͸ Monolithic ͳ Rails ΁ͷ൓ಈ͕͋ͬͨ ▸ Express ͸খ͍͞ϛυϧ΢ΣΞͷू߹ମ ▸ Node.js ͷΤίγεςϜ͕҆ఆͤͣɺऔࣺબ୒Ͱ͖ͳ͔ͬͨ
  8. prisma2: Modern ORM + Query Builder ▸ ʮNode.js ʹྑ͍ORM ͕ͳ͍ʯͱ͍͏ঢ়گΛ෴ͤͦ͏ͳ

    ORM / Query Builder ▸ એݴత Migration: ઐ༻ͷIDLͷมߋ͔ΒࣗಈͰϚΠάϨʔγϣϯΛੜ੒ ▸ TypeScript Friendly: TSͷॊೈͳදݱྗͰͲΜͳΫΤϦʹ΋ܕ͕෇͘ ▸ SQL First: ࣗવͳ SQL ͱରԠ͢Δ API
  9. PRISMA2 ͷӨڹ ▸ Prisma Λ࢖͏ϑϨʔϜϫʔΫͷ։ൃϥογϡ ▸ Blitz.js: Next.js + Prisma2

    + Code Generator ▸ Redwood.js: React + Redwood Router + Prisma2 ▸ Frourio: MS੡ TS First ͳ API αʔόʔ
  10. Modern JavaScript = TypeScript ▸ ྑ͍ίʔυ = ܕ͕͋Δίʔυ ▸ ྑ͍ઃܭ

    = ܕ͕෇͘API ▸ ྑ͍ϥΠϒϥϦ = ܕఆٛ(.d.ts)͕ఏڙ͞ΕΔϥΠϒϥϦ
  11. ▸ socket.io ͷ࡞ऀ Guillermo Rauch ཰͍Δ Vercel ͕։ൃ ▸ Vercel:

    SSG + Serverless ʹ࠷దԽ͞Εͨ PaaS ▸ (ݩʑ͸) React ͷ SSR Server + Routing ΛηοτͰఏڙ ͢ΔϑϨʔϜϫʔΫ ▸ ॳճϨεϙϯε͸ SSR Ͱฦ٫͠ɺҎ߱ͷભҠΛ CSR Ͱ Ҿ͖ܧ͙(Α͋͘ΔSPAͷߏ଄) Next.js ͱ͸Կ͔
  12. ▸ ෳ਺ͷ࣮ߦɾग़ྗϞʔυ ▸ 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
  13. ▸ 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
  14. ▸ (Next.js ొ৔Ҏલͷ) ඇৗʹෳࡶͳ SSR/CSR ΛӅṭ ▸ Node.js ͷϑϩϯτΤϯυπʔϧνΣΠϯͱɺSPA/SSR ͷϕετ

    ϓϥΫςΟεΛɺҰͭͷϑϨʔϜϫʔΫʹ ▸ Vue Nuxt, Svelte Sapper(SvelteKit) ͱ͍͏ϑΥϩϫʔ Next.js ͕࣮ݱͨ͜͠ͱ
  15. ٞ࿦: ͦ΋ͦ΋ SSR ͸ඞཁʁ ▸ ΄ͱΜͲͷέʔεͰඞཁͳ͍ ▸ GoogleBot ͷ CSR

    ίϯςϯπʹର͢ΔΠϯσοΫε͕਺࣌ؒ஗ΕΔ໰୊ ▸ NodeαʔόʔΛ࣋ͨͳ͍ϝϦοτͱͷτϨʔυΦϑ ▸ Next.js ͸ SSR ͠ͳ͍ʹͯ͠΋༗༻
  16. Next.js ͔ΒֶͿϕετϓϥΫςΟε: ·ͱΊ ▸ ෳࡶͳ SPA/SSR ΛӅṭ͠୭Ͱ΋࢖͑ΔΑ͏ʹ ▸ Next.js+Vercel ͸

    SSG/Serverless ͰϚωʔδϨεͳํ޲ʹਐԽ ▸ SSR ͸ଟ͘ͷέʔεͰෆཁ
  17. Legacy Monolithic Framework (Rails, Django, etc…) CSS Markup Engineer BROWSER

    SERVER JAVASCRIPT ORM Application Engineer HTML(STRING) CONTROLLER
  18. API Server + Single Page Application Frontend Engineer BROWSER SERVER

    CLIENT ROUTER ORM Application Engineer HTML(VDOM TREE) API CSS
  19. 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 ͷ΋ͷͱ͍͏ΑΓɺ΢ΣϒͷϕετϓϥΫςΟε΁
  20. Backend API + SSR : Next.js / Nuxt Frontend Engineer

    BROWSER SERVER Application Engineer CSS HTML(CSR) CONTROLLER HTML(SSR) BACKEND API INFRA AS A CODE
  21. Blitz Fullstack Style ▸ ORM + Next/Nuxt ͸ɺ Monolithic Rails

    ΁ઌ૆ฦΓ͢Δ ▸ ΋͸΍ Frontend Engineer Ͱ͸ͳ͘ɺຊདྷͷ Application Engineer ▸ ൣғ͕޿͗͢ΔͷͰɺ͓ͦΒ͘࠶ͼ෼ۀ͕ൃੜͦ͠͏ ▸ ·ͩྲྀߦͬͯͳ͍ɻ͜Ε͔Β
  22. ٞ࿦: ࠓͷ Frontend Engineer ΛͳΜͱݺ΂͹͍͍͔໰୊ ▸ (New) Application Engineer?: Backend

    த৺ͷNode.js ΤϯδχΞ ▸ Frontend Ops Engineer?: ϏϧυπʔϧνΣΠϯΛ؅ཧ ▸ Design Engineer?: Markup + JavaScript ▸ CDN Edge Engineer?: CDN पลΛ؅ཧ
  23. ࠓͷ 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!
  24. ૝ఆ൓࿦: ʮNode.js ΤϯδχΞͷϙδγϣϯτʔΫͰ͸ʁʯ ▸ ೝΊΔ͕ɺݱ࣮తʹϑϩϯτΤϯυ͸JSҎ֎ݫ͍͠ঢ়گ ▸ ࣗ෼͸JS(ES5) ͕ݏͰ AltJS ϚχΞ͕ͩͬͨɺ

    ES201x + TypeScript Ͱຬ ଍ɻV8 ͸଎౓తʹ΋े෼ɻ ▸ WebAssembly ʹظ଴ ▸ Rust: yew, dodrio, percy ▸ C#: Blazor WebAssembly
  25. 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."); } }
  26. ଞͷݴޠͷͨΊͷɺ Node.js Frontend ͷ౗͠ํ ▸ એݴతUI+Next.js Λ WebAssembly Ͱ࣮૷͢Δ ▸

    ݱঢ়͸ Rust + wasm_bindgen ͕ݱ࣮త͕ͩɺRust ͕ΞϓϦέʔγϣϯ૚ Λॻ͘ͷʹ޲͍ͯΔ͔ͱ͍͏ͱ… ▸ GC෇͖ݴޠ͸ɺ WASM GC ͕࢓༷Խ͞ΕΔ·Ͱɺग़ྗαΠζ͕ݫ͍͠ ▸ ΤίγεςϜ੒ཱʹ͸ɺWasm Binary ͷ ଟݴޠؒ Linker ࢓༷͕ඞཁ͔΋
  27. ʮଞͷݴޠʹΑΔ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
  28. ·ͱΊ ▸ ϑϩϯτΤϯυͷϕετϓϥΫςΟε͸ Server Application ૚Λ৵৯ ▸ Node.js ͸ Prisma

    ORM Ͱ Fullstack Framework (ओʹRails) ʹ࠶௅ઓ ▸ ଞͷݴޠ͕௥ै͢Δʹ͸ֻ͕͔࣌ؒΓͦ͏ ▸ TypeScript + ෦෼తʹ Rust ͕ɺ͠͹Β͘ϕετͳબ୒ࢶ
  29. Cloudflare Workers ▸ CDN Edge Ͱಈ͘(!!!) Node.js ▸ ݁Ռ੔߹ͷ Workers

    KVɺڧ੔߹ͷ Durable Objects ▸ CDN Edge ʹΑΔߴ͍Ԡ౴ੑͱɺ 1 req ͋ͨΓ CPU Time 50ms, Memory 128MB ͱ͍͏ڧ੍͍໿
  30. ଞͷ CDN Edge Worker ࣮૷ ▸ AWS Lambda@Edge: Lambda ͷ

    Edge ൛ ▸ Fastly Compute@Edge: WebAssembly Λ Edge ʹσϓϩΠ ▸ Akamai: Edge Workers
  31. ͳͥ Cloudflare Workers ͕ Node.js ͳͷ͔ ▸ ίϯςφͰ͸ͳ͘ V8 Isolates

    (ϓϩηε) Λ CDN Edge ্ͰฒྻԽ ▸ ϦΫΤετ͝ͱʹϓϩηεׂ౰ ▸ ࠷దԽʹ͸ WebAssembly Λ࢖͏ https://developers.cloudflare.com/workers/learning/how-workers-works
  32. কདྷͷల๬ ▸ TypeScript + Next.js(Nuxt.js)+Rust ͕WebͷϕετϓϥΫςΟεʹͳΔ ▸ ͓ͦΒ͘ 2020೥୅͸ Fullstack

    Node.js or Jamstack+CMS ͕ ʮελʔτ ΞοϓքͷJavaʯͰ͋Δ Rails Λஔ͖׵͑ΔͩΖ͏ ▸ CDN Edge Worker ׆༻Ͱʮ੩తαΠτʯ͕ಈ͖ग़͢ ▸ WebAssembly ͸·ͩ·ͩރΕͯͳ͍