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
100
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.4k
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
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
170
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
技術同人誌をMCP Serverにしてみた
74th
1
640
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PipeCDのプラグイン化で目指すところ
warashi
1
270
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
130
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Docker and Python
trallard
44
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Experiences People Love
moore
142
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How STYLIGHT went responsive
nonsquared
100
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Six Lessons from altMBA
skipperchong
28
3.9k
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
͓ΘΓ