大阪Ruby会議03で発表したスライドです https://regional.rubykaigi.org/osaka03/
Building Tebukurowith Hotwire and Rails
View Slide
僕の名はむらじゅん @murajun1978Job: 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で笑おう!
ご清聴ありがとうございましたー