$30 off During Our Annual Pro Sale. View Details »

Building Tebukuro with Hotwire and Rails

murajun1978
September 10, 2023

Building Tebukuro with Hotwire and Rails

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

murajun1978

September 10, 2023
Tweet

More Decks by murajun1978

Other Decks in Programming

Transcript

  1. Building Tebukuro
    with Hotwire and Rails

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. View Slide

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

    View Slide

  10. https://github.com/shinosakarb/tebukuro

    View Slide

  11. Thanks for contributing!

    View Slide

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

    View Slide

  13. もう一回やりたいな

    View Slide

  14. Hotwireだっ!

    View Slide

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

    View Slide

  16. よくあるSPA

    View Slide

  17. Rails + Hotwire

    View Slide

  18. サーバサイドだといいこと?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Rubyで笑おう!

    View Slide

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

    View Slide