erb

ruby
class Comment < ApplicationRecord
  belongs_to :account
  belongs_to :author, class_name: "User"

  validates :body, presence: true

Per-account stream scoping to prevent “cross-tenant” updates

rails hotwire turbo-streams
by codesnips 4 tabs
ruby
class ProductsController < ApplicationController
  PER_PAGE = 24

  def index
    @page = [params[:page].to_i, 1].max
    @sort = %w[name price recent].include?(params[:sort]) ? params[:sort] : "recent"

Use data-turbo-action to control history (advance vs replace)

rails hotwire turbo
by codesnips 3 tabs
ruby
class Board < ApplicationRecord
  has_many :cards, dependent: :destroy
  belongs_to :owner, class_name: "User"

  validates :name, presence: true
end

Morphing page refreshes with turbo_refreshes_with

rails hotwire turbo
by codesnips 3 tabs
erb
<%= turbo_frame_tag dom_id(contact) do %>
  <tr class="contact-row">
    <td><%= contact.name %></td>
    <td><%= contact.email %></td>
    <td><%= contact.role.titleize %></td>
    <td class="actions">

Turbo Frames: Inline edit that swaps form <-> row

rails turbo hotwire
by codesnips 3 tabs
ruby
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user

ActionCable channel that streams Turbo updates safely

rails hotwire turbo
by codesnips 4 tabs
ruby
Rails.application.routes.draw do
  concern :tabs do
    get :profile, on: :collection
    get :billing, on: :collection
    get :security, on: :collection
  end

Tabs UI using Turbo Frames (no client router)

rails hotwire turbo
by codesnips 4 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: "User"

  validates :body, presence: true, length: { maximum: 5_000 }

Declarative model broadcasts with broadcasts_to (Rails 7)

rails hotwire turbo
by codesnips 4 tabs
erb
<div class="layout" data-controller="viewport">
  <%= turbo_frame_tag "master", class: "master-pane" do %>
    <h1>Products</h1>
    <ul class="product-list">
      <% @products.each do |product| %>
        <li>

Turbo Frames: conditional frame navigation for mobile vs desktop

rails hotwire responsive
by codesnips 4 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["dialog", "message"]

  connect() {

Custom confirm dialog with Stimulus (better than window.confirm)

rails hotwire stimulus
by codesnips 3 tabs
erb
<h1>Create your account</h1>

<%= render "error_summary", record: @user %>

<%= form_with model: @user, url: signups_path do |f| %>
  <div class="field">

Update an error summary area via turbo_stream.update

rails hotwire turbo
by codesnips 3 tabs
erb
<div class="dashboard">
  <header class="dashboard__header">
    <h1>Overview</h1>
    <p class="muted">Real-time metrics update as they load.</p>
  </header>

Server-rendered skeleton UI for slow frames

rails hotwire turbo
by codesnips 4 tabs
ruby
class ArticlesController < ApplicationController
  before_action :set_article, only: %i[edit update]

  def new
    @article = Article.new
  end

Turbo-friendly 422 responses for invalid forms

rails hotwire turbo
by codesnips 3 tabs