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

data_between_rails_and_javascript.pdf

Keiko Kaneko
September 12, 2019
1.3k

 data_between_rails_and_javascript.pdf

Keiko Kaneko

September 12, 2019
Tweet

Transcript

  1. Rails ͱ JSͷσʔλڮ౉͠
    ʹ͍ͭͯߟ͑ͯΈͨ
    2019/09/12 ۜ࠲Rails#13
    ۚࢠܚࢠ @neko314

    View Slide

  2. ɾ@neko314 / @neko314_
    ɾ࣌ʑNerima.rb΍ͬͯ·͢
    ɾAsakura.rb
    ͔ΒࢀΓ·ͨ͠
    ࣗݾ঺հ

    View Slide

  3. ΞΫτΠϯσΟͰಇ͍ͯ·͢

    View Slide

  4. چλΠτϧ
    ʮJS Lv.1͚ͩͲRailsΞϓϦ্Ͱͷ
    Vue.jsͷΑ͍ॻ͖ํΛௐ΂ͯΈͨʯ
    λΠτϧ࠮ٗʢະ਱ʣͰͨ͠!

    View Slide

  5. ❌RailsͱVue.jsͷ࿩
    ⭕RailsͱJavaScriptͷ࿩
    ్தͰม͑ͨ
    มΘͬͯ͠·͍·ͨ͠

    View Slide

  6. Rails ˱ JavaScript

    σʔλͷड͚౉͠ʹ͍ͭͯ
    ࿩͢͜ͱ

    View Slide

  7. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ

    ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ
    ํ๏࿦
    ΰʔϧ

    View Slide

  8. ۀ຿ͰVue.jsΛ࢖͍ҰཡΛ࡞ͬͨ
    ʮ͜͏΍Ε͹Ͱ͖ΔʯͰ࣮૷ͨ͠
    ͜ͷ··Ͱ͍Δͷ͸͍΍ͩͬͨ
    ͳͥ͜ͷ࿩Λʁ

    View Slide

  9. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔ
    ࣮૷ํ๏

    View Slide

  10. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔ
    ࣮૷ํ๏
    ۀ຿Ͱॻ͍ͨ
    ͷ͸ͪ͜Β

    View Slide

  11. API࢖͏ͷͬͯΉ͕ͩଟ͍ͷͰ͸ʁ
    ௨৴༨ܭʹൃੜ͢Δ͠
    HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ
    ΋໘౗ͳײ͡ͳΜ͔஗ͦ͏
    ๊͍ͨٙ໰

    View Slide

  12. DOMͷํͰ΍ͬͨ΄͏͕
    Α͔ͬͨΓ͢ΔͷͰ͸ɾɾɾʁ
    ๊͍ͨٙ໰

    View Slide

  13. Ͱ͸ɺܭଌͯ͠ΈΑ͏

    View Slide

  14. ɾRails → JS
    - ࢀর
    ɾJS →Rails
    - ࡞੒ɾߋ৽ɾ࡟আ
    ݕূ಺༰

    View Slide

  15. ɾRails → JS
    - ࢀর
    ɾJS →Rails
    - ࡞੒ɾߋ৽ɾ࡟আ
    ݕূ಺༰
    ٙ໰ʹج͖ͮ
    ࠓճ͸ͪ͜Β

    View Slide

  16. ɾύϑΥʔϚϯε
    ɾσʔλͷ੔߹ੑ
    ɾ࣮૷΍ϝϯς͠΍͢͞
    ݕূج४

    View Slide

  17. ɾύϑΥʔϚϯε
    ɾσʔλͷ੔߹ੑ
    ɾ࣮૷΍ϝϯς͠΍͢͞
    ݕূج४
    ಉ͘͡ࠓճ͸
    ͪ͜Β

    View Slide

  18. αϯϓϧΞϓϦΛ࡞ͬͯ
    ҧ͍Λൺֱ
    ݕূํ๏

    View Slide

  19. ࡞ͬͨ΋ͷ
    ɾϢʔβʔ1,000݅
    ɾJSଆͰϖʔδ
    ωʔγϣϯ

    View Slide

  20. ؀ڥ
    ɾRuby 2.6.4
    ɾRails 6.0.0
    ɾWebpacker 4.0.7
    ɾVue.js 2.6.10
    ɾGoogle Chrome
    ※Production؀ڥͰىಈͨ͠localhost
    Ͱॾʑܭଌ͠·ͨ͠

    View Slide

  21. Networkͷ஋Λൺֱ
    ॳճʴ 9ճϦϩʔυͷ10ճ෼
    ܭଌ

    View Slide

  22. AuditsύωϧͰ
    First Meaningful Paint΋ൺֱ
    ܭଌ

    View Slide

  23. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔ
    ࣮૷ํ๏

    View Slide

  24. APIͷ࣮૷
    Controller
    HTML
    JS

    View Slide

  25. ᶃAPIΛ༻ҙ͢Δ
    ᶄDOMʹσʔλΛ΋ͨͤΔˠgon
    ࣮૷ํ๏

    View Slide

  26. gonʹ͍ͭͯ

    View Slide

  27. View Slide

  28. DOMʹ஋Λ΋ͨͤΔ࣮૷
    Controller
    HTML
    JS

    View Slide

  29. ݁Ռൃද

    View Slide

  30. Request
    ϦΫΤετճ਺
    ʢճʣ
    ʢճ໨ʣ
    DOM API

    View Slide

  31. Resources
    Ϧιʔεͷ༰ྔ
    ʢKBʣ DOM API

    View Slide

  32. Transferred
    సૹྔ
    ʢKBʣ
    ʢճ໨ʣ
    DOM API

    View Slide

  33. Finish
    ϖʔδ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒ
    ʢKBʣ
    ʢճ໨ʣ
    DOM API

    View Slide

  34. DOMContentLoaded
    HTMLͷಡΈࠐ·ΕΔ·Ͱͷ࣌ؒ
    ʢmsʣ
    ʢճ໨ʣ
    DOM API

    View Slide

  35. Load
    ϖʔδͷಡΈࠐΈ͕ऴΘΔ·Ͱͷ࣌ؒ
    ʢmsʣ
    ʢճ໨ʣ
    DOM API

    View Slide

  36. First Meaningful Paint
    ҙຯ͋Δ಺༰͕දࣔ͞ΕΔ࣌ؒ
    DOM API
    ʢmsʣ

    View Slide

  37. ·ͱΊʢ̍ʗ̎ʣ
    DOM API
    Request ⭕
    Resources ⭕
    Transferred ⭕

    View Slide

  38. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish ⭕
    DOMContent
    Loaded

    Load ⭕
    First Meaningful
    Paint

    View Slide

  39. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish
    DOMContent
    Loaded

    Load ⭕
    First Meaningful
    Paint
    දࣔ࢝͠Ί͸API͕ૣ͍

    View Slide

  40. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish
    DOMContent
    Loaded
    Load
    First Meaningful
    Paint

    Auditsͷ൑ఆ΋API͕ૣ͍

    View Slide

  41. ·ͱΊʢ̎ʗ̎ʣ
    DOM API
    Finish ⭕
    DOMContent
    Loaded
    Load
    First Meaningful
    Paint
    දࣔऴΘΓ͸DOM͕ૣ͍

    View Slide

  42. APIͷԿ͕஗͍͔
    API෦෼ͷऴྃ଴ͪͷ͕࣌ؒ͋Δ
    HTML: 15ms
    JSON: 352ms

    View Slide

  43. Ͱ͸DOM͸
    users(index.html)ʹ
    ͕͔͔͍࣌ؒͬͯΔ

    View Slide

  44. HTMLͷେ͖͞ͱॲཧ࣌ؒ
    DOM API
    αΠζ 335KB 818B
    ࣌ؒ 230ms 15ms
    DOMʹ஋Λ΋ͨͤΔͱHTMLͷαΠ
    ζ͕େ͖͘ͳΓॲཧʹ͕͔͔࣌ؒΔ

    View Slide

  45. ɾHTMLͷදࣔ͸ૣ͍
    ɾHTMLͷදࣔͱσʔλͷड͚౉
    ͠දࣔʹ͕࣌ؒࠩ͋Δ
    APIͰ࣮૷͢Δͱ

    View Slide

  46. ɾHTMLͷදࣔ࢝͠Ί͸஗͍
    ɾશମ͕දࣔ͠ऴΘΔͷ͸ૣ͍
    ɾܭଌπʔϧͷධՁ͕͍͍ͷ͸͜
    ͪΒ
    DOMͷ৔߹

    View Slide

  47. API࢖͏ͷͬͯΉ͕ͩଟ͍ͷͰ͸ʁ
    ௨৴༨ܭʹൃੜ͢Δ͠
    HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ
    ΋໘౗ͳײ͡ͳΜ͔஗ͦ͏
    ๊͍ͨٙ໰

    View Slide

  48. ๊͍ͨٙ໰΁ͷ౴͑
    Α͘Θ͔Βͳ͍ʂ

    View Slide

  49. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ

    ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ
    ΰʔϧୡ੒ͨ͠ʁ

    View Slide

  50. ΰʔϧୡ੒ͨ͠ʁ
    ҧ͍Λ஌Δ͜ͱ͕Ͱ͖ͨ
    ·ͩ෼͔Βͳ͍
    ΋ͬͱ஌Γ͍ͨ

    View Slide

  51. ɾ͜ͷޡࠩ͸ϢʔβʔͷମײʹӨ
    ڹ͕͋Δ͔ɺ͋ΔͳΒͲͷఔ౓ʁ
    ΋ͬͱ͔֬Ί͍ͨٙ໰

    View Slide

  52. ɾ݅਺͕มΘΔͱͲ͏ͳΔ͔ʁ
    ɾ΋ͬͱ៛ີʹܭଌ͢Δͱʁ
    ΋ͬͱ͔֬Ί͍ͨٙ໰

    View Slide

  53. ɾܭଌָ͔ͬͨ͠
    ɾϑϩϯτʗαʔόʔͷશମΛΈ
    ͯ࠷దղͳ࣮૷Λ౎౓ߟ͑ΒΑ͏
    ʹͳΓ͍ͨ
    ײ૝

    View Slide

  54. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺

    View Slide