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