Building Tebukuro with Hotwire and Rails

by murajun1978

Slide 1

Slide 1 text

Slide 2

Slide 2 text

僕の名はむらじゅん @murajun1978 Job: Web Developer @ナレッジラボ Community: Shinosaka.rb, Rails Follow-up Osaka

Slide 3

Slide 3 text

アジェンダ ● Tebukuroってなんぞや？ ● Hotwireってなんだ？ ● TebukuroでHotwireを使った事例 ● Pros and Cons ● まとめ

Slide 4

Slide 4 text

Tebukuroってなんぞや？ Shinosaka.rbのコミュニティでプロダクトを運用したいなコードをOSSで公開することで、 Rails開発を楽しみつつOSSの敷居をさげれないか？イベントのチケット管理するプロダクト主催者が作成したイベントサイトに参加登録フォームを追加できるようになる

Slide 5

Slide 5 text

コミュニティのイベントを運用していてモヤモヤすることがあった

Slide 6

Slide 6 text

大阪Ruby会議03 『Rubyで笑おう』

Slide 7

Slide 7 text

イベントサイトはイベントのテーマを表現している

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

ところで、参加登録のページは...？

Slide 10

Slide 10 text

https://github.com/shinosakarb/tebukuro

Slide 11

Slide 11 text

Thanks for contributing！

Slide 12

Slide 12 text

そして、月日が経ちまして

Slide 13

Slide 13 text

もう一回やりたいな

Slide 14

Slide 14 text

Hotwireだっ！

Slide 15

Slide 15 text

Hotwireってなんだ？ ● HTML over the wire ● Turbo Drive, Turbo Frames, Turbo Streams, Turbo Native, Stimulus, Strada？ ● モダンなフロントエンド技術をサーバーサイドで実現 ● RailsがいなくてもOK

Slide 16

Slide 16 text

よくあるSPA

Slide 17

Slide 17 text

Rails + Hotwire

Slide 18

Slide 18 text

サーバサイドだといいこと？

Slide 19

Slide 19 text

サーバサイド(Rails)でレンダリングするうまみ ● Viewのtemplateが使える ● Viewで利用しているGemたちが使えるよ ● Railsのいいところを残しつつ、フロントをモダンに！ ● Serverのハイスペックなリソースを使える

Slide 20

Slide 20 text

TebukuroでHotwireの使いどころ ● ダッシュボード ○ Turbo Drive, Turbo Frames ● サイト内の登録フォーム ○ Turbo Frames

Slide 21

Slide 21 text

Turbo Drive ● Turbolinksの強化版 ● ブラウザをリロードすることなくSPAっぽくページを更新できる history.replaceっぽい

Slide 22

Slide 22 text

Turbo Frames ● サイトの特定箇所をリクエストに応じて、既存のコンテンツを更新 ● URLを指定して、参照先のコンテンツを表示 ● Lazy Loadも可能

Slide 23

Slide 23 text

Turbo Framesのid属性 ● リクエストヘッダーの“Turbo-Frame”にTurbo Framesで指定されたidが付与される ● turbo-railsにはturbo_frame_request_idってhelperメソッドがある

Slide 24

Slide 24 text

Railsとは別サイトでviewをレンダリング

Slide 25

Slide 25 text

Pros and Cons ● Pros ○ 外部サイトにRailsのビューをかんたんに差し込める ○ サイトとユーザにやさしい ■ Turboのファイルサイズが小さい ■ Lazy Loadもできる ● Cons ○ Tebukuroくらいシンプルだと全く問題ないが、リッチなUIが必要なサービスとは相性がわるいかも

Slide 26

Slide 26 text

まとめ ● Rails以外のサイトでも利用できるHotwireはめちゃ使い勝手いいかも ● RailsのtemplateやViewで使ってるgemを利用できるのは最高ではないか ● リッチなUIが必要なサイトには不向きかもしれない ● Reactと共存することはできるけど、なるべく避けたほうがいいかもね