Lazy loading, optimistic UI and more in Rails with Attractive.js

# What this is

This article explains how Attractive.js 1.0.0 (pre-release) can be used with Rails to build interactive HTML without writing custom JavaScript. The author built a simple message board that avoids Stimulus and Turbo Streams and relies on Attractive's extensions and a small JSON actions protocol.

# One partial, three uses

The app uses a single partial for a message item. That partial renders the initial page, is used as a cached for optimistic previews, and is cloned for lazy-loaded batches. Template fields are annotated with attract-field so Attract knows where to put server data when rendering the template client-side.

# Attract extension and the JSON actions protocol

Attract intercepts form submissions and issues fetch requests instead of traditional page reloads. The server responds with JSON containing an actions array. Each action describes a DOM mutation, for example:

• append: clone a named template and append to a target
• prepend: clone and insert before children of a target
• replace: swap a target element with rendered template
• before/after: insert relative to a target element
• remove: delete element(s)
• setStore and other state-related actions (via bundled Reactive store)

The same actions drive optimistic updates, lazy loading, and simple UI behaviors such as removing flash messages after a delay.

# Optimistic UI flow

When a user submits a new message, a cached template renders immediately as an optimistic preview while the server processes the request. The server then returns actions like updating a Reactive store value and resetting the form. In the demo, the create request purposely sleeps for a second so the optimistic preview is visible before the server response arrives.

# Client and server validation

# Lazy loading messages

# Keyboard shortcuts and small utilities

Attractive's keyboard extension wires keyboard shortcuts scoped to elements. Examples in the demo include meta+k to focus the filter, Escape to clear it, and meta+Enter to submit. The library also supports small action one-liners (js: prefix) and custom action registration for behaviors too small to warrant a full module.

# Hotwire

Attractive can be used alongside Hotwire or as a replacement depending on needs. It deliberately provides actions out of the box and an extensible interface so you can opt into only the pieces you need. The author mentions thinking about adding SSE support to broadcast actions to multiple clients in the future.

# Practical takeaway

If you want minimal JavaScript with declarative HTML-driven interactions in a Rails app, Attractive.js offers a compact pattern: templates + an actions JSON protocol + a small set of bundled extensions (attract, validate, keyboard, reactive). That covers optimistic updates, server-driven DOM changes, lazy loading, and keyboard shortcuts without Stimulus or Turbo Streams.