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
790
How to Enjoy the Murajun’s Style
murajun1978
0
62
Zeitwerk integration in Rails 6.0
murajun1978
0
110
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
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
はじめてのMaterial3 Expressive
ym223
2
280
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
3.9k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
320
testingを眺める
matumoto
1
140
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
850
OSS開発者という働き方
andpad
5
1.7k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.8k
Designing for Performance
lara
610
69k
Typedesign – Prime Four
hannesfritz
42
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Invisible Side of Design
smashingmag
301
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Bash Introduction
62gerente
615
210k
For a Future-Friendly Web
brad_frost
180
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
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で笑おう!
ご清聴ありがとうございましたー