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

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

HTML5 Conference 11/25

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

November 25, 2018
Tweet

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