Server-rendered modal forms on Rails with CableReady, Mrujs, Stimulus, and Tailwind

• tiny_crm

  1 0 0.0 Ruby

As usual, you can find the complete source code for this article on Github.

• jsbundling-rails

  38 792 6.9 Ruby

  Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.

  

To get everything installed, we’re going to walk on the wild side by using the newly released, very-much-still-alpha jsbundling-rails and cssbundling-rails gems.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• cssbundling-rails

  27 550 6.8 Ruby

  Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.

  

To get everything installed, we’re going to walk on the wild side by using the newly released, very-much-still-alpha jsbundling-rails and cssbundling-rails gems.

• tailwindcss-stimulus-components

  11 1,300 8.8 JavaScript

  A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.

// Credit: This controller is an edited-to-the-essentials version // of the modal component created by @excid3 as part of the essential // tailwind-stimulus-components package found here: // https://github.com/excid3/tailwindcss-stimulus-components // In production, use the full component from the // library or expand this controller to allow for // keyboard closing and dealing with scroll positions import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ['container']; connect() { this.toggleClass = 'hidden'; this.backgroundId = 'modal-background'; this.backgroundHtml = this._backgroundHTML(); this.allowBackgroundClose = true; } disconnect() { this.close(); } open() { document.body.classList.add('fixed', 'inset-x-0', 'overflow-hidden'); this.containerTarget.classList.remove(this.toggleClass); document.body.insertAdjacentHTML('beforeend', this.backgroundHtml); this.background = document.querySelector(`#${this.backgroundId}`); } close() { if (typeof event !== 'undefined') { event.preventDefault() } this.containerTarget.classList.add(this.toggleClass); if (this.background) { this.background.remove() } } _backgroundHTML() { return `${this.backgroundId}" class="fixed top-0 left-0 w-full h-full" style="background-color: rgba(0, 0, 0, 0.7); z-index: 9998;">`; } }

• Ruby on Rails

  467 54,865 10.0 Ruby

  Ruby on Rails

  

Mrujs is a newer tool, under active development, and is intended to serve as a modern, stable replacement for rails/ujs, which is no longer under active development and which will be deprecated when Rails 7 releases.

• Stimulus

  111 12,444 6.8 TypeScript

  A modest JavaScript framework for the HTML you already have

  

To accomplish this, we’ll use Stimulus for the front-end interactivity, CableReady’s brand new CableCar feature to send content back from the server, and Mrujs to enable AJAX requests and to automatically process CableCar’s operations.

• hotwire-rails

  98 960 3.2 Ruby

  Discontinued Use Hotwire in your Ruby on Rails app

  

While the full Hotwire stack can deliver this experience with about the same amount of effort, the power and flexibility of CableReady's chainable operations makes CableReady + Mrujs a better fit for this particular use case than the full Hotwire stack, in my very, very humble opinion.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• stimulus_reflex

  45 2,199 7.5 Ruby

  Build reactive applications with the Rails tooling you already know and love.

  

Stimulus and CableReady are two powerful, battle-tested tools with a mature feature set that should be considered for any modern Rails application. CableReady can stand alone as a way to deliver real-time updates to end users through a variety of methods or it can be powered-up with StimulusReflex to deliver a SPA-link experience, minus the SPA.

Suggest a related project