data_between_rails_and_javascript.pdf

by Keiko Kaneko

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ΞΫτΠϯσΟͰಇ͍ͯ·͢

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Ͱ͸ɺܭଌͯ͠ΈΑ͏

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

APIͷ࣮૷ Controller HTML JS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

gonʹ͍ͭͯ

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

DOMʹ஋Λ΋ͨͤΔ࣮૷ Controller HTML JS

Slide 29

Slide 29 text

݁Ռൃද

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

·ͱΊʢ̍ʗ̎ʣ DOM API Request ⭕ Resources ⭕ Transferred ⭕

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺