Turbocharge Your Rails App with Hotwire

⚡ Turbocharge Your Rails App with Hotwire: A Modern Web Dev Marvel 🚀

Are you tired of juggling complex JavaScript frameworks alongside your Ruby on Rails app? Say hello to Hotwire, the modern approach to building fast, reactive web applications with minimal JavaScript! 🌟

Hotwire (HTML Over The Wire) is a collection of techniques that deliver dynamic updates by sending HTML over the wire instead of JSON. It keeps your Rails app snappy without writing much custom JavaScript. Let’s dive into how Hotwire works and how you can integrate it into Rails 7+ (and even older versions!).

🔥 Why Hotwire? The Superpowers

✅ Less JavaScript – Write mostly Ruby & HTML.
✅ Faster page updates – No full reloads needed.
✅ Seamless Rails integration – Works beautifully with Turbolinks, Stimulus, and Turbo.
✅ Progressive Enhancement – Gracefully degrades if JavaScript is disabled.

🛠 Integrating Hotwire with Rails

Rails 7+ (Hotwire Default)

Hotwire is the default in Rails 7+! Just create a new app:

rails new my_app -j esbuild       # or -j importmap

Hotwire includes:

• Turbo Drive (speeds up navigation)
• Turbo Frames (updates parts of a page)
• Turbo Streams (real-time DOM updates)
• Stimulus (lightweight JS for interactions)

Rails 6 (Manual Setup)

Add Hotwire manually to Gemfile:

gem 'hotwire-rails'

Then run:

bundle install
rails hotwire:install

Now you’re ready to Turbocharge! ⚡

🚀 Hotwire in Action: A Real-Time Todo List

Let’s build a real-time Todo app without writing custom JavaScript!

Step 1: Generate Model & Controller

rails g scaffold Todo title:string completed:boolean
rails db:migrate

Step 2: Update Views for Turbo Frames

Modify app/views/todos/index.html.erb:

<h1>My Todos</h1>

<%= turbo_frame_tag "new_todo" do %>
  <%= link_to "New Todo", new_todo_path %>
<% end %>

<%= turbo_frame_tag "todos" do %>
  <%= render @todos %>
<% end %>

Step 3: Use Turbo Streams for Real-Time Updates

In app/controllers/todos_controller.rb, update create:

def create
  @todo = Todo.new(todo_params)

  respond_to do |format|
    if @todo.save
      format.turbo_stream  # Automatically renders `create.turbo_stream.erb`
      format.html { redirect_to todos_path }
    else
      format.html { render :new }
    end
  end
end

Create app/views/todos/create.turbo_stream.erb:

<%= turbo_stream.append "todos" do %>
  <%= render @todo %>
<% end %>

<%= turbo_stream.replace "new_todo" do %>
  <%= link_to "New Todo", new_todo_path %>
<% end %>

Now, when you add a new Todo, it instantly appears without a page reload! 🎉

🌟 Cool Hotwire Features You’ll Love

1. Turbo Frames – Isolated Updates

Update only part of a page:

<%= turbo_frame_tag "user_profile" do %>
  <%= link_to "Edit", edit_profile_path %>
<% end %>

Clicking “Edit” will only refresh the frame, not the whole page!

2. Turbo Streams – Real-Time Magic

Broadcast updates via WebSockets (Action Cable):

# In your model
after_create_commit -> { broadcast_append_to "todos" }

Now, new Todos appear live for all users!

3. Stimulus – Sprinkle of JavaScript

Need a bit of JS? Stimulus keeps it clean:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  greet() {
    alert("Hello, Hotwire! 👋")
  }
}

<div data-controller="hello">
  <button data-action="click->hello#greet">Say Hi!</button>
</div>

🎯 Why Hotwire is a Game-Changer

• Simpler than React/Vue – No heavy frontend setup.
• Faster UX – Feels like a SPA, but simpler.
• Rails-first – Works seamlessly with Rails conventions.

🏁 Final Thoughts

Hotwire brings the best of modern web interactivity without ditching Rails’ simplicity. Whether you’re on Rails 8 (future), 7, or even 6, Hotwire can supercharge your app with real-time updates, smoother navigation, and less JavaScript fatigue.

🚀 Give it a try and let Turbo power your next Rails project!

💬 What’s your favorite Hotwire feature? Drop a comment below! 👇

#RubyOnRails #Hotwire #WebDev #Turbo #Stimulus #RealTimeApps #Programming