data_between_rails_and_javascript.pdf

696374755aea172f74c9235387a248ab?s=47 Keiko Kaneko
September 12, 2019
750

 data_between_rails_and_javascript.pdf

696374755aea172f74c9235387a248ab?s=128

Keiko Kaneko

September 12, 2019
Tweet

Transcript

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

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

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

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

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

  6. Rails ˱ JavaScript
 σʔλͷड͚౉͠ʹ͍ͭͯ ࿩͢͜ͱ

  7. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ
 ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ ํ๏࿦ ΰʔϧ

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

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

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

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

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

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

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

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

    ٙ໰ʹج͖ͮ ࠓճ͸ͪ͜Β
  16. ɾύϑΥʔϚϯε ɾσʔλͷ੔߹ੑ ɾ࣮૷΍ϝϯς͠΍͢͞ ݕূج४

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

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

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

  20. ؀ڥ ɾRuby 2.6.4 ɾRails 6.0.0 ɾWebpacker 4.0.7 ɾVue.js 2.6.10 ɾGoogle

    Chrome ※Production؀ڥͰىಈͨ͠localhost Ͱॾʑܭଌ͠·ͨ͠
  21. Networkͷ஋Λൺֱ ॳճʴ 9ճϦϩʔυͷ10ճ෼ ܭଌ

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

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

  24. APIͷ࣮૷ Controller HTML JS

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

  26. gonʹ͍ͭͯ

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

  29. ݁Ռൃද

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

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

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

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

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

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

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

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

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

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

    Meaningful Paint දࣔ࢝͠Ί͸API͕ૣ͍
  40. ·ͱΊʢ̎ʗ̎ʣ DOM API Finish DOMContent Loaded Load First Meaningful Paint

    ⭕ Auditsͷ൑ఆ΋API͕ૣ͍
  41. ·ͱΊʢ̎ʗ̎ʣ DOM API Finish ⭕ DOMContent Loaded Load First Meaningful

    Paint දࣔऴΘΓ͸DOM͕ૣ͍
  42. APIͷԿ͕஗͍͔ API෦෼ͷऴྃ଴ͪͷ͕࣌ؒ͋Δ HTML: 15ms JSON: 352ms

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

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

    ζ͕େ͖͘ͳΓॲཧʹ͕͔͔࣌ؒΔ
  45. ɾHTMLͷදࣔ͸ૣ͍ ɾHTMLͷදࣔͱσʔλͷड͚౉ ͠දࣔʹ͕࣌ؒࠩ͋Δ APIͰ࣮૷͢Δͱ

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

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

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

  49. ʮͳͥ͜͏࣮૷͢Δͷ͔ʯ
 ͱ͍͏൑அཧ༝Λ໌֬ʹ͢Δ͜ͱ ΰʔϧୡ੒ͨ͠ʁ

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

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

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

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

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