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

Japan.pm 2021 LT

Transcript

1. MojoliciousͰॻ͍ͯཧղ͢Δ
   hotwireͷ࢓૊Έ
   Japan.pm 2021 LT
   @mackee_w a.k.a @macopy
   

   View Slide

2. ࢲͰ͢ @mackee_w
   eεϙʔπͷ࢓ࣄΛ͍ͯ͠·͢
   

   View Slide

3. hotwire.dev
   

   View Slide

4. DEMO
   

   View Slide

5. ͜Ε͸Mojolicious + hotwireͰ
   ࡞Γ·ͨ͠
   

   View Slide

6. ॻ͍ͨJS͸͜Ε͚ͩ
   

   View Slide

7. ͋ͱ͸શ෦MojoliciousͰ΍Γ·ͨ͠💪
   

   View Slide

8. hotwireͱ͸Կͳͷ͔
   • JavaScriptʹཔΒͣʹɺैདྷͷHTMLΛฦ͢αʔόͷԆ௕ઢ্ͰSPAΛ
   ࣮ݱ͢ΔͨΊͷϥΠϒϥϦू
   • turbo: ී௨ͷMPAͷԆ௕ઢ্ͰSPAͷΑ͏ͳڍಈΛ࣮ݱ͢ΔϥΠϒϥ
   Ϧ
   • stimulus: turbo͚ͩͰ͸Ͱ͖ͳ͍(ྫ͑͹Ξχϝʔγϣϯͱ͔)খ͞ͳ
   JavaScriptΛॻͨ͘ΊͷϥΠϒϥϦ
   

   View Slide

9. ࠓ೔͸turbo͚ͩ΍Γ·͢
   

   View Slide

10. turbo3ܑఋ
    • turbo drive: ௨ৗͷϦϯΫʹΑΔϖʔδભҠΛ׬શͳϖʔδϩʔσΟ
    ϯάΛߦΘͣʹϖʔδΛॻ͖׵͑Δ turbolinksͷࠓͷ࢟
    • turbo frames: ಛఆͷλά಺͚ͩΛ஗ԆͰॻ͖׵͑Δ
    • turbo streams: αʔόαΠυ͔ΒඈΜͰ͖ͨHTMLΛϖʔδ಺ʹૠೖ
    ͨ͠Γஔ͖׵͑Δ
    

    View Slide

11. ࠓ೔͸turbo framesͱ
    turbo streams͚ͩ࢖͍·͢
    

    View Slide

12. turbo-frameΛ࢖ͬͨPartialॻ͖׵͑
    fetch(‘POST /toggles’)
    ॻ͖׵͑ͨ෦෼తͳHTMLΛฦ͢
    ΋ΒͬͨHTMLͰϖʔδΛҰ෦ॻ͖׵͑Δ
    

    View Slide

13. ςϯϓϨʔτ
    

    View Slide

14. ग़͠෼͚
    turbo͕༗ޮͳ؀ڥ͸Acceptϔομʹ
    text/vnd.turbo-stream.html Λ͚ͬͭͯ͘΍ͬͯ͘Δ
    

    View Slide

15. turbo-frame͸ଞʹ΋
    • HTMLͱ͸ผʹ಺༰Λ஗Ԇϩʔυ͢Δ
    • ͜Ε͕ϝΠϯͷ࢖͍ํͬΆ͍
    • ແݶεΫϩʔϧ
    • etc…
    

    View Slide

16. turbo-stream
    

    View Slide

17. ςϯϓϨʔτ͸ී௨
    

    View Slide

18. turbo-streamΛ࢖ͬͨserver push
    fetch(‘POST /messages’)
    WebSocketͰ෦෼తͳHTMLΛ
    JSONʹ٧Ίͯฦ͢
    ΋ΒͬͨHTMLΛϖʔδʹ
    ௥Ճ͢Δ
    new WebSocket(‘ws://…/')
    

    View Slide

19. ͜͏͍͏HTMLΛJSONʹ٧ΊͯૹΓ͚͍ͭͯΔ
    action=‘append’ ͳͷͰ௥Ճ͞Εͨ1ݸ͚ͩૹ͍ͬͯΔ
    

    View Slide

20. ͜ΕΛෳ਺ͷΫϥΠΞϯτʹpush͍ͯ͠Δ
    

    View Slide

21. MojoͰWS͠Ό΂Δ
    

    View Slide

22. ผʹWebSocket͡Όͳͯ͘΋ྑͦ͞͏
    • server pushෆཁͰ͋Ε͹ϨεϙϯεͰฦͤ͹OK
    • ͦ΋ͦ΋WebSocketΛ͠Ό΂ΔͷɺPerlͩͱͭΒ͍ΑͶ
    • C10Kతͳ໰୊΍ίωΫγϣϯ੾அ໰୊ͱ͔
    • ϨϯαόͰͲ͏͢Δͷͱ͔ CGIͰ΋͜͏͍͏ͷ΋΍Γ͍ͨͰ͢ΑͶ
    • EventStream͕࣮૷͍ͯ͠Δϝιου͕ੜ͑ͯΔ΍ͭͳΒԿͰ΋৯͑Δ
    ͷͰϙʔϦϯάͰΤϛϡϨʔγϣϯͨ͠΍ͭ࡞Ε͹ྑͦ͞͏
    

    View Slide

23. ·ͱΊ
    • JavaScriptॻ͔ͳͯ͘΋݁ߏ͍ΖΜͳࣄ͕Ͱ͖Δͧʂʂʂʂ
    • ΂ΜΓ
    • hotwire/turbo͸Ruby on Railsઐ༻඼͔ͱࢥͬͨΒͦ͏Ͱ͸ͳ͔ͬͨ
    • ͔͠͠turbo-rails gemͱ͔͋ͬͯศརͦ͏
    • LaravelͰ΋ϥΠϒϥϦ͋ΔΒ͍ͧͬͯ͠࿩Λฉ͍ͨ
    • Ͱ΋HTMLు͚ͨΒ୭Ͱ΋Ͱ͖Δ
    

    View Slide