Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Mojoliciousで書いて理解するhotwireの仕組み
mackee
February 19, 2021
Programming
0
4.1k
Mojoliciousで書いて理解するhotwireの仕組み
Japan.pm 2021 LT
mackee
February 19, 2021
Tweet
Share
More Decks by mackee
See All by mackee
じわじわとPerlからGoに移行しようとしている俺達のマイクロサービシーズの紹介 / The migrating to microservices in Go from Monolith in Perl
mackee
2
1k
GraphQLサーバを作る苦しみと解決手法
mackee
16
8.5k
ChatBotの重いタスクをCircleCIに持っていってみた / How to move heavy tasks on ChatBot to CircleCI
mackee
1
3.8k
ゲームのマスタデータ特有の3つの困難と、カヤックでの解決方法 / How to solve three problems when handling the master-data of mobile games
mackee
3
10k
設計した自作キーボードの基板を中国で小ロット量産するときの 苦労、涙、理由 / How to "build" the PCB of keyboard
mackee
2
6.3k
電子基板を快適に作るためのキーボードの電子基板を作る技術 / Build my keyboard for my keyboard
mackee
0
4.5k
ゲームのサーバサイドエンジニアをやっていく技術 / The technology of game server side engineer
mackee
1
4.4k
package名と変数名がかぶっているのをとにかく検出したい / I need detect to conflicts of identifier for Go
mackee
3
6.1k
自作キーボードの基板を設計して中国に発注する / Development and Manufacturing PCB of Keyboard
mackee
1
640
Other Decks in Programming
See All in Programming
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.4k
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
Where and how to run UI tests (Droidcon Lisbon & Android Makers, Paris)
nonews
0
110
Loom is Blooming
josepaumard
3
510
Where and how to run UI tests (Droidcon London, 2021)
nonews
0
200
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
clockmaker
2
1.2k
roadmap to rust 2024
matsu7874
1
560
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
27
17k
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
280
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
140
Micro Frontend Routing – Solutions for mature applications - iJS 04/2022
michaelzikes
0
150
読みやすいコードを書こう
yutorin
0
360
Featured
See All Featured
Building Your Own Lightsaber
phodgson
94
4.6k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
The Language of Interfaces
destraynor
148
20k
A Tale of Four Properties
chriscoyier
149
20k
4 Signs Your Business is Dying
shpigford
169
20k
Side Projects
sachag
449
37k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.4k
Why Our Code Smells
bkeepers
PRO
324
54k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Building an army of robots
kneath
299
40k
Web Components: a chance to create the future
zenorocha
303
40k
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ు͚ͨΒ୭ͰͰ͖Δ