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.)
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 and momentum appears to be StimulusReflex, created by Nate Hopkins aka hopsoft.
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.
Working example apps like Chat, Calendar, Todo, and more, with full source code. http://expo.stimulusreflex.com/
Toast-style alerts system using Shoelace https://gist.github.com/obie/5c56d87c7b7e4e343ef7504349a69515
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.
Building a Reactive Todo List with Ruby on Rails 6 and Stimulus Reflex by TechmakerTV https://www.youtube.com/watch?v=eK1CM0MBF64
Episode #209 - Reactive Applications with Stimulus Reflex by DriftingRuby (Preview, full episode paid content) https://www.youtube.com/watch?v=K9QeC9CsYiU
Introduction to StimulusReflex by GoRails https://www.youtube.com/watch?v=gbMbGOigjA8
Create Fast Apps With Stimulus Reflex And RailsBytes Templates In Ruby On Rails 6 by Deanin https://www.youtube.com/watch?v=hxqkTy2SB78
Stimulus Reflex Morph Modes | Selector Morphs with Rails View Components by TechmakerTV https://www.youtube.com/watch?v=bwFrjIC8wfE
Blog posts and other stuff that you can read.
StimulusReflex Documentation https://docs.stimulusreflex.com/
https://dev.to/finiam/reactive-rails-applications-with-stimulusreflex-48kn
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. https://github.com/unabridged/motion
Matestack is another alternative https://www.matestack.io/
Hyperstack is a Ruby DSL, compiled by Opal, bundled by Webpack, powered by React. https://hyperstack.org/
Build modern, reactive, real-time apps with Django in Python https://github.com/jonathan-s/django-sockpuppet
Reactive Laravel https://github.com/livewire/livewire
Reactive Phoenix (Elixir) https://github.com/phoenixframework/phoenix_live_view
Reactive ASP.NET https://github.com/dotnet/aspnetcore/blob/master/src/Components/README.md
Prism is a framework for making web applications with Ruby and WebAssembly https://github.com/prism-rb/prism
Once you're thinking in components, using pre-packaged web components becomes a lot more appealing https://shoelace.style/
Hat tip to https://github.com/skatkov/awesome-stimulusjs for the idea to write this guide.