光を超えるためのフロントエンドアーキテクチャ

by Koutarou Chikuba

Slide 1

Slide 1 text

ޫΛ௒͑ΔͨΊͷ ϑϩϯτΤϯυΞʔΩςΫνϟ @MIZCHI / HTML5 CONFERENCE

Slide 2

Slide 2 text

ABOUT ▸@mizchi / ஛അޫଠ࿠ ▸ϑϦʔϥϯεΤϯδχΞ ▸ϑϩϯτΤϯυઐ໳ ▸React / Node.js / SPA / PWA

Slide 3

Slide 3 text

͓඼ॻ͖ ▸16msҎ্ͷੈք ▸Cache Aware ͳઃܭ ▸16msະຬͷੈք ▸ϚΠΫϩνϡʔχϯά ▸ઃܭύλʔϯ

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ ▸ϑϩϯτΤϯυͷΩϟογϡઃܭ ▸ϚΠΫϩνϡʔχϯάࢦ਑ ▸ϦονΫϥΠΞϯτͷύϑΥʔϚϯε

Slide 5

Slide 5 text

ࠓ೔࿩͞ͳ͍͜ͱ ▸ϑϨʔϜϫʔΫґଘͷ࿩ ▸React / Vue / Angular / etc ▸αʔόʔͰͷ֤छ࣮ߦίετ ▸σʔλϕʔεͷΫΤϦίετͳͲ

Slide 6

Slide 6 text

େલఏ

Slide 7

Slide 7 text

͜ͷӉ஦Ͱ͸

Slide 8

Slide 8 text

ޫ͕஗͗͢Δʂ

Slide 9

Slide 9 text

ޫ͕஗͗͢Δ ▸ࠃ಺: 20ms~ ▸ΞϝϦΧ੢ւ؛: 120ms~ ▸Ϥʔϩού: 260ms~

Slide 10

Slide 10 text

ϋʔυ΢ΣΞͷੑೳ ▸ҰൠతͳσΟεϓϨΠ: 60~144Hz ▸VRΰʔάϧ: 90~ Hz ▸ώτͷ஌֮: 70~100Hz ※ ϑϦοΧʔ༥߹ස౓: https://ja.wikipedia.org/wiki/ϑϦοΧʔ

Slide 11

Slide 11 text

ϑϩϯτΤϯυٕज़ͷ໨త ▸খ͍͞είʔϓ: ϦονΫϥΠΞϯτٕ ज़ʹΑΓɺ(෦෼తʹ) 60fps Λୡ੒͢Δ ▸େ͖ͳείʔϓ: ௨৴ΛؚΊͯɺͦͷ஗ ԆɾϖΠϩʔυΛՄೳͳݶΓ཈͑Δ

Slide 12

Slide 12 text

16MS Ҏ্ͷੈք

Slide 13

Slide 13 text

஗ԆΛ෼ྨ͢Δ ▸~16ms: ϦΞϧλΠϜ ▸50~100ms: ϑΟʔυόοΫΛҙࣝ ▸300~ms: ΍΍஗͍ͱײ͡Δ ▸1000~ms: ஗͍ɺෆຬ RAILϞσϧͰύϑΥʔϚϯεΛܭଌ͢Δ - https://developers.google.com/web/fundamentals/performance/ rail?hl=ja

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

DEV.TO ͕ڭ͑ͯ͘ΕΔ(਎΋֖΋ͳ͍)ࣄ࣮ ▸ߏஙࡁΈHTMLΛCDN EdgeͰฦ͢ͱ଎͍ ▸ཪͰઌಡΈ͓ͯ͘͠ͱ଎͍ ▸(͜ͷࡍɺαʔόʔΞʔΩςΫνϟ͸ਖ਼௚ ԿͰ΋͍͍ɻ౸ୡ͠ͳ͍)

Slide 16

Slide 16 text

CLIENT SERVER CDN 50~ms 100~1000 ms ஍ཧత࣮ମ

Slide 17

Slide 17 text

ͳͥطଘͷΞϓϦ͸஗͍͔ ▸CDN Edge ͸ݡ͘ͳ͍(ਫ਼ʑ KVS+α ) ▸Ωϟογϡͱͦͷഁغ͸ຊ࣭తʹ೉͍͠ ▸(αʔόʔத৺ͷੈք؍ͩͱ͜͏͍͏ղऍ ʹͳΒͳ͍)

Slide 18

Slide 18 text

CACHE AWARE ͳઃܭ

Slide 19

Slide 19 text

CLIENT SERVER CLIENT - SERVER

Slide 20

Slide 20 text

CLIENT SERVER EDGE CLIENT - EDGE - SERVER

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI invalidate deploy ▸ ϦϦʔε͝ͱʹΩϟογϡ ഁغ(೚ҙ) ▸ ߋ৽ܥͰґଘ͢ΔΩϟο γϡΛഁغ ▸ ΫϥΠΞϯτ͸URLΛ Ωʔʹ֤ϨΠϠʔͷΩϟο γϡΛ໰͍߹ΘͤΔ ▸ Ωϟογϡ͕ͳ͚Ε͹ಈ తʹੜ੒ cache set Ωϟογϡઓུ DEVELOPPER push

Slide 23

Slide 23 text

CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ॳճ ▸ /items/123 ͕΄͍͠! ▸ αʔόʔͰ /items/123 ͷ HTML Λ render ▸ Edge Cache ʹอଘ ▸ HTML Λ ฦ٫ cache set

Slide 24

Slide 24 text

CLIENT EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ೋճ໨Ҏ߱ ▸ /items/123 ͕΄͍͠! ▸ Edge Cache ͔Β HTML Λฦ٫ ▸ (Service Worker ʹ ΩϟογϡΛ͍࣋ͬͯ Ε͹ɺͦΕΛ༏ઌ) 1~ms 20~ms

Slide 25

Slide 25 text

CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI ▸ ྫ: Ωϟογϡഁغ ▸ σʔλϕʔε্ͷ Item(id: 123) Λߋ৽ ▸ Edge Cache ͷ / items/123 Λഁغ invalidate updateItem({id: 123, ...})

Slide 26

Slide 26 text

CACHE AWARE ͳઃܭ(ཁ໿) ▸ࢀরܥ͸୯७ͳΩϟογϡϧʔϧ(URL) Ͱฦ٫ ▸ߋ৽ܥͷϑοΫͰΩϟογϡഁغ

Slide 27

Slide 27 text

ઃܭͷצॴ (1) ▸Ωϟογϡʹηογϣ ϯґଘ৘ใΛ࢖Θͳ͍ ▸ηογϣϯʹґଘ͢Δ View ͸ɺॳظԽޙʹ ajax Ͱ lazy ʹߏங

Slide 28

Slide 28 text

C ઃܭͷצॴ (2) ▸Ωϟογϡͷ૊੒͸ू ߹Ͱߟ͑Δ ▸ߏ੒ཁૉ͕ߋ৽͞Εͨ Βഁغ ITEM:123 COMMENT:345 COMMENT:347 ITEM:123 COMMENT:345 COMMENT:347 USER:7 USER:7 Cache: /items/123

Slide 29

Slide 29 text

ઃܭͷצॴ (3) ▸Ωϟογϡ͢Δͷ͸ HTMLҎ֎Ͱ΋͍͍ ▸Flux Store ͷJSON Λ อଘͳͲ ITEM:123 COMMENT:345 COMMENT:347 USER:7 JSON RECORD:1 HTML Server Client RECORD:2

Slide 30

Slide 30 text

ઃܭͷצॴ (4) ▸७ਮؔ਺ͱ෭࡞༻ΛؚΉؔ਺ͷ෼཭ = ؔ਺ܕϓϩάϥϛϯάͬΆ͘ߟ͑Δ fetchItem(id: string): Promise renderHtml(item: Item, comments: Comment[]): string fetchComments(itemId: string): Promise CACHE MANAGER updateItem(item: Item): Promise CASHE isomorphic renderer renderComponent(item: Item, comments: Comment[]): ReactNode

Slide 31

Slide 31 text

ݒ೦: Ωϟογϡഁغ͕ෳࡶ͗͢ͳ͍͔ʁ ▸Fastly: Varnish Surrogate Keys ▸ORM ͷϑοΫͳͲͰ؅ཧ ▸ActiveRecord: after_save ͳͲ ▸Surrogate Keys ͕࢓༷Խ͞Εͯ΄͍͠

Slide 32

Slide 32 text

ෳࡶ͞΁޲͚ͯ: ಈతͳ EDGE ▸AWS Lambda@Edge ▸CloudFlare Workers ▸Fastly Cloud Platform Edge ͰJS΍WASMͰෳࡶͳܭࢉ͕Ͱ͖Δ = HTML Λ૊ΈཱͯΒΕΔ = SSRʹศར

Slide 33

Slide 33 text

খن໛։ൃऀʹҙຯ͕͋Δ͔ ▸୯७ʹ CDN = Redis, Server = MySQLͱ ஔ͖׵͑ͯߟ͑ͯ΋͍͍ ▸ΞϓϦέʔγϣϯ͕ Cache Aware ͔Ͳ ͏͔͸ɺن໛ʹؔ܎ͳ͍

Slide 34

Slide 34 text

16MSҎ্ͷੈք: ࢦ਑ ▸Lv1. ωοτϫʔΫʹΞΫηεͨ͠Βෛ͚ ▸Lv2. CDN͔ΒઌʹΞΫηεͨ͠Βෛ͚ ▸Lv3. DBͰΫΤϦΛൃߦͨ͠Βෛ͚

Slide 35

Slide 35 text

PRELOADING

Slide 36

Slide 36 text

౤ػతΩϟογϡߏங ▸࢖͏͔΋͠Εͳ͍σʔλΛઌಡΈ LINK P1 LINK P2 P1 P2 ... Preload IMG JS CSS

Slide 37

Slide 37 text

ઌಡΈؔ࿈ͷ࢓༷ ▸https://w3c.github.io/preload/ ▸https://w3c.github.io/resource-hints/ ▸HTTP/2 Server Push ▸୯७ʹର৅Λ `fetch(endpoint)` ඈ͹ͯ͠ ͓͚ͩ͘Ͱ΋ޮՌ͸͋Δ

Slide 38

Slide 38 text

ྫ: NEXT.JS ʹΑΔ PRELOAD ࠷దԽ ▸Ϗϧυ࣌ʹؔ࿈ΞηοτΛऩूͯ͠ Λ head ʹૠೖ ▸ Ͱ࣍ϖʔδΞη οτΛ ʹૠೖ

Slide 39

Slide 39 text

▸https://github.com/guess-js/guess ▸GA(ޓ׵)ͷAPIͰϢʔβʔͷߦಈΛऩू ▸ػցֶशͰϢʔβʔͷ࣍ͷߦಈΛ༧ଌ ▸ Λϔομʹૠೖ

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

౤ػతΩϟογϡߏஙͷݱ࣮(1) ▸ᩦཉʹΩϟογϡΛऩू͢ΔͱɺϢʔβʔ ͱCDNͷଳҬʹෛՙ ▸ݡ͍ઌಡΈൣғΛɺίϯςΩετΛߟྀ ͠ɺ৬ਓతʹهड़͢Δ͜ͱʹ…

Slide 42

Slide 42 text

▸Ωϟογϡഁغઓུ͸WAFͷࢧԉ͕ඞཁ ▸ྫ: next.js ͷ preload ૠೖ, guess.js ▸ΞʔΩςΫνϟ͕੔ཧ͞Εͯͳ͍ͱ࣮ݱ ෆՄ ౤ػతΩϟογϡߏஙͷݱ࣮(2)

Slide 43

Slide 43 text

෭࡞༻Λ෼཭ͨ͠៉ྷͳίʔυΛॻ͘ => Ωϟογϡഁغ͕༧ଌͰ͖Δ ਎΋֖΋ͳ͘ݴ͏ͱ…

Slide 44

Slide 44 text

16MS ະຬͷੈք

Slide 45

Slide 45 text

16MSະຬ ▸్੾Εͣ࿈ଓͯ͠Δͱײ͡Δߋ৽ස౓ ▸ͭ·ΓΫϥΠΞϯτࢹ఺ͩͱΠϯϝϞ Ϧ or όοΫάϥ΢ϯυॲཧ

Slide 46

Slide 46 text

৭ʑͳϚΠΫϩνϡʔχϯά… ▸ॳظԽ ▸ωοτϫʔΫ࠷దԽ(ࠓ·Ͱͷ࿩) ▸εΫϦϓςΟϯάͷ࡟ݮ(js bundle size) ▸ϑϨʔϜ࠷దԽ ▸ϨΠΞ΢τ཈੍(BoundingBox࠶ܭࢉ) ▸ߴස౓ॲཧͷ཈੍(εΫϩʔϧ౳) ▸ॳظԽ஗ԆɾΦϑεϨουୀආ

Slide 47

Slide 47 text

εΫϦϓςΟϯά཈੍ ▸୯७ʹ࢖͏ϥΠϒϥϦͷྔΛݮΒ͢ ▸ճઢ଎౓ΑΓɺශऑͳCPU(ϞόΠϧ)Ͱ ޮՌେ ▸ΦϑεϨουୀආ(ޙड़)

Slide 48

Slide 48 text

εΫϦϓςΟϯά཈੍ɿखஈ ▸ES2015 Dynamic Import ▸Webpack: Code Spritting ▸Webpack: Dead Code Elimination

Slide 49

Slide 49 text

PREPACK ▸facebook/prepack ▸੩తղੳͯ͠ఆ਺৞ΈࠐΈ ▸(ݱঢ়ɺίʔυ͕େ෯ʹ૿͑Δ…)

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

ϨΠΞ΢τ཈੍ ▸ཁૉ෯Λมߋ͢Δͱ਌ํ޲Λ࠶ܭࢉ ▸ʮΨλοʯ΍ʮϐΫοʯͱ͍͏ѱମݧ

Slide 52

Slide 52 text

ϨΠΞ΢τ཈੍: εέϧτϯεΫϦʔϯ ▸ ྖҬΛ઎ΊΔϞοΫͰॳظԽ/͢Γସ͑ ▸ ϨΠΞ΢τ࠶ܭࢉͷ཈੍ https://uxplanet.org/how-to-use-animation-to- improve-ux-338819e93bdb

Slide 53

Slide 53 text

AMP ʹֶͿϨΠΞ΢τ཈੍ ▸CSS͸શͯΠϯϥΠϯԽ ▸ΩϟογϡώοτͱͷτϨʔυΦϑ ▸ը૾(amp-img)͸ width/height ඞਢ or ໌ࣔతͳ layout="responsive" ࢦఆ

Slide 54

Slide 54 text

ॳظԽ஗Ԇ/ΦϑεϨουॲཧ ▸WebWorker ͰόοΫάϥ΢ϯυॲཧ ▸εΫϦϓςΟϯά΋݁Ռతʹ཈੍

Slide 55

Slide 55 text

DEMO: MARKDOWN PREVIEW ▸off thread markdown compile (22ms~) ▸off thread prettier (1.2MB)

Slide 56

Slide 56 text

ϚΠΫϩνϡʔχϯάͷݱ࣮ ▸࣮ࡍʹ͸͜ΕΒͷෳ߹Ͱ໰୊͕ൃੜ ▸ߴස౓Πϕϯτ + ϨΠΞ΢τ࠶ܭࢉ ▸ϑϨʔϜϫʔΫಛ༗ͷࣄ৘

Slide 57

Slide 57 text

௿஗Ԇ؀ڥͷҝͷ ઃܭύλʔϯ

Slide 58

Slide 58 text

ઃܭύλʔϯ ▸ָ؍తUI ▸ΫϥΠΞϯτϑΝʔετ ▸off-the-main-thread

Slide 59

Slide 59 text

ָ؍తUI

Slide 60

Slide 60 text

ָ؍తUI ▸ৗʹϦΫΤετΛ੒ޭͨ͜͠ͱʹ͢Δ ▸ࣦഊ࣌ʹϩʔϧόοΫ

Slide 61

Slide 61 text

STEP 1 SERVER STEP 2 STEP 3 CONFIRM ok write write write CLIENT LOGIC Rollback on Error ָ؍తUI: ྫ: Ϣʔβʔొ࿥

Slide 62

Slide 62 text

ָ؍తUI: ͍ͭ࢖͑Δ͔ ▸ਖ਼ৗܥʹωοτϫʔΫ্ͷ෼ذ͕ͳ͍ ৔߹ ▸ϩάΠϯϑϩʔ / Like Button / هࣄ΍ ίϝϯτͷ౤ߘͳͲ

Slide 63

Slide 63 text

ΫϥΠΞϯτϑΝʔετઃܭ

Slide 64

Slide 64 text

ΫϥΠΞϯτϑΝʔετઃܭ ▸جຊతʹΫϥΠΞϯτͰͷσʔλॲཧ Λ༏ઌ͢Δ ▸αʔόʔ͸୯ʹ sync ͞ΕΔ͚ͩ ▸ผ్ू໿ܥAPIΛ༻ҙ

Slide 65

Slide 65 text

Client STATE STATE' STATE' STATE' Storage background sync SCRIPT VIEW API Aggregate Refer ΫϥΠΞϯτϑΝʔετઃܭ ▸ ΫϥΠΞϯτͷεςʔτ͕ओ ▸ αʔόʔεςʔτ͕ैଐ ▸ Sync / API ͕ू໿͢Δࡍʹ σʔλͷ੔߹ੑͷݕূ

Slide 66

Slide 66 text

ΫϥΠΞϯτϑΝʔετઃܭ: ͍ͭ࢖͑Δ͔ ▸ѻ͏σʔλ͕ࣗݾ׬݁͠ɺίϛϡχέʔ γϣϯ͕গͳ͍΋ͷ(ήʔϜɾπʔϧ) ▸ﬁrebase(ﬁrestore) ͱ૬ੑ͕͍͍

Slide 67

Slide 67 text

ΫϥΠΞϯτϑΝʔετઃܭ: ໰୊ ▸νʔτ଱ੑ͕௿͍ ▸Web ͸ΫϥΠΞϯτվ᜵ʹऑ͍ ▸ਅ໘໨ʹಥ͖٧ΊΔͱP2PͰͷ૬ޓ؂ࢹ (ϒϩοΫνΣʔϯٕज़)ͳͲ͕ඞཁʹ…

Slide 68

Slide 68 text

OFF THE MAIN THREAD

Slide 69

Slide 69 text

OFF THE MAIN THREAD ▸࠷ۙͷ(Chromeํ໘ͷ)τϨϯυ ▸UI Thread Ҏ֎ʹॲཧΛΦϑϩʔυ ▸WebWorker Λੵۃతʹ࢖͍ͬͯ͘

Slide 70

Slide 70 text

https://mizchi.hatenablog.com/entry/2018/10/18/155448

Slide 71

Slide 71 text

https://mizchi.hatenablog.com/entry/2018/10/18/155448

Slide 72

Slide 72 text

OFF THE MAIN THREAD: Կ͕ղܾͰ͖Δ͔ ▸Scripting: UI Thread ͕ബ͘ͳΔͷͰɺ JS ͷॳظԽ࣌ؒΛݮΒͤΔ ▸Universal: ࣗવͱViewͱσʔλΛ෼཭ ͢Δ͜ͱʹ

Slide 73

Slide 73 text

ύϑΥʔϚϯε ϝτϦΫε

Slide 74

Slide 74 text

SPEED INDEX ▸First Paint ▸First Meaningful Paint ▸First Contentful Paint ▸Time to Interact

Slide 75

Slide 75 text

LIGHTHOUSE ▸https://github.com/GoogleChrome/ lighthouse ▸֤छϝτϦΫεͷϨϙʔτΛ࡞੒ ▸(PWAܥΛաେධՁͳؾ΋…)

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

CHROME DEVTOOLS ▸ͱʹ͔͘৮ͬͯ׳ΕΔ! ▸

Slide 78

Slide 78 text

࠷ޙʹ: ͳͥߴ଎Խ͢Δ͔

Slide 79

Slide 79 text

ͳͥߴ଎Խ͢Δ͔ ▸៉ྷͳΞʔΩςΫνϟͰͳ͍ͱߴ଎ԽͰ ͖ͳ͍ ≒ ߴ଎ԽʮͰ͖Δʯ͜ͱ͕݈શ ͳΞʔΩςΫνϟͷҰͭͷূࠨ ▸ߴ଎Խͦͷ΋ͷ͸݁Ռʹա͗ͳ͍

Slide 80

Slide 80 text

ίʔυͷ៉ྷ͞ͱ଎౓ ▸Α͘ޡղ͞ΕΔ͕ɺίʔυͷ៉ྷ͞ͱ଎ ౓͸ରཱߏ଄Ͱ͸ͳ͍ ▸ΞʔΩςΫνϟͷੜΉɺચ࿅͞Εͨʮ༨ ༟ʯ͕ͦ͜ΩϟογϡઓུͷΑ͏ͳνϡʔ χϯάͷ༨஍ʹͳΔ

Slide 81

Slide 81 text

ࢀߟ ▸ΩϟογϡϑϨϯυϦʔͳεςʔτϨεΞϓϦέʔ γϣϯઃܭʹ͍ͭͯߟ͑Δ https:// mizchi.hatenablog.com/entry/2018/04/15/ 011520 ▸off-the-main-thread ͷ࣌୅ https:// mizchi.hatenablog.com/entry/ 2018/10/02/093750

Slide 82

Slide 82 text

͓ΘΓ