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
Building Tebukuro with Hotwire and Rails
Search
murajun1978
September 10, 2023
Programming
0
790
Building Tebukuro with Hotwire and Rails
大阪Ruby会議03で発表したスライドです
https://regional.rubykaigi.org/osaka03/
murajun1978
September 10, 2023
Tweet
Share
More Decks by murajun1978
See All by murajun1978
Zeitwerk integration in Rails 6.0
murajun1978
0
100
Efficient development with GraphQL
murajun1978
0
240
Effective Debugging Apps in VS Code
murajun1978
1
820
tebukuro
murajun1978
0
100
Shinosaka.rb #17 Hands on
murajun1978
0
43
New Features in Rails 4.2
murajun1978
0
870
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
110
FactoryGirl LT
murajun1978
1
58
Shinosaka.rb #3
murajun1978
0
43
Other Decks in Programming
See All in Programming
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
890
Git Lint
bkuhlmann
4
760
Goのエラースタックトレースの歴史と今後
sonatard
9
1.7k
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Ruby Function Composition
bkuhlmann
1
340
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
310
Next.js App Router
quramy
11
1.5k
Site Reliability Engineering for GMO
pyama86
8
1.1k
Netty Chicago Java User Group 2024-04-17
sullis
0
200
Featured
See All Featured
Practical Orchestrator
shlominoach
183
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Teambox: Starting and Learning
jrom
128
8.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
What the flash - Photography Introduction
edds
64
11k
Embracing the Ebb and Flow
colly
80
4.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
How STYLIGHT went responsive
nonsquared
92
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
RailsConf 2023
tenderlove
8
550
Transcript
Building Tebukuro with Hotwire and Rails
僕の名は むらじゅん @murajun1978 Job: Web Developer @ナレッジラボ Community: Shinosaka.rb, Rails
Follow-up Osaka
アジェンダ • Tebukuroってなんぞや? • Hotwireってなんだ? • TebukuroでHotwireを使った事例 • Pros and
Cons • まとめ
Tebukuroってなんぞや? Shinosaka.rbのコミュニティでプロダクトを運用したいな コードをOSSで公開することで、 Rails開発を楽しみつつOSSの敷居をさげれないか? イベントのチケット管理するプロダクト 主催者が作成したイベントサイトに参加登録フォームを追加できるようになる
コミュニティのイベントを運用していて モヤモヤすることがあった
大阪Ruby会議03 『Rubyで笑おう』
イベントサイトは イベントのテーマを表現している
None
ところで、参加登録のページは...?
https://github.com/shinosakarb/tebukuro
Thanks for contributing!
そして、月日が経ちまして
もう一回やりたいな
Hotwireだっ!
Hotwireってなんだ? • HTML over the wire • Turbo Drive, Turbo
Frames, Turbo Streams, Turbo Native, Stimulus, Strada? • モダンなフロントエンド技術をサーバーサイドで実現 • RailsがいなくてもOK
よくあるSPA
Rails + Hotwire
サーバサイドだといいこと?
サーバサイド(Rails)でレンダリングするうまみ • Viewのtemplateが使える • Viewで利用しているGemたちが使えるよ • Railsのいいところを残しつつ、フロントをモダンに! • Serverのハイスペックなリソースを使える
TebukuroでHotwireの使いどころ • ダッシュボード ◦ Turbo Drive, Turbo Frames • サイト内の登録フォーム
◦ Turbo Frames
Turbo Drive • Turbolinksの強化版 • ブラウザをリロードすることなくSPAっぽくページを更新できる history.replaceっぽい
Turbo Frames • サイトの特定箇所をリクエストに応じて、既存のコンテンツを更新 • URLを指定して、参照先のコンテンツを表示 • Lazy Loadも可能
Turbo Framesのid属性 • リクエストヘッダーの“Turbo-Frame”にTurbo Framesで指定されたidが付与される • turbo-railsにはturbo_frame_request_idってhelperメソッドがある
Railsとは別サイトでviewをレンダリング
Pros and Cons • Pros ◦ 外部サイトにRailsのビューをかんたんに差し込める ◦ サイトとユーザにやさしい ▪
Turboのファイルサイズが小さい ▪ Lazy Loadもできる • Cons ◦ Tebukuroくらいシンプルだと全く問題ないが、リッチなUIが必要 なサービスとは相性がわるいかも
まとめ • Rails以外のサイトでも利用できるHotwireはめちゃ使い勝手いいかも • RailsのtemplateやViewで使ってるgemを利用できるのは最高ではないか • リッチなUIが必要なサイトには不向きかもしれない • Reactと共存することはできるけど、なるべく避けたほうがいいかもね
Rubyで笑おう!
ご清聴ありがとうございましたー