Reactive and realtime Rails frontend that is written in HTML/Ruby while minimizing JS.
Resources
- Hotwire.dev
- Hotwire in the Real World
- Hotrails.dev - Turbo Rails Tutorial
- Hotwire Newsletter
- Thoughtbot - Hotwire Example Templates
- GoRails - Hotwire with Rails
- Hotwire Demystified
- Hotwire Newsletter
Frames allow you to swap in and out partials without doing a full page reload.
Resources:
- Inline Editing with Turbo Frames in Rails
Broadcast realtime updates from the server and send HTML for turbo frames.
Resources:
- Realtime Charts with Stimulus Target Callbacks
Custom JS to layer on top of Turbo.
Resources:
- Stimulus Trigger Pattern
Mix and Go - Ruby on Rails 7 Drag & Drop With Hotwire
Ability to reload the DOM from the Rails server. This was created before Hotwire and is likely not as useful anymore.
Resources
- https://docs.stimulusreflex.com/
Use the concept of Progressive Enhancement. The majority of pages be server side rendered using Rails (Hotwire / Turbo), however, for components that require high interactivity and responsiveness, swap those specific components out with VueJS.
The real time features of Hotwire paired with interactivity of vanilla JS / JQuery greatly reduces the need for a reactive framework like React / VueJS. It's not perfect, however, Hotwire allows you to lean a lot more on Rails/HAML and rely less on React / VueJS.
VueJS can be used at discretion for:
- Complex features that will require multiple connected components to provide interactivity in a single page application.
- Medium or larger client-side interactivity
- Enhancing a HAML view's behavior instead of using vanilla JavaScript / jQuery (reactive or asynchronous behavior).
With the introduction of Hotwire, you can achieve a moderate level of interactivity using what Rails offers out of the box. To achieve a high level of interactivity, you still need to use VueJS/ReactJS, however, the places where you need to use it in an application is greatly decreased.
| Technology | Use |
|---|---|
| HAML, Bootstrap, JQuery | Static client-server interaction |
| Hotwire | Real time client-server interaction |
| VueJS / ReactJS | Heavy interaction between client-side components |
https://itnext.io/ruby-on-rails-7-importmaps-and-vuejs-3-no-more-webpacker-4ef06372a49c
Write CSS classes inline with HTML instead of in a separate CSS file.
Conclusion
Why I don't like Tailwind provides a good summary of all the cons of Tailwind.
When using Tailwind with Rails without a component-based architecture, it makes CSS classes difficult to read and there's a lack of JS out of the box in comparison to Bootstrap. The problem is poor readability is compounded by a lack of re-usability. If CSS currently isn't a problem, then Tailwind isn't a solution. If poor UI is a problem, find a better UI template.
A better alternative is to use Tailwind with a component based frontend framework like VueJS.
Resources
- How to install Tailwind CSS using Webpacker with Rails
- [Adam Wathan Youtube Playlist](https://www.youtube.com/c/AdamWathan
Rails 7 has three options for JS and CSS bundling. ImportMaps, ESBuild, Webpack.
Comparison: https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755
Deep dives
- ImportMaps: https://www.driftingruby.com/episodes/importmaps-in-rails-7
- ESBuild: https://www.driftingruby.com/episodes/esbuild-for-rails