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

HTML5 Conference 11/25

Transcript

1. ޫΛ௒͑ΔͨΊͷ ϑϩϯτΤϯυΞʔΩςΫνϟ @MIZCHI / HTML5 CONFERENCE
2. ABOUT ▸@mizchi / ஛അޫଠ࿠ ▸ϑϦʔϥϯεΤϯδχΞ ▸ϑϩϯτΤϯυઐ໳ ▸React / Node.js / SPA / PWA
3. ͓඼ॻ͖ ▸16msҎ্ͷੈք ▸Cache Aware ͳઃܭ ▸16msະຬͷੈք ▸ϚΠΫϩνϡʔχϯά ▸ઃܭύλʔϯ
4. ࠓ೔࿩͢͜ͱ ▸ϑϩϯτΤϯυͷΩϟογϡઃܭ ▸ϚΠΫϩνϡʔχϯάࢦ਑ ▸ϦονΫϥΠΞϯτͷύϑΥʔϚϯε
5. ࠓ೔࿩͞ͳ͍͜ͱ ▸ϑϨʔϜϫʔΫґଘͷ࿩ ▸React / Vue / Angular / etc ▸αʔόʔͰͷ֤छ࣮ߦίετ ▸σʔλϕʔεͷΫΤϦίετͳͲ
6. େલఏ
7. ͜ͷӉ஦Ͱ͸
8. ޫ͕஗͗͢Δʂ
9. ޫ͕஗͗͢Δ ▸ࠃ಺: 20ms~ ▸ΞϝϦΧ੢ւ؛: 120ms~ ▸Ϥʔϩού: 260ms~
10. ϋʔυ΢ΣΞͷੑೳ ▸ҰൠతͳσΟεϓϨΠ: 60~144Hz ▸VRΰʔάϧ: 90~ Hz ▸ώτͷ஌֮: 70~100Hz ※ ϑϦοΧʔ༥߹ස౓: https://ja.wikipedia.org/wiki/ϑϦοΧʔ
11. ϑϩϯτΤϯυٕज़ͷ໨త ▸খ͍͞είʔϓ: ϦονΫϥΠΞϯτٕ ज़ʹΑΓɺ(෦෼తʹ) 60fps Λୡ੒͢Δ ▸େ͖ͳείʔϓ: ௨৴ΛؚΊͯɺͦͷ஗ ԆɾϖΠϩʔυΛՄೳͳݶΓ཈͑Δ
12. 16MS Ҏ্ͷੈք
13. ஗ԆΛ෼ྨ͢Δ ▸~16ms: ϦΞϧλΠϜ ▸50~100ms: ϑΟʔυόοΫΛҙࣝ ▸300~ms: ΍΍஗͍ͱײ͡Δ ▸1000~ms: ஗͍ɺෆຬ RAILϞσϧͰύϑΥʔϚϯεΛܭଌ͢Δ - https://developers.google.com/web/fundamentals/performance/ rail?hl=ja
15. DEV.TO ͕ڭ͑ͯ͘ΕΔ(਎΋֖΋ͳ͍)ࣄ࣮ ▸ߏஙࡁΈHTMLΛCDN EdgeͰฦ͢ͱ଎͍ ▸ཪͰઌಡΈ͓ͯ͘͠ͱ଎͍ ▸(͜ͷࡍɺαʔόʔΞʔΩςΫνϟ͸ਖ਼௚ ԿͰ΋͍͍ɻ౸ୡ͠ͳ͍)
16. CLIENT SERVER CDN 50~ms 100~1000 ms ஍ཧత࣮ମ
17. ͳͥطଘͷΞϓϦ͸஗͍͔ ▸CDN Edge ͸ݡ͘ͳ͍(ਫ਼ʑ KVS+α ) ▸Ωϟογϡͱͦͷഁغ͸ຊ࣭తʹ೉͍͠ ▸(αʔόʔத৺ͷੈք؍ͩͱ͜͏͍͏ղऍ ʹͳΒͳ͍)
18. CACHE AWARE ͳઃܭ
19. CLIENT SERVER CLIENT - SERVER
20. CLIENT SERVER EDGE CLIENT - EDGE - SERVER
21. 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
22. CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI invalidate deploy ▸ ϦϦʔε͝ͱʹΩϟογϡ ഁغ(೚ҙ) ▸ ߋ৽ܥͰґଘ͢ΔΩϟο γϡΛഁغ ▸ ΫϥΠΞϯτ͸URLΛ Ωʔʹ֤ϨΠϠʔͷΩϟο γϡΛ໰͍߹ΘͤΔ ▸ Ωϟογϡ͕ͳ͚Ε͹ಈ తʹੜ੒ cache set Ωϟογϡઓུ DEVELOPPER push
23. CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ॳճ ▸ /items/123 ͕΄͍͠! ▸ αʔόʔͰ /items/123 ͷ HTML Λ render ▸ Edge Cache ʹอଘ ▸ HTML Λ ฦ٫ cache set
24. CLIENT EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ೋճ໨Ҏ߱ ▸ /items/123 ͕΄͍͠! ▸ Edge Cache ͔Β HTML Λฦ٫ ▸ (Service Worker ʹ ΩϟογϡΛ͍࣋ͬͯ Ε͹ɺͦΕΛ༏ઌ) 1~ms 20~ms
25. CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI ▸ ྫ: Ωϟογϡഁغ ▸ σʔλϕʔε্ͷ Item(id: 123) Λߋ৽ ▸ Edge Cache ͷ / items/123 Λഁغ invalidate updateItem({id: 123, ...})
26. CACHE AWARE ͳઃܭ(ཁ໿) ▸ࢀরܥ͸୯७ͳΩϟογϡϧʔϧ(URL) Ͱฦ٫ ▸ߋ৽ܥͷϑοΫͰΩϟογϡഁغ
27. ઃܭͷצॴ (1) ▸Ωϟογϡʹηογϣ ϯґଘ৘ใΛ࢖Θͳ͍ ▸ηογϣϯʹґଘ͢Δ View ͸ɺॳظԽޙʹ ajax Ͱ lazy ʹߏங
28. C ઃܭͷצॴ (2) ▸Ωϟογϡͷ૊੒͸ू ߹Ͱߟ͑Δ ▸ߏ੒ཁૉ͕ߋ৽͞Εͨ Βഁغ ITEM:123 COMMENT:345 COMMENT:347 ITEM:123 COMMENT:345 COMMENT:347 USER:7 USER:7 Cache: /items/123
29. ઃܭͷצॴ (3) ▸Ωϟογϡ͢Δͷ͸ HTMLҎ֎Ͱ΋͍͍ ▸Flux Store ͷJSON Λ อଘͳͲ ITEM:123 COMMENT:345 COMMENT:347 USER:7 JSON RECORD:1 HTML Server Client RECORD:2
30. ઃܭͷצॴ (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
31. ݒ೦: Ωϟογϡഁغ͕ෳࡶ͗͢ͳ͍͔ʁ ▸Fastly: Varnish Surrogate Keys ▸ORM ͷϑοΫͳͲͰ؅ཧ ▸ActiveRecord: after_save ͳͲ ▸Surrogate Keys ͕࢓༷Խ͞Εͯ΄͍͠
32. ෳࡶ͞΁޲͚ͯ: ಈతͳ EDGE ▸AWS Lambda@Edge ▸CloudFlare Workers ▸Fastly Cloud Platform Edge ͰJS΍WASMͰෳࡶͳܭࢉ͕Ͱ͖Δ = HTML Λ૊ΈཱͯΒΕΔ = SSRʹศར
33. খن໛։ൃऀʹҙຯ͕͋Δ͔ ▸୯७ʹ CDN = Redis, Server = MySQLͱ ஔ͖׵͑ͯߟ͑ͯ΋͍͍ ▸ΞϓϦέʔγϣϯ͕ Cache Aware ͔Ͳ ͏͔͸ɺن໛ʹؔ܎ͳ͍
34. 16MSҎ্ͷੈք: ࢦ਑ ▸Lv1. ωοτϫʔΫʹΞΫηεͨ͠Βෛ͚ ▸Lv2. CDN͔ΒઌʹΞΫηεͨ͠Βෛ͚ ▸Lv3. DBͰΫΤϦΛൃߦͨ͠Βෛ͚
35. PRELOADING
36. ౤ػతΩϟογϡߏங ▸࢖͏͔΋͠Εͳ͍σʔλΛઌಡΈ LINK P1 LINK P2 P1 P2 ... Preload IMG JS CSS
37. ઌಡΈؔ࿈ͷ࢓༷ ▸https://w3c.github.io/preload/ ▸https://w3c.github.io/resource-hints/ ▸HTTP/2 Server Push ▸୯७ʹର৅Λ `fetch(endpoint)` ඈ͹ͯ͠ ͓͚ͩ͘Ͱ΋ޮՌ͸͋Δ
38. ྫ: NEXT.JS ʹΑΔ PRELOAD ࠷దԽ ▸Ϗϧυ࣌ʹؔ࿈ΞηοτΛऩूͯ͠ <link rel="preload"...> Λ head ʹૠೖ ▸<Link to="..." prefetch> Ͱ࣍ϖʔδΞη οτΛ <link rel="preload" ...> ʹૠೖ
39. ▸https://github.com/guess-js/guess ▸GA(ޓ׵)ͷAPIͰϢʔβʔͷߦಈΛऩू ▸ػցֶशͰϢʔβʔͷ࣍ͷߦಈΛ༧ଌ ▸<link rel="preload" ...> Λϔομʹૠೖ
41. ౤ػతΩϟογϡߏஙͷݱ࣮(1) ▸ᩦཉʹΩϟογϡΛऩू͢ΔͱɺϢʔβʔ ͱCDNͷଳҬʹෛՙ ▸ݡ͍ઌಡΈൣғΛɺίϯςΩετΛߟྀ ͠ɺ৬ਓతʹهड़͢Δ͜ͱʹ…
42. ▸Ωϟογϡഁغઓུ͸WAFͷࢧԉ͕ඞཁ ▸ྫ: next.js ͷ preload ૠೖ, guess.js ▸ΞʔΩςΫνϟ͕੔ཧ͞Εͯͳ͍ͱ࣮ݱ ෆՄ ౤ػతΩϟογϡߏஙͷݱ࣮(2)
43. ෭࡞༻Λ෼཭ͨ͠៉ྷͳίʔυΛॻ͘ => Ωϟογϡഁغ͕༧ଌͰ͖Δ ਎΋֖΋ͳ͘ݴ͏ͱ…
44. 16MS ະຬͷੈք
45. 16MSະຬ ▸్੾Εͣ࿈ଓͯ͠Δͱײ͡Δߋ৽ස౓ ▸ͭ·ΓΫϥΠΞϯτࢹ఺ͩͱΠϯϝϞ Ϧ or όοΫάϥ΢ϯυॲཧ
46. ৭ʑͳϚΠΫϩνϡʔχϯά… ▸ॳظԽ ▸ωοτϫʔΫ࠷దԽ(ࠓ·Ͱͷ࿩) ▸εΫϦϓςΟϯάͷ࡟ݮ(js bundle size) ▸ϑϨʔϜ࠷దԽ ▸ϨΠΞ΢τ཈੍(BoundingBox࠶ܭࢉ) ▸ߴස౓ॲཧͷ཈੍(εΫϩʔϧ౳) ▸ॳظԽ஗ԆɾΦϑεϨουୀආ
47. εΫϦϓςΟϯά཈੍ ▸୯७ʹ࢖͏ϥΠϒϥϦͷྔΛݮΒ͢ ▸ճઢ଎౓ΑΓɺශऑͳCPU(ϞόΠϧ)Ͱ ޮՌେ ▸ΦϑεϨουୀආ(ޙड़)
48. εΫϦϓςΟϯά཈੍ɿखஈ ▸ES2015 Dynamic Import ▸Webpack: Code Spritting ▸Webpack: Dead Code Elimination
49. PREPACK ▸facebook/prepack ▸੩తղੳͯ͠ఆ਺৞ΈࠐΈ ▸(ݱঢ়ɺίʔυ͕େ෯ʹ૿͑Δ…)
51. ϨΠΞ΢τ཈੍ ▸ཁૉ෯Λมߋ͢Δͱ਌ํ޲Λ࠶ܭࢉ ▸ʮΨλοʯ΍ʮϐΫοʯͱ͍͏ѱମݧ
52. ϨΠΞ΢τ཈੍: εέϧτϯεΫϦʔϯ ▸ ྖҬΛ઎ΊΔϞοΫͰॳظԽ/͢Γସ͑ ▸ ϨΠΞ΢τ࠶ܭࢉͷ཈੍ https://uxplanet.org/how-to-use-animation-to- improve-ux-338819e93bdb
53. AMP ʹֶͿϨΠΞ΢τ཈੍ ▸CSS͸શͯΠϯϥΠϯԽ ▸ΩϟογϡώοτͱͷτϨʔυΦϑ ▸ը૾(amp-img)͸ width/height ඞਢ or ໌ࣔతͳ layout="responsive" ࢦఆ
54. ॳظԽ஗Ԇ/ΦϑεϨουॲཧ ▸WebWorker ͰόοΫάϥ΢ϯυॲཧ ▸εΫϦϓςΟϯά΋݁Ռతʹ཈੍
55. DEMO: MARKDOWN PREVIEW ▸off thread markdown compile (22ms~) ▸off thread prettier (1.2MB)
56. ϚΠΫϩνϡʔχϯάͷݱ࣮ ▸࣮ࡍʹ͸͜ΕΒͷෳ߹Ͱ໰୊͕ൃੜ ▸ߴස౓Πϕϯτ + ϨΠΞ΢τ࠶ܭࢉ ▸ϑϨʔϜϫʔΫಛ༗ͷࣄ৘
57. ௿஗Ԇ؀ڥͷҝͷ ઃܭύλʔϯ
58. ઃܭύλʔϯ ▸ָ؍తUI ▸ΫϥΠΞϯτϑΝʔετ ▸off-the-main-thread
59. ָ؍తUI
60. ָ؍తUI ▸ৗʹϦΫΤετΛ੒ޭͨ͜͠ͱʹ͢Δ ▸ࣦഊ࣌ʹϩʔϧόοΫ
61. STEP 1 SERVER STEP 2 STEP 3 CONFIRM ok write write write CLIENT LOGIC Rollback on Error ָ؍తUI: ྫ: Ϣʔβʔొ࿥
62. ָ؍తUI: ͍ͭ࢖͑Δ͔ ▸ਖ਼ৗܥʹωοτϫʔΫ্ͷ෼ذ͕ͳ͍ ৔߹ ▸ϩάΠϯϑϩʔ / Like Button / هࣄ΍ ίϝϯτͷ౤ߘͳͲ
63. ΫϥΠΞϯτϑΝʔετઃܭ
64. ΫϥΠΞϯτϑΝʔετઃܭ ▸جຊతʹΫϥΠΞϯτͰͷσʔλॲཧ Λ༏ઌ͢Δ ▸αʔόʔ͸୯ʹ sync ͞ΕΔ͚ͩ ▸ผ్ू໿ܥAPIΛ༻ҙ
65. Client STATE STATE' STATE' STATE' Storage background sync SCRIPT VIEW API Aggregate Refer ΫϥΠΞϯτϑΝʔετઃܭ ▸ ΫϥΠΞϯτͷεςʔτ͕ओ ▸ αʔόʔεςʔτ͕ैଐ ▸ Sync / API ͕ू໿͢Δࡍʹ σʔλͷ੔߹ੑͷݕূ
66. ΫϥΠΞϯτϑΝʔετઃܭ: ͍ͭ࢖͑Δ͔ ▸ѻ͏σʔλ͕ࣗݾ׬݁͠ɺίϛϡχέʔ γϣϯ͕গͳ͍΋ͷ(ήʔϜɾπʔϧ) ▸firebase(firestore) ͱ૬ੑ͕͍͍
67. ΫϥΠΞϯτϑΝʔετઃܭ: ໰୊ ▸νʔτ଱ੑ͕௿͍ ▸Web ͸ΫϥΠΞϯτվ᜵ʹऑ͍ ▸ਅ໘໨ʹಥ͖٧ΊΔͱP2PͰͷ૬ޓ؂ࢹ (ϒϩοΫνΣʔϯٕज़)ͳͲ͕ඞཁʹ…
68. OFF THE MAIN THREAD
69. OFF THE MAIN THREAD ▸࠷ۙͷ(Chromeํ໘ͷ)τϨϯυ ▸UI Thread Ҏ֎ʹॲཧΛΦϑϩʔυ ▸WebWorker Λੵۃతʹ࢖͍ͬͯ͘
70. https://mizchi.hatenablog.com/entry/2018/10/18/155448
71. https://mizchi.hatenablog.com/entry/2018/10/18/155448
72. OFF THE MAIN THREAD: Կ͕ղܾͰ͖Δ͔ ▸Scripting: UI Thread ͕ബ͘ͳΔͷͰɺ JS ͷॳظԽ࣌ؒΛݮΒͤΔ ▸Universal: ࣗવͱViewͱσʔλΛ෼཭ ͢Δ͜ͱʹ
73. ύϑΥʔϚϯε ϝτϦΫε
74. SPEED INDEX ▸First Paint ▸First Meaningful Paint ▸First Contentful Paint ▸Time to Interact
75. LIGHTHOUSE ▸https://github.com/GoogleChrome/ lighthouse ▸֤छϝτϦΫεͷϨϙʔτΛ࡞੒ ▸(PWAܥΛաେධՁͳؾ΋…)
77. CHROME DEVTOOLS ▸ͱʹ͔͘৮ͬͯ׳ΕΔ! ▸
78. ࠷ޙʹ: ͳͥߴ଎Խ͢Δ͔
79. ͳͥߴ଎Խ͢Δ͔ ▸៉ྷͳΞʔΩςΫνϟͰͳ͍ͱߴ଎ԽͰ ͖ͳ͍ ≒ ߴ଎ԽʮͰ͖Δʯ͜ͱ͕݈શ ͳΞʔΩςΫνϟͷҰͭͷূࠨ ▸ߴ଎Խͦͷ΋ͷ͸݁Ռʹա͗ͳ͍
80. ίʔυͷ៉ྷ͞ͱ଎౓ ▸Α͘ޡղ͞ΕΔ͕ɺίʔυͷ៉ྷ͞ͱ଎ ౓͸ରཱߏ଄Ͱ͸ͳ͍ ▸ΞʔΩςΫνϟͷੜΉɺચ࿅͞Εͨʮ༨ ༟ʯ͕ͦ͜ΩϟογϡઓུͷΑ͏ͳνϡʔ χϯάͷ༨஍ʹͳΔ
81. ࢀߟ ▸ΩϟογϡϑϨϯυϦʔͳεςʔτϨεΞϓϦέʔ γϣϯઃܭʹ͍ͭͯߟ͑Δ https:// mizchi.hatenablog.com/entry/2018/04/15/ 011520 ▸off-the-main-thread ͷ࣌୅ https:// mizchi.hatenablog.com/entry/ 2018/10/02/093750
82. ͓ΘΓ