Hotwire Stack Best Practices

Turbo Overview

Turbo makes web applications faster by reducing the need for full-page reloads.

• Turbo Drive: Automatically makes links and forms work without a page reload.
• Turbo Frames: Update specific parts of the page dynamically.
• Turbo Streams: Real-time updates over WebSockets.

  <%= render @comments %>

Stimulus Overview

Stimulus is a modest JavaScript framework for adding interactivity to HTML.

• Add controllers with data attributes in your HTML.
• Easily manage events and actions.

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

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!");
  }
}

Turbo Streams

Use Turbo Streams for real-time updates without refreshing the page.

• Broadcast updates from the server using Turbo Streams.
• Update specific parts of the page dynamically.

<%= turbo_stream_from "comments" %>
<%= turbo_stream.replace "comment_list" do %>
  <%= render @comments %>
<% end %>

Best Practices

• Keep Turbo Frames small and focused on specific tasks.
• Use Stimulus to handle complex JavaScript interactions.
• Leverage Turbo Streams for real-time updates.
• Test your components to ensure reliability and performance.