Skip to content
main
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Oct 15, 2020

README.md

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.)

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.

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.

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.

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 technology stack

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

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.

CableReady

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

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

ViewComponentReflex allows you to write reflexes right in your view component code, making it feel very much like Motion.

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.

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.

Videos

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.

Tutorials

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)

Reading

Blog posts and other stuff that you can read.

Documentation

StimulusReflex Documentation

Introductory Blog Posts

A future for Rails: StimulusReflex includes source for a chat app

Reactive Rails Applications with StimulusReflex

Tutorials

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

Hype

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.

Useful Libraries

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.

Testing Resources

StimulusReflex Testing has support for unit-testing your reflexes.

Community

Community site for StimulusJS

Related Projects

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 Laravel

Reactive Phoenix is written in Elixir and inspired this whole thing.

Reactive ASP.NET

Prism is a framework for making web applications with Ruby and WebAssembly

Credits

Hat tip to Skatkov for the idea.

About

A comprehensive guide to online resources about "Reactive" Ruby on Rails development

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.