Rails Frontend


Reactive and realtime Rails frontend that is written in HTML/Ruby while minimizing JS.

- Hotwire in the Real World
- - Turbo Rails Tutorial
- Hotwire Newsletter
- Thoughtbot - Hotwire Example Templates
- GoRails - Hotwire with Rails
- Hotwire Demystified
- Hotwire Newsletter

Turbo Frames

Frames allow you to swap in and out partials without doing a full page reload.

- Inline Editing with Turbo Frames in Rails

Turbo Streams

Broadcast realtime updates from the server and send HTML for turbo frames.

- Realtime Charts with Stimulus Target Callbacks


Custom JS to layer on top of Turbo.

- Stimulus Trigger Pattern

Use Cases

Drag and Drop

Mix and Go - Ruby on Rails 7 Drag & Drop With Hotwire


Stimulus Reflex and CableReady

Ability to reload the DOM from the Rails server. This was created before Hotwire and is likely not as useful anymore.


Mixing Rails (Hotwire / Turbo) with VueJS

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

Import Maps and VueJS


Write CSS classes inline with HTML instead of in a separate CSS file.

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.

- How to install Tailwind CSS using Webpacker with Rails
- [Adam Wathan Youtube Playlist](

React Rails

Asset Bundling

Rails 7 has three options for JS and CSS bundling. ImportMaps, ESBuild, Webpack.


Deep dives
- ImportMaps:
- ESBuild: