loading...
Cover image for StimulusReflex v3.3 Morphs has been released

StimulusReflex v3.3 Morphs has been released

leastbad profile image leastbad ・5 min read

TL;DR: scroll down for game-changing new features, a declaration of war and a legitimate celebrity endorsement.

I have a secret: I've been developing software my entire conscious life, but StimulusReflex was my first Open Source project and I came to it out of distress, not curiousity. Instead of sensing opportunity, I was in a crush of desperation.

I'm a Rails developer. I learned some React to help my partner human with her ambition to become a coder. Every day, I felt more sad and upset that she was being taught a stack that fetishized complexity. I needed to channel my grief into a solution, because complaining about how broken things had become was driving her nuts. I was on a mission.

Fast-forward 18 months, 90,000 downloads, 60 releases and 500 community members later. People like it... they really like it!

And now, the most exciting update to the original vision has arrived. We spent a year improving things incrementally, listening carefully to the problems and requests people brought to our Discord. I spent a lot of time asking people why they wanted to do things. Like the landscapers at Ohio State University, we didn't rush to conclusions or prescribe what we imagined people wanted.

Ohio State University

Earlier this year, regular updates paused. Coccoons were spun. Epic Github pull request conversations helped us iterate our design until Morphs took shape.

Originally, a Reflex would regenerate the current page, going through most of the Rails stack as it executed the controller action and ultimately sent the entire page back to the browser, even if you just wanted to change 1 to 2. It worked great in spite of being a potentially heavy request, but we knew we could do better.

A Selector Morph completely skips ActionDispatch. Instead, you can now render a partial or ViewComponent and send the result to the client, where it will update a surgically targeted DOM element. In fact, you can update multiple elements in one request. And boy, is it ever fast. If you think of Rails as slow, you'll have a hard time explaining the 12ms updates.

Morphs can also update nothing at all. This is really handy when you want to launch an ActiveJob or trigger an external process. Later on, when that job completes, you can use CableReady to send notifications to the client.

You can see on this chart that we went from one codepath to three, with the original behavior still the default.

Power Rangers

Morphs might be the most obviously exciting aspect of the v3.3 release, but there's lots of other features to dig into.

StimulusReflex now supports subscription-based authentication, which means that you can authenticate your Reflexes with JWT tokens. This is great if you're supporting mixed-device workflows or supporting clients across multiple domains.

You can try out token auth by cloning and running this sample project, which itself is based on the StimulusReflex Harness, a barebones app that is perfect for testing Reflex ideas.

People are finally starting to realize that CableReady is the true secret sauce behind StimulusReflex, and is possibly the most under-appreciated powerhouse in the Rails ecosystem. How crazy is it that you can trigger client side DOM events in your ActiveRecord callback functions? Or than you can implement paginated endless scroll solutions in a few simple lines? If it was a superhero, kids would complain that it was too powerful.

There's now library-level client-side lifecycle events: connected, disconnected, rejected and ready let you build UIs that know if there's a problem reaching the server in real-time.

We've drastically improved the infrastructure around lifecycle events, callbacks and promises. Your afterReflex method won't fire until after all page mutations have completed, no matter how many operations there are.

Behind the scenes, every Reflex operation has a reflexId. You can now provide your own, and all lifecycle events, callbacks and promises provide the reflexId they correspond to. That means you can build applications which treat Reflexes as transactions.

Tons of work has gone into removing friction from the installation, setup and integration of Reflexes into your project. We've doubled-down on Redis as a dependency, and enforce caching in your development environment. The generators have been freshened up with more helpful instructions. We have tried hard to improve debug output, warnings and error messages across the framework. And going forward, there will be a loud warning on your console if your Gem and NPM package versions are out of date.

I'm personally really proud of the documentation for StimulusReflex, which has been dramatically expanded to cover Morphs, deployment, troubleshooting, form processing, support for multi-tenant apps, support for Pundit, support for I18N, and lots more I'm forgetting.

We're also seeing incredible work being done in the ecosystem of tools that exists alongside StimulusReflex and CableReady. Futurism enables powerful lazy-load capacity by using CableReady to fire just-in-time updates to your DOM like a T-shirt cannon. And ViewComponentReflex lets you bring StimulusReflex to your ViewComponents, allowing them to maintain their internal state between Reflex operations.

A month ago, I soft-launched StimulusConnect, "the release tracker and news aggregator for Stimulus and its surrounding ecosystem". I think it's already pretty awesome, and we're just getting started. My Turbolinks and Stimulus are developed behind a wall post in the "May of WTFs" is now (sadly) the #1 most-liked thread on the Rails forum, which suggests that the community needs to step up. I'm going to do my part.

Things I Hate

Like I said at the beginning of this post, I came to StimulusReflex because React seemed untenable to me.

As a developer, it's mind-boggling that we would give up so much power and flexibility when Rails and StimulusReflex prove that React is only one of several potential future paths for our community to take.

As a citizen of the world, I don't like that Facebook has played a role - somewhere between turned a blind eye and utterly damning - in enabling the fascist, dystopian hellscape we're living through as a society.

I don't want to piss in anyone's Life Cereal but every time you use React in one of your projects, at home or at work, you're giving tacit support to Facebook funding and ultimately steering the tools that we use to build the future of the web.

StimulusReflex means that you still have a choice.

Discussion

pic
Editor guide
 

Excellent post and an even better release! StimulusReflex rocks!

 

Your may wtf post about the development behind a wall, all the while bragging about how much better their approach is to other companies really hits the biggest problem on the nose. Did anything ever come out of that post?

 
 

Yes! Excited to give it a try!