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
4.8k
Mojoliciousで書いて理解するhotwireの仕組み
Japan.pm 2021 LT
mackee
February 19, 2021
Tweet
Share
More Decks by mackee
See All by mackee
マイクロサービス化を利用した Goへの移行事例
mackee
0
66
PerlでつくるフルスクラッチWebAuthn/パスキー認証 / Demonstration of full-scratch WebAuthn/Passkey Authentication written in Perl
mackee
3
2.6k
SRE定例やその辺の取り組みをアプリケーションエンジニア目線で語る / "Observe" about SRE Meeting by Application Engineer
mackee
0
1.7k
TinyGoで使えるORM sqllaの 紹介とTinyGoで使えるようにするための工夫
mackee
0
730
Go向けORM sqllaの紹介と JOINやUNIONを含んだクエリの扱い方
mackee
0
1.2k
デプロイ今昔物語 〜CGIからサーバーレスまで〜 / The deployment technics
mackee
10
11k
E2Eテストから負荷試験シナリオを作ってみた / Why do we make a scenario of load testing from E2E testing scenarios
mackee
3
5k
じわじわとPerlからGoに移行しようとしている俺達のマイクロサービシーズの紹介 / The migrating to microservices in Go from Monolith in Perl
mackee
2
2.9k
GraphQLサーバを作る苦しみと解決手法
mackee
16
9.2k
Other Decks in Programming
See All in Programming
最近追加した型の紹介とその振り返り
aki19035vc
0
170
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
CSC307 Lecture 12
javiergs
PRO
0
220
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
KATA
mclloyd
20
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Code Reviewing Like a Champion
maltzj
517
39k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
We Have a Design System, Now What?
morganepeng
46
7k
A better future with KSS
kneath
231
17k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Six Lessons from altMBA
skipperchong
24
3.2k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
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ు͚ͨΒ୭ͰͰ͖Δ