Build a Dynamic Search With Stimulus.js and Rails 6

Understand the essentials of Stimulus to jump-start your app

Maria Schuessler
The Startup

--

Photo by Andrew Ridley on Unsplash

Before 2018, the Rails framework was stuck in the past. There was a new, dynamic JavaScript way to separate browser-side and server-side development. The web was suddenly built not out of divs, but out of components. It was a faster, more modular approach. Then, the team behind Rails released Stimulus.

Rails 6 integrates beautifully with Turbolinks, which speed up web applications by intercepting HTML requests via HTML. However, the downside of Turbolinks is that they wipe out the entire <body> of the page. This is where StimulusJS comes in.

If you haven’t heard of it before, Stimulus is a lightweight JavaScript framework by the creators of Rails. Think of it like a lightweight React.js— or a less painful Angular.js. Stimulus works by creating a set of controllers to store state and refresh dynamic attributes of the page. I’ve put together a primer to using StimulusJS here, so make sure you are familiar with the framework before starting this search tutorial.

Step 1: Make the base application

The first steps are creating basic MVC for Rails —skip this if you already have an application. I’m setting up an application with PostgreSQL to…

--

--

Maria Schuessler
The Startup

Music Product @ TikTok | Former Full-Stack Dev | Editor of StirCrazy! Mag | London-based | skippingcustoms.com