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

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ు͚ͨΒ୭Ͱ΋Ͱ͖Δ