Interactive Rails with StimulusReflex by Jason Charnes

Interactive Rails with StimulusReflex


Learn how to use StimulusReflex and CableReady to build a reactive web application your users will love.

This course is launching in the fall of 2020. Sign up to get pre-launch updates and be the first to know when the course launches.

Reactive web applications with less JavaScript

Does it sound too good to be true? I felt the same way when I heard that claim.

I first heard such a claim from the Elixir community when the Phoenix framework introduced LiveView. People were talking about taking interactive client-side code and letting the server handle it.

What?! 🤯

To be honest, I didn't really understand it. How can the server handle such a thing? I saw a couple of demos and thought it was cool, but wrote it off as some cool thing Elixir can do and that was that.

StimulusReflex arrives on the scene. 😎

In late 2019 we had Nate Hopkins on the Remote Ruby podcast to talk about a tool he released called StimulusReflex.

StimulusReflex promises some of the same things that LiveView does, but using Ruby on Rails. 😮 It's a gem for Ruby on Rails that enables real-time interactivity without the complexity of full-stack frontend frameworks.

At a minimum, this means less boilerplate JavaScript. 👍 On a larger scale, this means less client-managed state, and more of what we Ruby on Rails developers love... Ruby! 😱

How does StimulusReflex work?

StimulusReflex gives us a set of tools and conventions that allow us to take our plain old ERB files (or HAML if you're Andrew Mason) and make them interactive. It does this by building on top of the Rails conventions we rely on every day to build our applications.

StimulusReflex takes boring old Rails templates and provides a set of data attributes you can use to make our application interactive. (Sounds crazy, right?!)

The best part? It does this by relying on some of our favorite Rails libraries: ActionCable and Stimulus. 😌

The real magic happens in the CableReady library. CableReady is the glue between StimulusReflex, Stimulus, and ActionCable. CableReady allows us to interact with the DOM from Rails. 😮 (We'll cover CableReady in-depth in this course, as well. 👍)

It takes some re-learning, though

And continuing to learn is good!

Building reactive applications with less JavaScript requires a bit of a mental shift. There's no silver bullet, not even StimulusReflex. (Though, it's pretty dang close!)

There are a few "gotchas" when it comes to pushing client-side state to the server. When you rely on the client, you (typically) use JavaScript to manipulate the DOM based on certain "events." With StimulusReflex you're relying on (basically) pure HTML based on a response from the server. 

Some of the things you have to now take into account are:
  • overloading the server
  • slow server responses
  • handling server errors
  • keeping content in sync
  • making sure pre-existing JavaScript functionality continues to work

The good news is that these aren't difficult problems. 🎉 And, as I think you'll see, the "gotchas" in StimulusReflex are worth the gains you get as a Rails developer building interactive user interfaces.

I'm sold on StimulusReflex, what will I learn in this course?

Awesome! I'm pretty amped on StimulusReflex, too!

When you're done with this course, you should feel confident using StimulusReflex in your Ruby on Rails applications.

In this course we'll take an existing real-world application and rebuild it using StimulusReflex. We'll start from rails new and work our way up to shipping the application into production.

In this course we'll explore:
  • refactoring an "old-school" interaction from Rails UJS to StimulusReflex
  • ways to keep your application's logic simple and easy to understand (thanks to StimulusReflex and CableReady)
  • making your application feel like a SPA (Single Page Application) with a minimal amount of JS
  • ways to build complex user-interactions using StimulusReflex and CableReady
  • encapsulating and re-using ERB code by utlitizing ViewComponents 
  • testing your StimulusReflex applications

This course will be primarily video-driven. The source code will be available for each lesson, as well.

If this sounds like a good fit, join the email list 👇 and I'll let you know when the course is ready!
Get notified when the course launches

I'm not sold on StimulusReflex, what should I do next?

Thanks okay, it's not for everyone!

I'd encourage you to watch Nate Hopkins' video on StimulusReflex. He builds the "next" Twitter in 9 minutes. It's a great overview of StimulusReflex and requires the smallest investment of your time. 🍹

If you have questions about StimulusReflex (or questions about if this course is right for you) you're welcome to reach out to me! There's also a lovely StimulusReflex community on Discord that would love to help.

How am I qualified to teach you StimulusReflex?

I'm in a neat position.

We adopted StimulusReflex into production at Podia in the beginning of 2020. Since then, we've doubled down on our efforts to use Stimulus Reflex.

Not only that, I was fortunate enough to be on the first project at Podia that used StimulusReflex. 🙌

Since then I've been able to:
  • Contribute to StimulusReflex
  • Build a (very prototype) testing library for StimulusReflex
  • Mentor and help other developers with StimulusReflex

We've built simple user-interactions, complex nested forms, and have pushed StimulusReflex in ways we didn't think were possible!

But... I've also made a lot of mistakes. 😅

I've made certain forms too complex because of how I tried to make StimulusReflex something it's not. Something that will make my co-workers (or my future self) hate me when they have to work on it. 😬

I've also been apart of projects where we tried to make StimulusReflex do way too much and had to take several steps back. 📉

I've wiped out third-party JS integrations with my use of StimulusReflex. 😊

I've done some wild things... But! I've learned from each of my mistakes.

Each time we push the boundaries of StimulusReflex at Podia I get a clearer vision of how to use it and a deeper love for the library.

FAQs

Who is this course for?

This course is for Ruby on Rails developers looking to make "reactive" web applications. Ideally, you've done this in the past using JavaScript (Stimulus, jQuery, React, any of it!) or Rails UJS.

This course assumes you have some basic Ruby on Rails knowledge. Because of this, we won't be covering the basics of Ruby on Rails. If you're new to Rails, I highly recommend you check out the course Learn Rails by Building Instagram.

When will this course be available?

This course will be available before Christmas Day of 2020. (How excited are you for 2020 to end?)

I'm sharing updates on the course as I build it. For those updates, join the course email list.

What will I learn in this course?

  • How to install StimulusReflex into a Ruby on Rails application
  • When to use StimulusReflex or CableReady
  • When not to use StimulusReflex or CableReady
  • How to think in terms of server-based UI interactions versus client-based interactions
  • How to make StimulusReflex actions fast, simple, and easy to test
  • How to test StimulusReflex actions
  • How to combine StimulusReflex with Javascript (using Stimulus) to create great user experiences
  • How to combine StimulusRelex with the power of Rails to make your life easier
  • The different morph modes available in StimulusReflex

What will we build?

Inspired by Nate's "build the next Twitter in 9 minutes" video, we'll take that further and build a fully featured Twitter clone.

We'll allow users to:
  • create accounts
  • post updates
  • share other user's updates 
  • follow other users
  • block other users
  • manage their account
We'll do all of this using Ruby on Rails and sprinkling in StimulusReflex and CableReady as needed.

Will we use any technologies other than StimulusReflex?

I'm glad you asked! We'll be using some modern tools and libraries along the way:
  • ViewComponent for isolating and reusing our view-related logic 🗳️
  • TailwindCSS for styling our application 👨‍🎨
  • Stimulus for the times we still need some JavaScript sprinkles 🍰

Nice to meet you! 👋

My name is Jason Charnes. I'm a Senior Product Developer at Podia. I co-host the Remote Ruby podcast and I started Southeast Ruby.

I've spent the majority of my professional career heavily invested in Ruby. I've learned a lot about Ruby and Ruby on Rails along the way. I'm here to share some of those things with you.