Mojoliciousで書いて理解するhotwireの仕組み

Japan.pm 2021 LT

Transcript

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