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で笑おう』

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

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

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で笑おう！

ご清聴ありがとうございましたー

Building Tebukuro with Hotwire and Rails

Building Tebukuro with Hotwire and Rails

murajun1978

More Decks by murajun1978

Other Decks in Programming

Featured

Transcript