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
960
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
250
Effective Debugging Apps in VS Code
murajun1978
1
840
tebukuro
murajun1978
0
100
Shinosaka.rb #17 Hands on
murajun1978
0
43
New Features in Rails 4.2
murajun1978
0
880
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
110
FactoryGirl LT
murajun1978
1
66
Shinosaka.rb #3
murajun1978
0
48
Other Decks in Programming
See All in Programming
小さな開発会社を作った理由
polidog
0
1.9k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Rust.Nagoya #1
codemountains
0
170
CSC307 Lecture 05
javiergs
PRO
0
210
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1026
450k
Bash Introduction
62gerente
607
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Designing for humans not robots
tammielis
247
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
YesSQL, Process and Tooling at Scale
rocio
166
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
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で笑おう!
ご清聴ありがとうございましたー