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.1k
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
280
Effective Debugging Apps in VS Code
murajun1978
1
860
tebukuro
murajun1978
0
110
Shinosaka.rb #17 Hands on
murajun1978
0
43
New Features in Rails 4.2
murajun1978
0
890
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
110
FactoryGirl LT
murajun1978
1
66
Shinosaka.rb #3
murajun1978
0
51
Other Decks in Programming
See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Jakarta EE meets AI
ivargrimstad
0
150
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
100
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
Better Code Design in PHP
afilina
PRO
0
120
as(型アサーション)を書く前にできること
marokanatani
10
2.6k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
860
イベント駆動で成長して委員会
happymana
1
320
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Designing Experiences People Love
moore
138
23k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing for Performance
lara
604
68k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
4 Signs Your Business is Dying
shpigford
180
21k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Building Adaptive Systems
keathley
38
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
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で笑おう!
ご清聴ありがとうございましたー