Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

hotwire.dev

Slide 4

Slide 4 text

DEMO

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ॻ͍ͨJS͸͜Ε͚ͩ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ࠓ೔͸turbo͚ͩ΍Γ·͢

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ςϯϓϨʔτ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

turbo-stream

Slide 17

Slide 17 text

ςϯϓϨʔτ͸ී௨

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

MojoͰWS͠Ό΂Δ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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