This repository aims to briefly introduce the concept and showcase helpful content that may help you on your Reactive Rails journey. Watch this repository to stay up to date on the latest information published on the web about Reactive Rails. (Contributions welcome, just send a PR.)
Also available in Japanese
Reactive Rails is a term used to describe a particular design philosophy or architectural style of web application development using Ruby on Rails. The style sits in the middle of a hypothetical continuum having RESTful (aka "vanilla") HTML server-rendered apps on one extreme, and Rails API + React or other front-end framework single-page applications (SPA) on the other.
Reactive Rails empowers small teams of full-stack Rails developers to produce rich, real-time user experiences with server-rendered HTML and minimal JavaScript. It honors the motivating spirit of the Ruby on Rails framework, which is to allow small teams to do big things, while being unabashedly inspired by Phoenix LiveView, a competing web framework written in Elixir.
Reactive Rails enables fast asynchronous reaction to user events, which is something that until recently has only been possible with the use of front-end frameworks such as React or Angular. Typical server-rendered page requests take a minimum of at least 100-500 ms to process, and when you take into account the time that the browser needs for re-rendering the screen using the HTML payload sent from the server, the request cycle is often measured in whole seconds.
In Reactive Rails apps, user interactions are passed to the server over websockets instead of normal HTTP requests. Lightweight handlers change application state on the server, then the current page is automatically re-rendered and sent back to the browser. DOM diffing is used to change the screen to reflect the new application state without having to re-render the whole document. In best case scenarios, the screen can be updated in 20-30ms. Page refreshes under 200-300ms are generally considered to be imperceptible.
Another reason that the style is called "Reactive" is that when you add component-oriented view design versus just templates, as many are doing, then the design patterns that emerge begin to resemble those used to write apps in React, except of course that the dominant programming language remains Ruby, instead of JavaScript.
Reactive Rails is made possible by ActionCable. It's also inspired, but does not necessarily require the use of Turbolinks 5 and StimulusJS.
While there are other frameworks that can be used to do reactive Rails development, the one with the most traction, momentum, and community is StimulusReflex, created by Nate Hopkins aka hopsoft, which builds heavily on the foundation of StimulusJS.
StimulusReflex is the main library added to Rails to make it "reactive". It is heavily inspired by StimulusJS and uses a similar syntax for hooking into browser events, except that instead of triggering actions on local JavaScript-based controllers, it triggers them on the server via ActionCable channels. The reactions to those events on the server are implemented as "reflexes", a kind of lightweight controller action that is primarily concerned with mutating server state.
StimulusReflex is built on top of CableReady, which is a wrapper around ActionCable that greately enhances its functionality, primarily by enabling direct control of the browser's DOM from the server.
ViewComponent is a framework extracted from Github's main monolith application that is used to build view components that are, in their words, "reusable, testable & encapsulated". The use of view components makes reactive Rails development feel a little bit like writing React code, because of the latter's emphasis on component classes for constructing its views.
ViewComponentReflex allows you to write reflexes right in your view component code, making it feel very much like Motion.
StimulusReflex showcase like Chat, Calendar, Todo, and more, with full source code.
ViewComponentReflex showcase has Local State, Loaders, Todos, and Data Table examples and code.
Toast-style alerts system using Shoelace
Modern Datatables is a repo with two apps and running demos, one with classic, old school Rails application with server rendered views, Stimulus, Stimulus Reflex and Turbolinks, and the other with Rails as a backend API and Vue.js as a full static SPA in the frontend.
Boxdrop is a Dropbox-Clone built using StimulusReflex to demonstrate how you can use StimulusReflex to build an application.
Mainstream awareness (among Rails developers, anyway) of Reactive Rails was stimulated (ha!) by Hopsoft's Build a real-time Twitter clone in 10 mins with Rails and StimulusReflex video, kind of like how Ruby on Rails original hype cycle was sparked off by DHH's How to build a blog engine in 15 minutes.
There's also a nice blogpost by Mike McCracken that documents his experience trying to follow along with the Twitter clone tutorial.
Building a Reactive Todo List with Ruby on Rails 6 and Stimulus Reflex by TechmakerTV link
Episode #209 - Reactive Applications with Stimulus Reflex by DriftingRuby link to preview
Introduction to StimulusReflex by GoRails link
Create Fast Apps With Stimulus Reflex And RailsBytes Templates In Ruby On Rails 6 by Deanin link
Stimulus Reflex Morph Modes | Selector Morphs with Rails View Components by TechmakerTV [link] (https://www.youtube.com/watch?v=bwFrjIC8wfE)
Two Patterns for Stimulus Reflex form submissions
Blog posts and other stuff that you can read.
A future for Rails: StimulusReflex includes source for a chat app
Reactive Rails Applications with StimulusReflex
Twitter Clone with StimulusReflex gone Hybrid Native App builds on the original Hopsoft twitter clone video by turning it into a native app.
Reactive Map with Rails, Stimulus Reflex and Mapbox leverages reactive Rails to quickly build a map application.
Infinite Horizontal Slider with CableReady and the Intersection Observer API
Lightning fast reactive action with Stimulus Reflex partial morphs introduces morphing in reflexes.
Using Tippy.js with StimulusReflex and CableReady
The excited blog post that I wrote when I figured out Reactive Rails is all about.
Announcement of morph in StimulusReflex 3.3 by leastbad, one of the most outspoken members of the StimulusReflex community.
Shoelace because once you're thinking in components, using pre-packaged web components becomes a lot more appealing.
Optimism drop-in remote form validation.
Futurism lazy-load view partials.
Turbolinks iOS Wrapper is the reactive Rails answer to React Native.
StimulusComponents is a collection of usesful Stimulus components.
StimulusUse by Adrien Poly is a collection of composable behaviors for your Stimulus Controllers.
StimulusControllers by Hopsoft features a collection of useful Stimulus controllers like auto-suggest and copy to clipboard.
Stimulus Form Utilities by Hopsoft is a collection of useful form helpers like characters count for any input field and auto text-field resizing.
StimulusReflexGlobalId automatically maps global IDs to instance variables during a reflex.
StimulusShortcut for simple binding of keystrokes to element actions.
TailwindCSS StimulusComponents inspired by Bootstrap components.
StimulusReflex Testing has support for unit-testing your reflexes.
Hotwire, officially launched in December 2020 is how DHH does reactive Rails in Hey.com. If it succeeds, it should further legitimize reactive Rails techniques and bring its methods to the masses.
Motion is an integrated framework for reactive, real-time frontend UI components in your Rails application using pure Ruby that is probably the closest direct alternative to StimulusReflex.
Matestack is another alternative
Hyperstack is a Ruby DSL, compiled by Opal, bundled by Webpack, powered by React.
Snabberb A minimalistic reactive frontend web framework written in Ruby / Opal and based on Snabbdom.
Sockpuppet Build modern, reactive, real-time apps with Django in Python
Reactive Phoenix is written in Elixir and inspired this whole thing.
Prism is a framework for making web applications with Ruby and WebAssembly
Hat tip to Skatkov for the idea.