Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
data_between_rails_and_javascript.pdf
Search
Keiko Kaneko
PRO
September 12, 2019
1
1.7k
data_between_rails_and_javascript.pdf
Keiko Kaneko
PRO
September 12, 2019
Tweet
Share
More Decks by Keiko Kaneko
See All by Keiko Kaneko
let's write rubima event report
neko314
PRO
0
55
matsue-ruby-kaigi-11
neko314
PRO
1
120
20 years old Rubima
neko314
PRO
0
27
観る将、指す将、TyP 〜時を越えた将棋指しの魅力〜
neko314
PRO
0
18
Introduce-my-gem-factory_strategist
neko314
PRO
1
5.6k
20201212_rails_girls_gathering_japan
neko314
PRO
0
1.2k
about-nerimarb
neko314
PRO
0
260
Why I chose to be a programmer
neko314
PRO
0
180
RailsGirlsTokyo9th--neko
neko314
PRO
0
56
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How to Ace a Technical Interview
jacobian
276
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Site-Speed That Sticks
csswizardry
2
190
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Gamification - CAS2011
davidbonilla
80
5.1k
Transcript
Rails ͱ JSͷσʔλڮ͠ ʹ͍ͭͯߟ͑ͯΈͨ 2019/09/12 ۜ࠲Rails#13 ۚࢠܚࢠ @neko314
ɾ@neko314 / @neko314_ ɾ࣌ʑNerima.rbͬͯ·͢ ɾAsakura.rb ͔ΒࢀΓ·ͨ͠ ࣗݾհ
ΞΫτΠϯσΟͰಇ͍ͯ·͢
چλΠτϧ ʮJS Lv.1͚ͩͲRailsΞϓϦ্Ͱͷ Vue.jsͷΑ͍ॻ͖ํΛௐͯΈͨʯ λΠτϧٗʢະʣͰͨ͠!
❌RailsͱVue.jsͷ ⭕RailsͱJavaScriptͷ ్தͰม͑ͨ มΘͬͯ͠·͍·ͨ͠
Rails ˱ JavaScript σʔλͷड͚͠ʹ͍ͭͯ ͢͜ͱ
ʮͳͥ͜͏࣮͢Δͷ͔ʯ ͱ͍͏அཧ༝Λ໌֬ʹ͢Δ͜ͱ ํ๏ ΰʔϧ
ۀͰVue.jsΛ͍ҰཡΛ࡞ͬͨ ʮ͜͏ΕͰ͖ΔʯͰ࣮ͨ͠ ͜ͷ··Ͱ͍Δͷ͍ͩͬͨ ͳͥ͜ͷΛʁ
ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛͨͤΔ ࣮ํ๏
ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛͨͤΔ ࣮ํ๏ ۀͰॻ͍ͨ ͷͪ͜Β
API͏ͷͬͯΉ͕ͩଟ͍ͷͰʁ ௨৴༨ܭʹൃੜ͢Δ͠ HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ ໘ͳײ͡ͳΜ͔ͦ͏ ๊͍ͨٙ
DOMͷํͰͬͨ΄͏͕ Α͔ͬͨΓ͢ΔͷͰɾɾɾʁ ๊͍ͨٙ
Ͱɺܭଌͯ͠ΈΑ͏
ɾRails → JS - ࢀর ɾJS →Rails - ࡞ɾߋ৽ɾআ ݕূ༰
ɾRails → JS - ࢀর ɾJS →Rails - ࡞ɾߋ৽ɾআ ݕূ༰
ٙʹج͖ͮ ࠓճͪ͜Β
ɾύϑΥʔϚϯε ɾσʔλͷ߹ੑ ɾ࣮ϝϯς͢͠͞ ݕূج४
ɾύϑΥʔϚϯε ɾσʔλͷ߹ੑ ɾ࣮ϝϯς͢͠͞ ݕূج४ ಉ͘͡ࠓճ ͪ͜Β
αϯϓϧΞϓϦΛ࡞ͬͯ ҧ͍Λൺֱ ݕূํ๏
࡞ͬͨͷ ɾϢʔβʔ1,000݅ ɾJSଆͰϖʔδ ωʔγϣϯ
ڥ ɾRuby 2.6.4 ɾRails 6.0.0 ɾWebpacker 4.0.7 ɾVue.js 2.6.10 ɾGoogle
Chrome ※ProductionڥͰىಈͨ͠localhost Ͱॾʑܭଌ͠·ͨ͠
NetworkͷΛൺֱ ॳճʴ 9ճϦϩʔυͷ10ճ ܭଌ
AuditsύωϧͰ First Meaningful Paintൺֱ ܭଌ
ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛͨͤΔ ࣮ํ๏
APIͷ࣮ Controller HTML JS
ᶃAPIΛ༻ҙ͢Δ ᶄDOMʹσʔλΛͨͤΔˠgon ࣮ํ๏
gonʹ͍ͭͯ
None
DOMʹΛͨͤΔ࣮ Controller HTML JS
݁Ռൃද
Request ϦΫΤετճ ʢճʣ ʢճʣ DOM API
Resources Ϧιʔεͷ༰ྔ ʢKBʣ DOM API
Transferred సૹྔ ʢKBʣ ʢճʣ DOM API
Finish ϖʔδ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒ ʢKBʣ ʢճʣ DOM API
DOMContentLoaded HTMLͷಡΈࠐ·ΕΔ·Ͱͷ࣌ؒ ʢmsʣ ʢճʣ DOM API
Load ϖʔδͷಡΈࠐΈ͕ऴΘΔ·Ͱͷ࣌ؒ ʢmsʣ ʢճʣ DOM API
First Meaningful Paint ҙຯ͋Δ༰͕දࣔ͞ΕΔ࣌ؒ DOM API ʢmsʣ
·ͱΊʢ̍ʗ̎ʣ DOM API Request ⭕ Resources ⭕ Transferred ⭕
·ͱΊʢ̎ʗ̎ʣ DOM API Finish ⭕ DOMContent Loaded ⭕ Load ⭕
First Meaningful Paint ⭕
·ͱΊʢ̎ʗ̎ʣ DOM API Finish DOMContent Loaded ⭕ Load ⭕ First
Meaningful Paint දࣔ࢝͠ΊAPI͕ૣ͍
·ͱΊʢ̎ʗ̎ʣ DOM API Finish DOMContent Loaded Load First Meaningful Paint
⭕ AuditsͷఆAPI͕ૣ͍
·ͱΊʢ̎ʗ̎ʣ DOM API Finish ⭕ DOMContent Loaded Load First Meaningful
Paint දࣔऴΘΓDOM͕ૣ͍
APIͷԿ͕͍͔ API෦ͷऴྃͪͷ͕࣌ؒ͋Δ HTML: 15ms JSON: 352ms
ͰDOM users(index.html)ʹ ͕͔͔͍࣌ؒͬͯΔ
HTMLͷେ͖͞ͱॲཧ࣌ؒ DOM API αΠζ 335KB 818B ࣌ؒ 230ms 15ms DOMʹΛͨͤΔͱHTMLͷαΠ
ζ͕େ͖͘ͳΓॲཧʹ͕͔͔࣌ؒΔ
ɾHTMLͷදࣔૣ͍ ɾHTMLͷදࣔͱσʔλͷड͚ ͠දࣔʹ͕࣌ؒࠩ͋Δ APIͰ࣮͢Δͱ
ɾHTMLͷදࣔ࢝͠Ί͍ ɾશମ͕දࣔ͠ऴΘΔͷૣ͍ ɾܭଌπʔϧͷධՁ͕͍͍ͷ͜ ͪΒ DOMͷ߹
API͏ͷͬͯΉ͕ͩଟ͍ͷͰʁ ௨৴༨ܭʹൃੜ͢Δ͠ HTMLͱJSONͱJSͬͯ༻ҙ͢Δͷ ໘ͳײ͡ͳΜ͔ͦ͏ ๊͍ͨٙ
๊͍ͨٙͷ͑ Α͘Θ͔Βͳ͍ʂ
ʮͳͥ͜͏࣮͢Δͷ͔ʯ ͱ͍͏அཧ༝Λ໌֬ʹ͢Δ͜ͱ ΰʔϧୡͨ͠ʁ
ΰʔϧୡͨ͠ʁ ҧ͍ΛΔ͜ͱ͕Ͱ͖ͨ ·͔ͩΒͳ͍ ͬͱΓ͍ͨ
ɾ͜ͷޡࠩϢʔβʔͷମײʹӨ ڹ͕͋Δ͔ɺ͋ΔͳΒͲͷఔʁ ͬͱ͔֬Ί͍ͨٙ
ɾ͕݅มΘΔͱͲ͏ͳΔ͔ʁ ɾͬͱ៛ີʹܭଌ͢Δͱʁ ͬͱ͔֬Ί͍ͨٙ
ɾܭଌָ͔ͬͨ͠ ɾϑϩϯτʗαʔόʔͷશମΛΈ ͯ࠷దղͳ࣮Λߟ͑ΒΑ͏ ʹͳΓ͍ͨ ײ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠☺