Guide to Reactive Rails
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
What is Reactive Rails?
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.
Why is it called "Reactive"?
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.
Reactive Rails technology stack
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 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.
Examples and Demos / Sample Code
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.
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.
The "Twitter in 10 minutes" video
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)
Blog posts and other stuff that you can read.
Introductory Blog Posts
A future for Rails: StimulusReflex includes source for a chat app
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.
Lightning fast reactive action with Stimulus Reflex partial morphs introduces morphing in reflexes.
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.