turbo

I don’t test Hotwire behavior by guessing; I add system tests that exercise the UI. With Capybara, I click a button that triggers a Turbo Stream response and assert that the DOM changes without a full page reload. The exact assertion depends on the fe

Infinite scroll can be done with plain HTML + Turbo Frames. Render a “next page” frame with loading: :lazy so Turbo fetches it when it enters the viewport. No JS required, and it degrades gracefully.

Filters are better when the URL reflects state. I use a small Stimulus controller that updates the query string as filters change, then triggers a Turbo visit (often with data-turbo-action='replace'). This gives shareable URLs and correct back-button

Destructive actions should feel immediate. For delete links inside a list, I return a Turbo Stream that does turbo_stream.remove dom_id(record). That removes the DOM node without re-rendering the rest of the list, which avoids the common “jump” effect

For search-as-you-type, I keep the server in charge and use a small Stimulus controller to debounce form submission. The controller listens to input events, waits ~250ms, then triggers a normal Turbo form submit. The server responds with index.turbo_s

Presence is usually overkill, but for collaboration features it’s valuable: show who’s online in a room. I identify connections with current_member in ApplicationCable::Connection, then in a channel I broadcast updates when members subscribe/unsubscri

Double-submits are easy to trigger on slow connections, especially with Turbo where the page doesn’t visibly reload. I add a Stimulus controller that listens to turbo:submit-start and turbo:submit-end events on the form. On submit start, disable the s

If a feature is fundamentally “live” (comments, activity), I reach for model broadcasts. Rails can broadcast Turbo Stream fragments on after_create_commit, and the UI subscribes with turbo_stream_from. The beauty is that it’s still server-rendered HTM

Never subscribe clients to guessable user-specific streams. Use signed_stream_name so a user can only subscribe to their own broadcasts. This is essential when streaming private notifications.

Sometimes a form submission should update a specific section rather than navigate the whole page. With Turbo, this is as easy as setting data-turbo-frame on the form. For example, a filter form can target a results frame, so submissions replace only t

Turbo can preload pages on hover (or on touchstart) which makes navigation feel instantaneous. I use data-turbo-preload on links that are likely to be clicked (like list item titles). The server still controls caching and ETags, so it remains safe and

For pages with expensive secondary data (audit trail, related entities), keep initial render fast and lazy-load a details frame only when the user asks. This is a clean performance pattern for admin pages.