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

Transcript

1. 1.

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

2. 2.

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

   SPA / PWA
3. 3.

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

4. 4.

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

5. 5.

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

   ▸σʔλϕʔεͷΫΤϦίετͳͲ
6. 6.

   େલఏ

7. 7.

   ͜ͷӉ஦Ͱ͸

8. 8.

   ޫ͕஗͗͢Δʂ

9. 9.

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

10. 10.

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

    https://ja.wikipedia.org/wiki/ϑϦοΧʔ
11. 11.

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

12. 12.

    16MS Ҏ্ͷੈք

13. 13.

    ஗ԆΛ෼ྨ͢Δ ▸~16ms: ϦΞϧλΠϜ ▸50~100ms: ϑΟʔυόοΫΛҙࣝ ▸300~ms: ΍΍஗͍ͱײ͡Δ ▸1000~ms: ஗͍ɺෆຬ RAILϞσϧͰύϑΥʔϚϯεΛܭଌ͢Δ

    - https://developers.google.com/web/fundamentals/performance/ rail?hl=ja
14. 14.

    None
15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

    CACHE AWARE ͳઃܭ

19. 19.

    CLIENT SERVER CLIENT - SERVER

20. 20.

    CLIENT SERVER EDGE CLIENT - EDGE - SERVER

21. 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. 22.

    CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI invalidate

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

    CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ:

    ॳճ ▸ /items/123 ͕΄͍͠! ▸ αʔόʔͰ /items/123 ͷ HTML Λ render ▸ Edge Cache ʹอଘ ▸ HTML Λ ฦ٫ cache set
24. 24.

    CLIENT EDGE EDGE CACHE SERVICE WORKER CACHE ▸ ྫ: ೋճ໨Ҏ߱

    ▸ /items/123 ͕΄͍͠! ▸ Edge Cache ͔Β HTML Λฦ٫ ▸ (Service Worker ʹ ΩϟογϡΛ͍࣋ͬͯ Ε͹ɺͦΕΛ༏ઌ) 1~ms 20~ms
25. 25.

    CLIENT SERVER EDGE EDGE CACHE SERVICE WORKER CACHE CI ▸

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

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

27. 27.

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

    ʹߏங
28. 28.

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

    ITEM:123 COMMENT:345 COMMENT:347 USER:7 USER:7 Cache: /items/123
29. 29.

    ઃܭͷצॴ (3) ▸Ωϟογϡ͢Δͷ͸ HTMLҎ֎Ͱ΋͍͍ ▸Flux Store ͷJSON Λ อଘͳͲ ITEM:123

    COMMENT:345 COMMENT:347 USER:7 JSON RECORD:1 HTML Server Client RECORD:2
30. 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. 31.

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

    ͳͲ ▸Surrogate Keys ͕࢓༷Խ͞Εͯ΄͍͠
32. 32.

    ෳࡶ͞΁޲͚ͯ: ಈతͳ EDGE ▸AWS Lambda@Edge ▸CloudFlare Workers ▸Fastly Cloud Platform

    Edge ͰJS΍WASMͰෳࡶͳܭࢉ͕Ͱ͖Δ = HTML Λ૊ΈཱͯΒΕΔ = SSRʹศར
33. 33.

    খن໛։ൃऀʹҙຯ͕͋Δ͔ ▸୯७ʹ CDN = Redis, Server = MySQLͱ ஔ͖׵͑ͯߟ͑ͯ΋͍͍ ▸ΞϓϦέʔγϣϯ͕

    Cache Aware ͔Ͳ ͏͔͸ɺن໛ʹؔ܎ͳ͍
34. 34.

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

35. 35.

    PRELOADING

36. 36.

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

    IMG JS CSS
37. 37.

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

38. 38.

    ྫ: NEXT.JS ʹΑΔ PRELOAD ࠷దԽ ▸Ϗϧυ࣌ʹؔ࿈ΞηοτΛऩूͯ͠ <link rel="preload"...> Λ head

    ʹૠೖ ▸<Link to="..." prefetch> Ͱ࣍ϖʔδΞη οτΛ <link rel="preload" ...> ʹૠೖ
39. 39.

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

40. 40.

    None
41. 41.

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

42. 42.

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

43. 43.

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

44. 44.

    16MS ະຬͷੈք

45. 45.

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

46. 46.

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

47. 47.

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

48. 48.

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

    Elimination
49. 49.

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

50. 50.

    None
51. 51.

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

52. 52.

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

53. 53.

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

    ࢦఆ
54. 54.

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

55. 55.

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

    prettier (1.2MB)
56. 56.

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

57. 57.

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

58. 58.

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

59. 59.

    ָ؍తUI

60. 60.

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

61. 61.

    STEP 1 SERVER STEP 2 STEP 3 CONFIRM ok write

    write write CLIENT LOGIC Rollback on Error ָ؍తUI: ྫ: Ϣʔβʔొ࿥
62. 62.

    ָ؍తUI: ͍ͭ࢖͑Δ͔ ▸ਖ਼ৗܥʹωοτϫʔΫ্ͷ෼ذ͕ͳ͍ ৔߹ ▸ϩάΠϯϑϩʔ / Like Button / هࣄ΍

    ίϝϯτͷ౤ߘͳͲ
63. 63.

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

64. 64.

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

65. 65.

    Client STATE STATE' STATE' STATE' Storage background sync SCRIPT VIEW

    API Aggregate Refer ΫϥΠΞϯτϑΝʔετઃܭ ▸ ΫϥΠΞϯτͷεςʔτ͕ओ ▸ αʔόʔεςʔτ͕ैଐ ▸ Sync / API ͕ू໿͢Δࡍʹ σʔλͷ੔߹ੑͷݕূ
66. 66.

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

67. 67.

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

68. 68.

    OFF THE MAIN THREAD

69. 69.

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

70. 70.

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

71. 71.

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

72. 72.

    OFF THE MAIN THREAD: Կ͕ղܾͰ͖Δ͔ ▸Scripting: UI Thread ͕ബ͘ͳΔͷͰɺ JS

    ͷॳظԽ࣌ؒΛݮΒͤΔ ▸Universal: ࣗવͱViewͱσʔλΛ෼཭ ͢Δ͜ͱʹ
73. 73.

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

74. 74.

    SPEED INDEX ▸First Paint ▸First Meaningful Paint ▸First Contentful Paint

    ▸Time to Interact
75. 75.

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

76. 76.

    None
77. 77.

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

78. 78.

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

79. 79.

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

80. 80.

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

81. 81.

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

    2018/10/02/093750
82. 82.

    ͓ΘΓ