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
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
効率的な開発手段として VRTを活用する
ishkawa
0
140
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
XP, Testing and ninja testing
m_seki
3
250
Is Xcode slowly dying out in 2025?
uetyo
1
270
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
301
51k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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ు͚ͨΒ୭ͰͰ͖Δ