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
1.2k
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
110
Efficient development with GraphQL
murajun1978
0
290
Effective Debugging Apps in VS Code
murajun1978
1
880
tebukuro
murajun1978
0
110
Shinosaka.rb #17 Hands on
murajun1978
0
45
New Features in Rails 4.2
murajun1978
0
910
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
130
FactoryGirl LT
murajun1978
1
67
Shinosaka.rb #3
murajun1978
0
51
Other Decks in Programming
See All in Programming
GoとPHPのインターフェイスの違い
shimabox
2
210
楽しく向き合う例外対応
okutsu
0
710
Rubyと自由とAIと
yotii23
6
1.8k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
190
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
34
9.9k
CloudNativePGを布教したい
nnaka2992
0
120
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
290
Formの複雑さに立ち向かう
bmthd
1
940
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
500
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Unsuck your backbone
ammeep
669
57k
GitHub's CSS Performance
jonrohan
1030
460k
Statistics for Hackers
jakevdp
797
220k
GraphQLとの向き合い方2022年版
quramy
44
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Code Review Best Practice
trishagee
67
18k
Music & Morning Musume
bryan
46
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Writing Fast Ruby
sferik
628
61k
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で笑おう!
ご清聴ありがとうございましたー