Build a Dynamic Search With Stimulus.js and Rails 6
Understand the essentials of Stimulus to jump-start your app
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…