Share
Embed
Slide 1
Slide 1 text
MojoliciousͰॻ͍ͯཧղ͢Δ
hotwireͷΈ
Japan.pm 2021 LT
@mackee_w a.k.a @macopy
Slide 2
Slide 2 text
ࢲͰ͢ @mackee_w
eεϙʔπͷࣄΛ͍ͯ͠·͢
Slide 3
Slide 3 text
hotwire.dev
Slide 4
Slide 4 text
DEMO
Slide 5
Slide 5 text
͜ΕMojolicious + hotwireͰ
࡞Γ·ͨ͠
Slide 6
Slide 6 text
ॻ͍ͨJS͜Ε͚ͩ
Slide 7
Slide 7 text
͋ͱશ෦MojoliciousͰΓ·ͨ͠💪
Slide 8
Slide 8 text
hotwireͱԿͳͷ͔
• JavaScriptʹཔΒͣʹɺैདྷͷHTMLΛฦ͢αʔόͷԆઢ্ͰSPAΛ
࣮ݱ͢ΔͨΊͷϥΠϒϥϦू
• turbo: ී௨ͷMPAͷԆઢ্ͰSPAͷΑ͏ͳڍಈΛ࣮ݱ͢ΔϥΠϒϥ
Ϧ
• stimulus: turbo͚ͩͰͰ͖ͳ͍(ྫ͑Ξχϝʔγϣϯͱ͔)খ͞ͳ
JavaScriptΛॻͨ͘ΊͷϥΠϒϥϦ
Slide 9
Slide 9 text
ࠓturbo͚ͩΓ·͢
Slide 10
Slide 10 text
turbo3ܑఋ
• turbo drive: ௨ৗͷϦϯΫʹΑΔϖʔδભҠΛશͳϖʔδϩʔσΟ
ϯάΛߦΘͣʹϖʔδΛॻ͖͑Δ turbolinksͷࠓͷ࢟
• turbo frames: ಛఆͷλά͚ͩΛԆͰॻ͖͑Δ
• turbo streams: αʔόαΠυ͔ΒඈΜͰ͖ͨHTMLΛϖʔδʹૠೖ
ͨ͠Γஔ͖͑Δ
Slide 11
Slide 11 text
ࠓturbo framesͱ
turbo streams͚͍ͩ·͢
Slide 12
Slide 12 text
turbo-frameΛͬͨPartialॻ͖͑
fetch(‘POST /toggles’)
ॻ͖͑ͨ෦తͳHTMLΛฦ͢
ΒͬͨHTMLͰϖʔδΛҰ෦ॻ͖͑Δ
Slide 13
Slide 13 text
ςϯϓϨʔτ
Slide 14
Slide 14 text
ग़͚͠
turbo͕༗ޮͳڥAcceptϔομʹ
text/vnd.turbo-stream.html Λ͚ͬͭͯͬͯ͘͘Δ
Slide 15
Slide 15 text
turbo-frameଞʹ
• HTMLͱผʹ༰ΛԆϩʔυ͢Δ
• ͜Ε͕ϝΠϯͷ͍ํͬΆ͍
• ແݶεΫϩʔϧ
• etc…
Slide 16
Slide 16 text
turbo-stream
Slide 17
Slide 17 text
ςϯϓϨʔτී௨
Slide 18
Slide 18 text
turbo-streamΛͬͨserver push
fetch(‘POST /messages’)
WebSocketͰ෦తͳHTMLΛ
JSONʹ٧Ίͯฦ͢
ΒͬͨHTMLΛϖʔδʹ
Ճ͢Δ
new WebSocket(‘ws://…/')
Slide 19
Slide 19 text
͜͏͍͏HTMLΛJSONʹ٧ΊͯૹΓ͚͍ͭͯΔ
action=‘append’ ͳͷͰՃ͞Εͨ1ݸ͚ͩૹ͍ͬͯΔ
Slide 20
Slide 20 text
͜ΕΛෳͷΫϥΠΞϯτʹpush͍ͯ͠Δ
Slide 21
Slide 21 text
MojoͰWS͠ΌΔ
Slide 22
Slide 22 text
ผʹWebSocket͡Όͳͯ͘ྑͦ͞͏
• server pushෆཁͰ͋ΕϨεϙϯεͰฦͤOK
• ͦͦWebSocketΛ͠ΌΔͷɺPerlͩͱͭΒ͍ΑͶ
• C10KతͳίωΫγϣϯஅͱ͔
• ϨϯαόͰͲ͏͢Δͷͱ͔ CGIͰ͜͏͍͏ͷΓ͍ͨͰ͢ΑͶ
• EventStream͕࣮͍ͯ͠Δϝιου͕ੜ͑ͯΔͭͳΒԿͰ৯͑Δ
ͷͰϙʔϦϯάͰΤϛϡϨʔγϣϯͨͭ͠࡞Εྑͦ͞͏
Slide 23
Slide 23 text
·ͱΊ
• JavaScriptॻ͔ͳͯ݁͘ߏ͍ΖΜͳࣄ͕Ͱ͖Δͧʂʂʂʂ
• ΜΓ
• hotwire/turboRuby on Railsઐ༻͔ͱࢥͬͨΒͦ͏Ͱͳ͔ͬͨ
• ͔͠͠turbo-rails gemͱ͔͋ͬͯศརͦ͏
• LaravelͰϥΠϒϥϦ͋ΔΒ͍ͧͬͯ͠Λฉ͍ͨ
• ͰHTMLు͚ͨΒ୭ͰͰ͖Δ