$30 off During Our Annual Pro Sale. View Details »

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

mackee
February 19, 2021

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

Japan.pm 2021 LT

mackee

February 19, 2021
Tweet

More Decks by mackee

Other Decks in Programming

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