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

HTML5 Conference 11/25

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 Lambda@Edge
    ▸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