Topic #

Hotwire Datatables with Rails. Frontend tips & tricks

Short description #

Learn how to build maintainable reactive Rails frontends

Description #

5/6 of my latest clients needed to solve the “datatables problem”: having tables (or lists) of data that can be searched, sorted, filtered, paginated, bulk and individual actions.

Datatables example

I will show my approach to creating Hotwire datatables while solving common problems.

We will cover:

Common Hotwire mistakes & best practices:

  • unnessesary declarations
  • full page reload VS frames VS streams
  • Fat VS skinny stimulus controllers
  • Bulk update via turbo streams
  • etc.

Common frontend questions:

  • When to use ViewComponents vs Partials?
  • When to use Helpers?
  • When to abstract a TailwindCSS class?
  • Should I create my own component library?
  • etc.

Common paterns:

  • Helpers I wish rails had (active_link_to, etc.)
  • Stimulus controllers every app should have (remove_element, debounce, etc.)
  • etc.

Bonus (if time allows):

  • HTML tips that will make your Hotwire journey easier.
  • Useful tools in the ecosystem (stimulus-use, stimulus-components, turbo_boost-commands, custom turbo stream actions)

About Yaro #

Yaro met 💎 Ruby in 🇵🇱 Warsaw on a bootcamp back in 2015 and it was love at first sight. They have been happily married ever after 💍!

Yaro works as an independent consultant. In the last few projects he assumed the role of Lead Frontend RoR developer, overseeing all the frontend development, focusing on migrating from webpacker, rails-ujs, jquery, bootstrap to modern tools like esbuild, importmaps, Hotwire, TailwindCSS.

Apart of doing client work, Yaro loves sharing his knowledge with the community:

  • He released 200+ screencasts on the SupeRails youtube channel
  • Over 5.000 people have bought his RoR courses on Udemy
  • He has written 250 blogposts about RoR

Interesting facts:

  • Yaro speaks 7 languages very vell
  • Yaro is from Chernihiv, Ukraine
  • Yaro goes windsurfing 🏄‍♂️ 4-5 days a week

Links:

  • SupeRails: https://superails.com/
  • Blog: https://blog.corsego.com/
  • Youtube: https://www.youtube.com/@superails
  • Twitter: https://twitter.com/yarotheslav
  • Linkedin: http://linkedin.com/in/yshmarov/
  • Hotwire Cookbook talk at RailsWorld: https://superails.com/posts/rails-world-hotwire-cookbook-yaroslav-shmarov-common-uses-essential-patterns-best-practices
  • Most popular course: https://www.udemy.com/course/2519558/?referralCode=4721E9D437DEE1734159

Avatar:

yaro-avatar