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 25, 2018
Programming
90
23k
光を超えるためのフロントエンドアーキテクチャ
HTML5 Conference 11/25
Koutarou Chikuba
November 25, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
110
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
540
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
decksh - a little language for decks
ajstarks
4
21k
構文解析器入門
ydah
7
2k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
920
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
770
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
9.9k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
320
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
11k
Flutterと Vibe Coding で個人開発!
hyshu
1
200
リッチエディターを安全に開発・運用するために
unachang113
1
340
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How STYLIGHT went responsive
nonsquared
100
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing for Performance
lara
610
69k
Adopting Sorbet at Scale
ufuk
77
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
ޫΛ͑ΔͨΊͷ ϑϩϯτΤϯυΞʔΩςΫνϟ @MIZCHI / HTML5 CONFERENCE
ABOUT ▸@mizchi / അޫଠ ▸ϑϦʔϥϯεΤϯδχΞ ▸ϑϩϯτΤϯυઐ ▸React / Node.js /
SPA / PWA
͓ॻ͖ ▸16msҎ্ͷੈք ▸Cache Aware ͳઃܭ ▸16msະຬͷੈք ▸ϚΠΫϩνϡʔχϯά ▸ઃܭύλʔϯ
ࠓ͢͜ͱ ▸ϑϩϯτΤϯυͷΩϟογϡઃܭ ▸ϚΠΫϩνϡʔχϯάࢦ ▸ϦονΫϥΠΞϯτͷύϑΥʔϚϯε
ࠓ͞ͳ͍͜ͱ ▸ϑϨʔϜϫʔΫґଘͷ ▸React / Vue / Angular / etc ▸αʔόʔͰͷ֤छ࣮ߦίετ
▸σʔλϕʔεͷΫΤϦίετͳͲ
େલఏ
͜ͷӉͰ
ޫ͕͗͢Δʂ
ޫ͕͗͢Δ ▸ࠃ: 20ms~ ▸ΞϝϦΧւ؛: 120ms~ ▸Ϥʔϩού: 260ms~
ϋʔυΣΞͷੑೳ ▸ҰൠతͳσΟεϓϨΠ: 60~144Hz ▸VRΰʔάϧ: 90~ Hz ▸ώτͷ֮: 70~100Hz ※ ϑϦοΧʔ༥߹ස:
https://ja.wikipedia.org/wiki/ϑϦοΧʔ
ϑϩϯτΤϯυٕज़ͷత ▸খ͍͞είʔϓ: ϦονΫϥΠΞϯτٕ ज़ʹΑΓɺ(෦తʹ) 60fps Λୡ͢Δ ▸େ͖ͳείʔϓ: ௨৴ΛؚΊͯɺͦͷ ԆɾϖΠϩʔυΛՄೳͳݶΓ͑Δ
16MS Ҏ্ͷੈք
ԆΛྨ͢Δ ▸~16ms: ϦΞϧλΠϜ ▸50~100ms: ϑΟʔυόοΫΛҙࣝ ▸300~ms: ͍ͱײ͡Δ ▸1000~ms: ͍ɺෆຬ RAILϞσϧͰύϑΥʔϚϯεΛܭଌ͢Δ
- https://developers.google.com/web/fundamentals/performance/ rail?hl=ja
None
DEV.TO ͕ڭ͑ͯ͘ΕΔ(֖ͳ͍)ࣄ࣮ ▸ߏஙࡁΈHTMLΛCDN EdgeͰฦ͢ͱ͍ ▸ཪͰઌಡΈ͓ͯ͘͠ͱ͍ ▸(͜ͷࡍɺαʔόʔΞʔΩςΫνϟਖ਼ ԿͰ͍͍ɻ౸ୡ͠ͳ͍)
CLIENT SERVER CDN 50~ms 100~1000 ms ཧత࣮ମ
ͳͥطଘͷΞϓϦ͍͔ ▸CDN Edge ݡ͘ͳ͍(ਫ਼ʑ KVS+α ) ▸Ωϟογϡͱͦͷഁغຊ࣭తʹ͍͠ ▸(αʔόʔத৺ͷੈք؍ͩͱ͜͏͍͏ղऍ ʹͳΒͳ͍)
CACHE AWARE ͳઃܭ
CLIENT SERVER CLIENT - SERVER
CLIENT SERVER EDGE CLIENT - EDGE - SERVER
CLIENT SERVER DATABASE KVS INDEXED DB LOCAL STORAGE JAVASCRIPT STATE
EDGE EDGE CACHE EDGE WORKER BROWSER CACHE SERVICE WORKER CACHE 20~30ms 10~100ms ~μs 1~ms 5~ms (query cost) CLIENT - EDGE - SERVER WITH CACHE
CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI invalidate
deploy ▸ ϦϦʔε͝ͱʹΩϟογϡ ഁغ(ҙ) ▸ ߋ৽ܥͰґଘ͢ΔΩϟο γϡΛഁغ ▸ ΫϥΠΞϯτURLΛ Ωʔʹ֤ϨΠϠʔͷΩϟο γϡΛ͍߹ΘͤΔ ▸ Ωϟογϡ͕ͳ͚Εಈ తʹੜ cache set Ωϟογϡઓུ DEVELOPPER push
CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ:
ॳճ ▸ /items/123 ͕΄͍͠! ▸ αʔόʔͰ /items/123 ͷ HTML Λ render ▸ Edge Cache ʹอଘ ▸ HTML Λ ฦ٫ cache set
CLIENT EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ೋճҎ߱
▸ /items/123 ͕΄͍͠! ▸ Edge Cache ͔Β HTML Λฦ٫ ▸ (Service Worker ʹ ΩϟογϡΛ͍࣋ͬͯ ΕɺͦΕΛ༏ઌ) 1~ms 20~ms
CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI ▸
ྫ: Ωϟογϡഁغ ▸ σʔλϕʔε্ͷ Item(id: 123) Λߋ৽ ▸ Edge Cache ͷ / items/123 Λഁغ invalidate updateItem({id: 123, ...})
CACHE AWARE ͳઃܭ(ཁ) ▸ࢀরܥ୯७ͳΩϟογϡϧʔϧ(URL) Ͱฦ٫ ▸ߋ৽ܥͷϑοΫͰΩϟογϡഁغ
ઃܭͷצॴ (1) ▸Ωϟογϡʹηογϣ ϯґଘใΛΘͳ͍ ▸ηογϣϯʹґଘ͢Δ View ɺॳظԽޙʹ ajax Ͱ lazy
ʹߏங
C ઃܭͷצॴ (2) ▸Ωϟογϡͷू ߹Ͱߟ͑Δ ▸ߏཁૉ͕ߋ৽͞Εͨ Βഁغ ITEM:123 COMMENT:345 COMMENT:347
ITEM:123 COMMENT:345 COMMENT:347 USER:7 USER:7 Cache: /items/123
ઃܭͷצॴ (3) ▸Ωϟογϡ͢Δͷ HTMLҎ֎Ͱ͍͍ ▸Flux Store ͷJSON Λ อଘͳͲ ITEM:123
COMMENT:345 COMMENT:347 USER:7 JSON RECORD:1 HTML Server Client RECORD:2
ઃܭͷצॴ (4) ▸७ਮؔͱ෭࡞༻ΛؚΉؔͷ = ؔܕϓϩάϥϛϯάͬΆ͘ߟ͑Δ fetchItem(id: string): Promise<Item> renderHtml(item: Item,
comments: Comment[]): string fetchComments(itemId: string): Promise<Comment[]> CACHE MANAGER updateItem(item: Item): Promise<void> CASHE isomorphic renderer renderComponent(item: Item, comments: Comment[]): ReactNode
ݒ೦: Ωϟογϡഁغ͕ෳࡶ͗͢ͳ͍͔ʁ ▸Fastly: Varnish Surrogate Keys ▸ORM ͷϑοΫͳͲͰཧ ▸ActiveRecord: after_save
ͳͲ ▸Surrogate Keys ͕༷Խ͞Εͯ΄͍͠
ෳࡶ͚ͯ͞: ಈతͳ EDGE ▸AWS Lambda@Edge ▸CloudFlare Workers ▸Fastly Cloud Platform
Edge ͰJSWASMͰෳࡶͳܭࢉ͕Ͱ͖Δ = HTML ΛΈཱͯΒΕΔ = SSRʹศར
খن։ൃऀʹҙຯ͕͋Δ͔ ▸୯७ʹ CDN = Redis, Server = MySQLͱ ஔ͖͑ͯߟ͍͍͑ͯ ▸ΞϓϦέʔγϣϯ͕
Cache Aware ͔Ͳ ͏͔ɺنʹؔͳ͍
16MSҎ্ͷੈք: ࢦ ▸Lv1. ωοτϫʔΫʹΞΫηεͨ͠Βෛ͚ ▸Lv2. CDN͔ΒઌʹΞΫηεͨ͠Βෛ͚ ▸Lv3. DBͰΫΤϦΛൃߦͨ͠Βෛ͚
PRELOADING
ػతΩϟογϡߏங ▸͏͔͠Εͳ͍σʔλΛઌಡΈ LINK P1 LINK P2 P1 P2 ... Preload
IMG JS CSS
ઌಡΈؔ࿈ͷ༷ ▸https://w3c.github.io/preload/ ▸https://w3c.github.io/resource-hints/ ▸HTTP/2 Server Push ▸୯७ʹରΛ `fetch(endpoint)` ඈͯ͠ ͓͚ͩ͘ͰޮՌ͋Δ
ྫ: NEXT.JS ʹΑΔ PRELOAD ࠷దԽ ▸Ϗϧυ࣌ʹؔ࿈ΞηοτΛऩूͯ͠ <link rel="preload"...> Λ head
ʹૠೖ ▸<Link to="..." prefetch> Ͱ࣍ϖʔδΞη οτΛ <link rel="preload" ...> ʹૠೖ
▸https://github.com/guess-js/guess ▸GA(ޓ)ͷAPIͰϢʔβʔͷߦಈΛऩू ▸ػցֶशͰϢʔβʔͷ࣍ͷߦಈΛ༧ଌ ▸<link rel="preload" ...> Λϔομʹૠೖ
None
ػతΩϟογϡߏஙͷݱ࣮(1) ▸ᩦཉʹΩϟογϡΛऩू͢ΔͱɺϢʔβʔ ͱCDNͷଳҬʹෛՙ ▸ݡ͍ઌಡΈൣғΛɺίϯςΩετΛߟྀ ͠ɺ৬ਓతʹهड़͢Δ͜ͱʹ…
▸ΩϟογϡഁغઓུWAFͷࢧԉ͕ඞཁ ▸ྫ: next.js ͷ preload ૠೖ, guess.js ▸ΞʔΩςΫνϟ͕ཧ͞Εͯͳ͍ͱ࣮ݱ ෆՄ ػతΩϟογϡߏஙͷݱ࣮(2)
෭࡞༻Λͨ͠៉ྷͳίʔυΛॻ͘ => Ωϟογϡഁغ͕༧ଌͰ͖Δ ֖ͳ͘ݴ͏ͱ…
16MS ະຬͷੈք
16MSະຬ ▸్Εͣ࿈ଓͯ͠Δͱײ͡Δߋ৽ස ▸ͭ·ΓΫϥΠΞϯτࢹͩͱΠϯϝϞ Ϧ or όοΫάϥϯυॲཧ
৭ʑͳϚΠΫϩνϡʔχϯά… ▸ॳظԽ ▸ωοτϫʔΫ࠷దԽ(ࠓ·Ͱͷ) ▸εΫϦϓςΟϯάͷݮ(js bundle size) ▸ϑϨʔϜ࠷దԽ ▸ϨΠΞτ੍(BoundingBox࠶ܭࢉ) ▸ߴසॲཧͷ੍(εΫϩʔϧ) ▸ॳظԽԆɾΦϑεϨουୀආ
εΫϦϓςΟϯά੍ ▸୯७ʹ͏ϥΠϒϥϦͷྔΛݮΒ͢ ▸ճઢΑΓɺශऑͳCPU(ϞόΠϧ)Ͱ ޮՌେ ▸ΦϑεϨουୀආ(ޙड़)
εΫϦϓςΟϯά੍ɿखஈ ▸ES2015 Dynamic Import ▸Webpack: Code Spritting ▸Webpack: Dead Code
Elimination
PREPACK ▸facebook/prepack ▸੩తղੳͯ͠ఆΈࠐΈ ▸(ݱঢ়ɺίʔυ͕େ෯ʹ૿͑Δ…)
None
ϨΠΞτ੍ ▸ཁૉ෯Λมߋ͢ΔͱํΛ࠶ܭࢉ ▸ʮΨλοʯʮϐΫοʯͱ͍͏ѱମݧ
ϨΠΞτ੍: εέϧτϯεΫϦʔϯ ▸ ྖҬΛΊΔϞοΫͰॳظԽ/͢Γସ͑ ▸ ϨΠΞτ࠶ܭࢉͷ੍ https://uxplanet.org/how-to-use-animation-to- improve-ux-338819e93bdb
AMP ʹֶͿϨΠΞτ੍ ▸CSSશͯΠϯϥΠϯԽ ▸ΩϟογϡώοτͱͷτϨʔυΦϑ ▸ը૾(amp-img) width/height ඞਢ or ໌ࣔతͳ layout="responsive"
ࢦఆ
ॳظԽԆ/ΦϑεϨουॲཧ ▸WebWorker ͰόοΫάϥϯυॲཧ ▸εΫϦϓςΟϯά݁Ռతʹ੍
DEMO: MARKDOWN PREVIEW ▸off thread markdown compile (22ms~) ▸off thread
prettier (1.2MB)
ϚΠΫϩνϡʔχϯάͷݱ࣮ ▸࣮ࡍʹ͜ΕΒͷෳ߹Ͱ͕ൃੜ ▸ߴසΠϕϯτ + ϨΠΞτ࠶ܭࢉ ▸ϑϨʔϜϫʔΫಛ༗ͷࣄ
Ԇڥͷҝͷ ઃܭύλʔϯ
ઃܭύλʔϯ ▸ָ؍తUI ▸ΫϥΠΞϯτϑΝʔετ ▸off-the-main-thread
ָ؍తUI
ָ؍తUI ▸ৗʹϦΫΤετΛޭͨ͜͠ͱʹ͢Δ ▸ࣦഊ࣌ʹϩʔϧόοΫ
STEP 1 SERVER STEP 2 STEP 3 CONFIRM ok write
write write CLIENT LOGIC Rollback on Error ָ؍తUI: ྫ: Ϣʔβʔొ
ָ؍తUI: ͍ͭ͑Δ͔ ▸ਖ਼ৗܥʹωοτϫʔΫ্ͷذ͕ͳ͍ ߹ ▸ϩάΠϯϑϩʔ / Like Button / هࣄ
ίϝϯτͷߘͳͲ
ΫϥΠΞϯτϑΝʔετઃܭ
ΫϥΠΞϯτϑΝʔετઃܭ ▸جຊతʹΫϥΠΞϯτͰͷσʔλॲཧ Λ༏ઌ͢Δ ▸αʔόʔ୯ʹ sync ͞ΕΔ͚ͩ ▸ผ్ूܥAPIΛ༻ҙ
Client STATE STATE' STATE' STATE' Storage background sync SCRIPT VIEW
API Aggregate Refer ΫϥΠΞϯτϑΝʔετઃܭ ▸ ΫϥΠΞϯτͷεςʔτ͕ओ ▸ αʔόʔεςʔτ͕ैଐ ▸ Sync / API ͕ू͢Δࡍʹ σʔλͷ߹ੑͷݕূ
ΫϥΠΞϯτϑΝʔετઃܭ: ͍ͭ͑Δ͔ ▸ѻ͏σʔλ͕ࣗݾ݁͠ɺίϛϡχέʔ γϣϯ͕গͳ͍ͷ(ήʔϜɾπʔϧ) ▸firebase(firestore) ͱ૬ੑ͕͍͍
ΫϥΠΞϯτϑΝʔετઃܭ: ▸νʔτੑ͕͍ ▸Web ΫϥΠΞϯτվ᜵ʹऑ͍ ▸ਅ໘ʹಥ͖٧ΊΔͱP2PͰͷ૬ޓࢹ (ϒϩοΫνΣʔϯٕज़)ͳͲ͕ඞཁʹ…
OFF THE MAIN THREAD
OFF THE MAIN THREAD ▸࠷ۙͷ(Chromeํ໘ͷ)τϨϯυ ▸UI Thread Ҏ֎ʹॲཧΛΦϑϩʔυ ▸WebWorker Λੵۃతʹ͍ͬͯ͘
https://mizchi.hatenablog.com/entry/2018/10/18/155448
https://mizchi.hatenablog.com/entry/2018/10/18/155448
OFF THE MAIN THREAD: Կ͕ղܾͰ͖Δ͔ ▸Scripting: UI Thread ͕ബ͘ͳΔͷͰɺ JS
ͷॳظԽ࣌ؒΛݮΒͤΔ ▸Universal: ࣗવͱViewͱσʔλΛ ͢Δ͜ͱʹ
ύϑΥʔϚϯε ϝτϦΫε
SPEED INDEX ▸First Paint ▸First Meaningful Paint ▸First Contentful Paint
▸Time to Interact
LIGHTHOUSE ▸https://github.com/GoogleChrome/ lighthouse ▸֤छϝτϦΫεͷϨϙʔτΛ࡞ ▸(PWAܥΛաେධՁͳؾ…)
None
CHROME DEVTOOLS ▸ͱʹ͔͘৮ͬͯ׳ΕΔ! ▸
࠷ޙʹ: ͳͥߴԽ͢Δ͔
ͳͥߴԽ͢Δ͔ ▸៉ྷͳΞʔΩςΫνϟͰͳ͍ͱߴԽͰ ͖ͳ͍ ≒ ߴԽʮͰ͖Δʯ͜ͱ͕݈શ ͳΞʔΩςΫνϟͷҰͭͷূࠨ ▸ߴԽͦͷͷ݁Ռʹա͗ͳ͍
ίʔυͷ៉ྷ͞ͱ ▸Α͘ޡղ͞ΕΔ͕ɺίʔυͷ៉ྷ͞ͱ ରཱߏͰͳ͍ ▸ΞʔΩςΫνϟͷੜΉɺચ࿅͞Εͨʮ༨ ༟ʯ͕ͦ͜ΩϟογϡઓུͷΑ͏ͳνϡʔ χϯάͷ༨ʹͳΔ
ࢀߟ ▸ΩϟογϡϑϨϯυϦʔͳεςʔτϨεΞϓϦέʔ γϣϯઃܭʹ͍ͭͯߟ͑Δ https:// mizchi.hatenablog.com/entry/2018/04/15/ 011520 ▸off-the-main-thread ͷ࣌ https:// mizchi.hatenablog.com/entry/
2018/10/02/093750
͓ΘΓ