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

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
14. None

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" ...> Λϔομʹૠೖ

40. None

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 ▸੩తղੳͯ͠ఆ਺৞ΈࠐΈ ▸(ݱঢ়ɺίʔυ͕େ෯ʹ૿͑Δ…)

50. None

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ܥΛաେධՁͳؾ΋…)

76. None

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. ͓ΘΓ