Building Tebukuro with Hotwire and Rails

大阪Ruby会議03で発表したスライドです
https://regional.rubykaigi.org/osaka03/

1. Building Tebukuro with Hotwire and Rails
2. 僕の名は むらじゅん @murajun1978 Job: Web Developer @ナレッジラボ Community: Shinosaka.rb, Rails Follow-up Osaka
3. アジェンダ • Tebukuroってなんぞや？ • Hotwireってなんだ？ • TebukuroでHotwireを使った事例 • Pros and Cons • まとめ
4. Tebukuroってなんぞや？ Shinosaka.rbのコミュニティでプロダクトを運用したいな コードをOSSで公開することで、 Rails開発を楽しみつつOSSの敷居をさげれないか？ イベントのチケット管理するプロダクト 主催者が作成したイベントサイトに参加登録フォームを追加できるようになる
5. コミュニティのイベントを運用していて モヤモヤすることがあった
6. 大阪Ruby会議03 『Rubyで笑おう』
7. イベントサイトは イベントのテーマを表現している
9. ところで、参加登録のページは...？
10. https://github.com/shinosakarb/tebukuro
11. Thanks for contributing！
12. そして、月日が経ちまして
13. もう一回やりたいな
14. Hotwireだっ！
15. Hotwireってなんだ？ • HTML over the wire • Turbo Drive, Turbo Frames, Turbo Streams, Turbo Native, Stimulus, Strada？ • モダンなフロントエンド技術をサーバーサイドで実現 • RailsがいなくてもOK
16. よくあるSPA
17. Rails + Hotwire
18. サーバサイドだといいこと？
19. サーバサイド(Rails)でレンダリングするうまみ • Viewのtemplateが使える • Viewで利用しているGemたちが使えるよ • Railsのいいところを残しつつ、フロントをモダンに！ • Serverのハイスペックなリソースを使える
20. TebukuroでHotwireの使いどころ • ダッシュボード ◦ Turbo Drive, Turbo Frames • サイト内の登録フォーム ◦ Turbo Frames
21. Turbo Drive • Turbolinksの強化版 • ブラウザをリロードすることなくSPAっぽくページを更新できる history.replaceっぽい
22. Turbo Frames • サイトの特定箇所をリクエストに応じて、既存のコンテンツを更新 • URLを指定して、参照先のコンテンツを表示 • Lazy Loadも可能
23. Turbo Framesのid属性 • リクエストヘッダーの“Turbo-Frame”にTurbo Framesで指定されたidが付与される • turbo-railsにはturbo_frame_request_idってhelperメソッドがある
24. Railsとは別サイトでviewをレンダリング
25. Pros and Cons • Pros ◦ 外部サイトにRailsのビューをかんたんに差し込める ◦ サイトとユーザにやさしい ▪ Turboのファイルサイズが小さい ▪ Lazy Loadもできる • Cons ◦ Tebukuroくらいシンプルだと全く問題ないが、リッチなUIが必要 なサービスとは相性がわるいかも
26. まとめ • Rails以外のサイトでも利用できるHotwireはめちゃ使い勝手いいかも • RailsのtemplateやViewで使ってるgemを利用できるのは最高ではないか • リッチなUIが必要なサイトには不向きかもしれない • Reactと共存することはできるけど、なるべく避けたほうがいいかもね
27. Rubyで笑おう！
28. ご清聴ありがとうございましたー