Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mojoliciousで書いて理解するhotwireの仕組み
Search
mackee
February 19, 2021
Programming
0
5k
Mojoliciousで書いて理解するhotwireの仕組み
Japan.pm 2021 LT
mackee
February 19, 2021
Tweet
Share
More Decks by mackee
See All by mackee
ワンバイナリWebサービスのススメ
mackee
10
7.8k
tanukistack ライブコーディング / tanukistack live-coding
mackee
0
110
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
670
perl for shell, awk and sed programmers
mackee
2
2.3k
今更GoのWebフレームワークを作ろうとしているワケ / Why am I trying to create a Go web framework now?
mackee
1
630
database/sqlでNullを扱う歴史とsql.Null[T]の登場 / sql.Null[T] history
mackee
0
530
マイクロサービス化を利用した Goへの移行事例
mackee
0
650
PerlでつくるフルスクラッチWebAuthn/パスキー認証 / Demonstration of full-scratch WebAuthn/Passkey Authentication written in Perl
mackee
3
4.6k
SRE定例やその辺の取り組みをアプリケーションエンジニア目線で語る / "Observe" about SRE Meeting by Application Engineer
mackee
0
1.9k
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
310
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
910
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Why Our Code Smells
bkeepers
PRO
336
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
A better future with KSS
kneath
238
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Transcript
MojoliciousͰॻ͍ͯཧղ͢Δ hotwireͷΈ Japan.pm 2021 LT @mackee_w a.k.a @macopy
ࢲͰ͢ @mackee_w eεϙʔπͷࣄΛ͍ͯ͠·͢
hotwire.dev
DEMO
͜ΕMojolicious + hotwireͰ ࡞Γ·ͨ͠
ॻ͍ͨJS͜Ε͚ͩ
͋ͱશ෦MojoliciousͰΓ·ͨ͠💪
hotwireͱԿͳͷ͔ • JavaScriptʹཔΒͣʹɺैདྷͷHTMLΛฦ͢αʔόͷԆઢ্ͰSPAΛ ࣮ݱ͢ΔͨΊͷϥΠϒϥϦू • turbo: ී௨ͷMPAͷԆઢ্ͰSPAͷΑ͏ͳڍಈΛ࣮ݱ͢ΔϥΠϒϥ Ϧ • stimulus:
turbo͚ͩͰͰ͖ͳ͍(ྫ͑Ξχϝʔγϣϯͱ͔)খ͞ͳ JavaScriptΛॻͨ͘ΊͷϥΠϒϥϦ
ࠓturbo͚ͩΓ·͢
turbo3ܑఋ • turbo drive: ௨ৗͷϦϯΫʹΑΔϖʔδભҠΛશͳϖʔδϩʔσΟ ϯάΛߦΘͣʹϖʔδΛॻ͖͑Δ turbolinksͷࠓͷ࢟ • turbo frames:
ಛఆͷλά͚ͩΛԆͰॻ͖͑Δ • turbo streams: αʔόαΠυ͔ΒඈΜͰ͖ͨHTMLΛϖʔδʹૠೖ ͨ͠Γஔ͖͑Δ
ࠓturbo framesͱ turbo streams͚͍ͩ·͢
turbo-frameΛͬͨPartialॻ͖͑ fetch(‘POST /toggles’) ॻ͖͑ͨ෦తͳHTMLΛฦ͢ ΒͬͨHTMLͰϖʔδΛҰ෦ॻ͖͑Δ
ςϯϓϨʔτ
ग़͚͠ turbo͕༗ޮͳڥAcceptϔομʹ text/vnd.turbo-stream.html Λ͚ͬͭͯͬͯ͘͘Δ
turbo-frameଞʹ • HTMLͱผʹ༰ΛԆϩʔυ͢Δ • ͜Ε͕ϝΠϯͷ͍ํͬΆ͍ • ແݶεΫϩʔϧ • etc…
turbo-stream
ςϯϓϨʔτී௨
turbo-streamΛͬͨserver push fetch(‘POST /messages’) WebSocketͰ෦తͳHTMLΛ JSONʹ٧Ίͯฦ͢ ΒͬͨHTMLΛϖʔδʹ Ճ͢Δ new WebSocket(‘ws://…/')
͜͏͍͏HTMLΛJSONʹ٧ΊͯૹΓ͚͍ͭͯΔ action=‘append’ ͳͷͰՃ͞Εͨ1ݸ͚ͩૹ͍ͬͯΔ
͜ΕΛෳͷΫϥΠΞϯτʹpush͍ͯ͠Δ
MojoͰWS͠ΌΔ
ผʹWebSocket͡Όͳͯ͘ྑͦ͞͏ • server pushෆཁͰ͋ΕϨεϙϯεͰฦͤOK • ͦͦWebSocketΛ͠ΌΔͷɺPerlͩͱͭΒ͍ΑͶ • C10KతͳίωΫγϣϯஅͱ͔ • ϨϯαόͰͲ͏͢Δͷͱ͔
CGIͰ͜͏͍͏ͷΓ͍ͨͰ͢ΑͶ • EventStream͕࣮͍ͯ͠Δϝιου͕ੜ͑ͯΔͭͳΒԿͰ৯͑Δ ͷͰϙʔϦϯάͰΤϛϡϨʔγϣϯͨͭ͠࡞Εྑͦ͞͏
·ͱΊ • JavaScriptॻ͔ͳͯ݁͘ߏ͍ΖΜͳࣄ͕Ͱ͖Δͧʂʂʂʂ • ΜΓ • hotwire/turboRuby on Railsઐ༻͔ͱࢥͬͨΒͦ͏Ͱͳ͔ͬͨ •
͔͠͠turbo-rails gemͱ͔͋ͬͯศརͦ͏ • LaravelͰϥΠϒϥϦ͋ΔΒ͍ͧͬͯ͠Λฉ͍ͨ • ͰHTMLు͚ͨΒ୭ͰͰ͖Δ