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
84
21k
光を超えるためのフロントエンドアーキテクチャ
HTML5 Conference 11/25
Koutarou Chikuba
November 25, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
14
4.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.3k
V8 as a container on CDN Edge worker
mizchi
6
1.9k
Edge Side Frontend という新領域
mizchi
34
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.1k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.3k
「フロントエンド領域」を再定義する
mizchi
50
36k
ServiceWorkerSideReactServerSideRendering
mizchi
5
830
Other Decks in Programming
See All in Programming
Rubyのobject_id
qnighy
6
1.3k
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
560
Ruby Parser progress report 2024
yui_knk
2
220
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
New Order in Cascade Sorting Order
mugi_uno
3
2.6k
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
Prolog入門
qnighy
4
990
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.5k
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
440
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
160
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Atom: Resistance is Futile
akmur
261
25k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Docker and Python
trallard
39
3k
Building Adaptive Systems
keathley
36
2.1k
Web development in the modern age
philhawksworth
204
10k
GraphQLとの向き合い方2022年版
quramy
43
13k
How GitHub (no longer) Works
holman
310
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
1.9k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.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
͓ΘΓ