Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

B5582ce2d9959dfcff0384a07003e188?s=47 mackee
February 19, 2021

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

Japan.pm 2021 LT

B5582ce2d9959dfcff0384a07003e188?s=128

mackee

February 19, 2021
Tweet

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