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
91
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
35
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Programming
See All in Programming
Spring gRPC について / About Spring gRPC
mackey0225
0
230
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
120
Open source software: how to live long and go far
gaelvaroquaux
0
650
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
The Cult of Friendly URLs
andyhume
78
6.2k
Statistics for Hackers
jakevdp
797
220k
Six Lessons from altMBA
skipperchong
27
3.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How GitHub (no longer) Works
holman
314
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Speed Design
sergeychernyshev
27
800
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
͓ΘΓ