- Free
Interactive Rails with StimulusReflex
Learn how to use StimulusReflex and CableReady to build a reactive web application your users will love.
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! 😱
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 this course, as well. 👍)
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 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.
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.
I loved this course. What I loved the most is Jason's approach to teach each small step, so the user could see the feature work, and incrementally build. Then, to go back and refactor, as Jason explained why the refactor was better and why it worked.
A great resource to add to the toolbox of any Rails developer.
A great resource to add to the toolbox of any Rails developer.
Chuck Smith
I can say Jason is a first rate instructor. I especially like how he verbalizes the key StimulusReflex phrases. It really resonates and sticks. Probably the best modern Ruby on Rails course out.
Jason Charnes has set the benchmark to be met.
Jason Charnes has set the benchmark to be met.
Michael Carroll
Interactive Rails with StimulusReflex starts off simply and Jason walks you through every step you need to know to build the reactive applications AND understand what’s happening after you’re done.
Highly recommend picking up this course to learn about the power of StimulusReflex and CableReady.
Andrea Fomera
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.
We'll build a "real-world" Ruby on Rails application 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:
When you're done with this course, you should feel confident using StimulusReflex in your Ruby on Rails applications.
We'll build a "real-world" Ruby on Rails application 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:
- building user-interactions using StimulusReflex and CableReady
- keeping application logic simple, isolated, easy to understand with StimulusReflex
- making your application feel like a Single Page Application with very little JS
- working with logged in users and teams
- encapsulating and re-using ERB code
- securing StimulusReflex with signed global ids
- testing your StimulusReflex applications
This course is video-driven. (4 hours and 42 minutes, to be exact!) 🎥
Code is available for each lesson, as well. ⌨️
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.
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:
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 testing library for StimulusReflex (which we use in this course)
- 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.
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.
Contents
Getting started
Let's talk about StimulusReflex! In this section we'll do a high-level overview of StimulusReflex and CableReady. Once we've gained a basic understanding of how it works, we'll also take some steps to get a fresh Rails app ready for us to build.
Bootstrap a Rails app
- 2 mins
- 14 MB
Install StimulusReflex
- 7 mins
- 296 MB
A basic task list
Display lists
- 6 mins
- 111 MB
Display incomplete tasks
- 3 mins
- 42.5 MB
Display complete tasks
- 3 mins
- 22.5 MB
Seed the database
- 3 mins
- 51.9 MB
Complete a task
- 8 mins
- 141 MB
Undo a completed task
- 4 mins
- 75.6 MB
Refactor to a partial
- 3 mins
- 46.7 MB
Delete a task
- 6 mins
- 90 MB
Adding new tasks
Expanding the task list
Server-side callbacks
- 2 mins
- 38.4 MB
Validate a new task
- 6 mins
- 88.3 MB
Sorting tasks
- 12 mins
- 267 MB
Working with others
Add users to the application
- 5 mins
- 93.6 MB
Track who adds a task
- 4 mins
- 70.4 MB
Assign a task to a user
- 9 mins
- 160 MB
Real-time assignees
- 5 mins
- 63 MB
Track who completes a task
- 6 mins
- 117 MB
Editing tasks
Edit a task in the DOM
- 7 mins
- 153 MB
Update a task with Reflex
- 3 mins
- 50.8 MB
Clean up the task editing UX
- 4 mins
- 89.5 MB
Multiple task lists
CableReady intro and setup
Preview- 10 mins
- 173 MB
Add a new list form
- 6 mins
- 89.8 MB
Save a new list
- 5 mins
- 73 MB
Validate a new list
- 4 mins
- 59.4 MB
Bug fixes
- 4 mins
- 60.7 MB
Delete a list
- 4 mins
- 53 MB
Adding multiple lists
- 5 mins
- 93.2 MB
Scoping reflexes
- 3 mins
- 49.2 MB
Task comments
Add a task comments page
- 9 mins
- 111 MB
Add new comments
- 8 mins
- 142 MB
Channel refactoring
- 4 mins
- 65.1 MB
Clear the comment form
- 2 mins
- 33.8 MB
Validate a comment
- 2 mins
- 37.1 MB
Live updating
Prepare for live updates
- 6 mins
- 123 MB
Broadcast newly added tasks
- 7 mins
- 138 MB
Broadcast task completion
- 4 mins
- 63.9 MB
Broadcast task "incompletion"
- 3 mins
- 48.4 MB
Broadcast task deletion
- 6 mins
- 63.5 MB
Add a team model
- 4 mins
- 65.9 MB
Broadcast list creation
- 5 mins
- 113 MB
Broadcast list deletion
- 2 mins
- 21.5 MB
Testing StimulusReflex
Install RSpec
- 5 mins
- 55.6 MB
Testing reflexes
Preview- 10 mins
- 181 MB
Testing broadcasts
- 5 mins
- 86.6 MB
Testing morphs
- 6 mins
- 75 MB
Testing params
- 3 mins
- 49.9 MB
Final touches
Devise views
- 5 mins
- 60.1 MB
Account creation
- 9 mins
- 113 MB
Scoping teams
- 5 mins
- 67.6 MB
Securing reflexes
- 7 mins
- 165 MB
Logging out
- 2 mins
- 21.8 MB
Using Heroicons
- 3 mins
- 39.7 MB
Deploy to Heroku
- 3 mins
- 38.8 MB
Extras
StimulusReflex Patterns
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.
You should be familiar with Ruby on Rails and some of the more popular gems used in the Rails ecosystem (like Devise).
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.
Likewise, if you're already familiar with StimulusReflex or CableReady, you might gain some tips from this course- but it's really geared towards those without StimulusReflex or CableReady experience. I'd recommend you check out StimulusReflex Patterns by Julian Rubisch!
You should be familiar with Ruby on Rails and some of the more popular gems used in the Rails ecosystem (like Devise).
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.
Likewise, if you're already familiar with StimulusReflex or CableReady, you might gain some tips from this course- but it's really geared towards those without StimulusReflex or CableReady experience. I'd recommend you check out StimulusReflex Patterns by Julian Rubisch!
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 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?
Stop me if you've heard this before, we'll be building a to-do list application.
But before you run away you should know: we're going to make one heck of a to-do list application. 😎
When we're done we'll have a Rails application that allows users to:
But before you run away you should know: we're going to make one heck of a to-do list application. 😎
When we're done we'll have a Rails application that allows users to:
- create task lists
- delete task lists
- re-order task lists
- create tasks inside lists
- delete tasks
- re-order tasks
- assign tasks to other users
- comment on tasks
- complete tasks
Not only that, we'll also look at live broadcasting new changes to other members of our team!
And we're going to do it all with Rails, StimulusReflex, and CableReady. 🚠
Do you offer purchasing power parity discounts?
Yes!
I'm going be straight with you here, though- I have one heck of time trying to calculate it for each different country. 😅
If you're in a spot where you would benefit from this type of discount, please email me with the country you're in and what would be an equally fair price for the course in your country.
I want you to have the opportunity to learn and I'm glad to help do what I can to assist.
I'm going be straight with you here, though- I have one heck of time trying to calculate it for each different country. 😅
If you're in a spot where you would benefit from this type of discount, please email me with the country you're in and what would be an equally fair price for the course in your country.
I want you to have the opportunity to learn and I'm glad to help do what I can to assist.
Do you offer student discounts?
Yes!
Please email me from your educational institution's email (.edu) if possible and I'll provide you with a discount. If you can't email me from that type of email address- still email me. I'm glad to do what I can to help.
Please email me from your educational institution's email (.edu) if possible and I'll provide you with a discount. If you can't email me from that type of email address- still email me. I'm glad to do what I can to help.
Will I be able to get my money back if the course isn't for me?
You bet! I'll gladly give you a full refund within 14 days of purchase. I do ask that you share your feedback for me in return, though. 🤗
Contents
Getting started
Let's talk about StimulusReflex! In this section we'll do a high-level overview of StimulusReflex and CableReady. Once we've gained a basic understanding of how it works, we'll also take some steps to get a fresh Rails app ready for us to build.
Bootstrap a Rails app
- 2 mins
- 14 MB
Install StimulusReflex
- 7 mins
- 296 MB
A basic task list
Display lists
- 6 mins
- 111 MB
Display incomplete tasks
- 3 mins
- 42.5 MB
Display complete tasks
- 3 mins
- 22.5 MB
Seed the database
- 3 mins
- 51.9 MB
Complete a task
- 8 mins
- 141 MB
Undo a completed task
- 4 mins
- 75.6 MB
Refactor to a partial
- 3 mins
- 46.7 MB
Delete a task
- 6 mins
- 90 MB
Adding new tasks
Expanding the task list
Server-side callbacks
- 2 mins
- 38.4 MB
Validate a new task
- 6 mins
- 88.3 MB
Sorting tasks
- 12 mins
- 267 MB
Working with others
Add users to the application
- 5 mins
- 93.6 MB
Track who adds a task
- 4 mins
- 70.4 MB
Assign a task to a user
- 9 mins
- 160 MB
Real-time assignees
- 5 mins
- 63 MB
Track who completes a task
- 6 mins
- 117 MB
Editing tasks
Edit a task in the DOM
- 7 mins
- 153 MB
Update a task with Reflex
- 3 mins
- 50.8 MB
Clean up the task editing UX
- 4 mins
- 89.5 MB
Multiple task lists
CableReady intro and setup
Preview- 10 mins
- 173 MB
Add a new list form
- 6 mins
- 89.8 MB
Save a new list
- 5 mins
- 73 MB
Validate a new list
- 4 mins
- 59.4 MB
Bug fixes
- 4 mins
- 60.7 MB
Delete a list
- 4 mins
- 53 MB
Adding multiple lists
- 5 mins
- 93.2 MB
Scoping reflexes
- 3 mins
- 49.2 MB
Task comments
Add a task comments page
- 9 mins
- 111 MB
Add new comments
- 8 mins
- 142 MB
Channel refactoring
- 4 mins
- 65.1 MB
Clear the comment form
- 2 mins
- 33.8 MB
Validate a comment
- 2 mins
- 37.1 MB
Live updating
Prepare for live updates
- 6 mins
- 123 MB
Broadcast newly added tasks
- 7 mins
- 138 MB
Broadcast task completion
- 4 mins
- 63.9 MB
Broadcast task "incompletion"
- 3 mins
- 48.4 MB
Broadcast task deletion
- 6 mins
- 63.5 MB
Add a team model
- 4 mins
- 65.9 MB
Broadcast list creation
- 5 mins
- 113 MB
Broadcast list deletion
- 2 mins
- 21.5 MB
Testing StimulusReflex
Install RSpec
- 5 mins
- 55.6 MB
Testing reflexes
Preview- 10 mins
- 181 MB
Testing broadcasts
- 5 mins
- 86.6 MB
Testing morphs
- 6 mins
- 75 MB
Testing params
- 3 mins
- 49.9 MB
Final touches
Devise views
- 5 mins
- 60.1 MB
Account creation
- 9 mins
- 113 MB
Scoping teams
- 5 mins
- 67.6 MB
Securing reflexes
- 7 mins
- 165 MB
Logging out
- 2 mins
- 21.8 MB
Using Heroicons
- 3 mins
- 39.7 MB
Deploy to Heroku
- 3 mins
- 38.8 MB
Extras
StimulusReflex Patterns