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
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
320
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
110
What you can do with Ruby on WebAssembly
kateinoigakukun
0
150
XStateでReactに秩序を与えたい
gizm000
0
700
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
1
590
null or undefined
susisu
22
6.2k
Rubyのobject_id
qnighy
6
1.3k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
630
Prolog入門
qnighy
4
980
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
160
What is Parser
yui_knk
9
4.1k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Designing Experiences People Love
moore
138
23k
Six Lessons from altMBA
skipperchong
26
3.3k
How to Ace a Technical Interview
jacobian
275
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
The Language of Interfaces
destraynor
153
23k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Code Review Best Practice
trishagee
62
16k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Docker and Python
trallard
39
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
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
͓ΘΓ