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.4k
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
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
870
How to Enjoy the Murajun’s Style
murajun1978
0
68
Zeitwerk integration in Rails 6.0
murajun1978
0
120
Efficient development with GraphQL
murajun1978
0
310
Effective Debugging Apps in VS Code
murajun1978
1
920
tebukuro
murajun1978
0
120
Shinosaka.rb #17 Hands on
murajun1978
0
55
New Features in Rails 4.2
murajun1978
0
930
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
150
Other Decks in Programming
See All in Programming
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
840
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
15k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
480
CSC509 Lecture 08
javiergs
PRO
0
250
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
Software Architecture
hschwentner
6
2.3k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.6k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
55
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Gamification - CAS2011
davidbonilla
81
5.5k
Rails Girls Zürich Keynote
gr2m
95
14k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
What's in a price? How to price your products and services
michaelherold
246
12k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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で笑おう!
ご清聴ありがとうございましたー