Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「フロントエンド領域」を再定義する
Search
Koutarou Chikuba
November 09, 2020
Technology
50
35k
「フロントエンド領域」を再定義する
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
14
4.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
5.7k
V8 as a container on CDN Edge worker
mizchi
5
1.6k
Edge Side Frontend という新領域
mizchi
33
13k
バンドル最適化マニアクス at tfconf
mizchi
7
3.8k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
19k
Deno Node 両刀
mizchi
6
2.1k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
ServiceWorkerSideReactServerSideRendering
mizchi
5
810
Other Decks in Technology
See All in Technology
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
yukihirochiba
0
370
【OpenAI本出版記念】npakaによるOpenAI最新技術情報と技術情報キャッチアップ術
npaka
8
1.4k
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
130
滑空スポーツ講習会2023 航空安全講習会 第4回 日常整備に役立ちそうな雑情報 / JSA Safety Seminar 2023 glider maintenance
jsaseminar
0
110
あなたの知らないバグバウンティの世界
eurekaberry
1
1.4k
令和最新版 ソフトウェアエンジニアのためのDJ入門、あるいはDJに学ぶ仕事術 #ya8
stefafafan
1
130
Feature Flag Deep Dive
biwashi
20
5k
PHPerKaigi 2024 - PHP 本体のバグを見つけたら適切に報告しよう
zeriyoshi
0
750
Combineを中心とした処理をSwift Concurrencyへ (これまでも調べた調査と向き合い)
fumiyasac0921
1
170
スプリント内で試験を完了させるには?アジャイル・スクラム開発に参加したQAエンジニアの悩みと対策
cybozuinsideout
PRO
1
110
ChatGPTのLT会-メモソフトにChatGPT入れると結構便利
okada_fuutass
0
150
EKSの認証認可の仕組みとEKS APIを用いた認可制御について
daitak
0
260
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.7k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Designing for Performance
lara
601
67k
Web development in the modern age
philhawksworth
201
10k
A Tale of Four Properties
chriscoyier
150
22k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Unsuck your backbone
ammeep
660
56k
Teambox: Starting and Learning
jrom
126
8.3k
Debugging Ruby Performance
tmm1
68
11k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
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 ͛મΑΖ͓͘͠ئ͍͠·͢ʂʂʂʂ ຊൃදͷࢀߟจݙ+ςΩετ൛