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
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
15
5.3k
ワンバイナリWebサービスのススメ
mackee
10
8.1k
tanukistack ライブコーディング / tanukistack live-coding
mackee
0
120
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
950
perl for shell, awk and sed programmers
mackee
3
2.5k
今更GoのWebフレームワークを作ろうとしているワケ / Why am I trying to create a Go web framework now?
mackee
1
920
database/sqlでNullを扱う歴史とsql.Null[T]の登場 / sql.Null[T] history
mackee
0
800
マイクロサービス化を利用した Goへの移行事例
mackee
0
940
PerlでつくるフルスクラッチWebAuthn/パスキー認証 / Demonstration of full-scratch WebAuthn/Passkey Authentication written in Perl
mackee
3
5.4k
Other Decks in Programming
See All in Programming
CSC305 Lecture 09
javiergs
PRO
0
280
Six and a half ridiculous things to do with Quarkus
hollycummins
0
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.5k
チームの境界をブチ抜いていけ
tokai235
0
200
CSC509 Lecture 07
javiergs
PRO
0
240
Le côté obscur des IA génératives
pascallemerrer
0
150
Cursorハンズオン実践!
eltociear
2
1.2k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
iOSでSVG画像を扱う
kishikawakatsumi
0
140
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
Scaling GitHub
holman
463
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Invisible Side of Design
smashingmag
302
51k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Practical Orchestrator
shlominoach
190
11k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Why Our Code Smells
bkeepers
PRO
340
57k
KATA
mclloyd
PRO
32
15k
Mobile First: as difficult as doing things right
swwweet
225
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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ు͚ͨΒ୭ͰͰ͖Δ