• 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! ๐Ÿ˜ฑ

    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. ๐Ÿ‘)

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

    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.

    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

    Website

    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:
    • 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.

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

    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

    Add a new task
    • 7 mins
    • 114 MB
    Preview
    Clear the form
    • 7 mins
    • 137 MB
    More lifecycle methods
    • 5 mins
    • 74.5 MB

    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
    • 10 mins
    • 173 MB
    Preview
    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
    • 10 mins
    • 181 MB
    Preview
    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!

      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:
      • 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.

      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.

      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

      Add a new task
      • 7 mins
      • 114 MB
      Preview
      Clear the form
      • 7 mins
      • 137 MB
      More lifecycle methods
      • 5 mins
      • 74.5 MB

      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
      • 10 mins
      • 173 MB
      Preview
      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
      • 10 mins
      • 181 MB
      Preview
      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