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
100
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
900
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
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
Rubyと自由とAIと
yotii23
6
1.8k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
860
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
GoとPHPのインターフェイスの違い
shimabox
2
210
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
150
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
Jakarta EE meets AI
ivargrimstad
0
410
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Site-Speed That Sticks
csswizardry
4
410
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Six Lessons from altMBA
skipperchong
27
3.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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で笑おう!
ご清聴ありがとうございましたー