Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

HTML5 Conference 11/25

Koutarou Chikuba

November 25, 2018
Tweet

More Decks by Koutarou Chikuba

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. େલఏ

    View Slide

  7. ͜ͷӉ஦Ͱ͸

    View Slide

  8. ޫ͕஗͗͢Δʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 16MS Ҏ্ͷੈք

    View Slide

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

    View Slide

  14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. CACHE AWARE ͳઃܭ

    View Slide

  19. CLIENT
    SERVER
    CLIENT - SERVER

    View Slide

  20. CLIENT
    SERVER
    EDGE
    CLIENT - EDGE - SERVER

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. ઃܭͷצॴ (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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. PRELOADING

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. 16MS ະຬͷੈք

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  59. ָ؍తUI

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. OFF THE MAIN THREAD

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  82. ͓ΘΓ

    View Slide