Building Tebukuro with Hotwire and Rails

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

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