Except that this stack doesn't come from nowhere, in fact, it comes from the Ruby on Rails world, it's simply the default front-end provided with Rails (at least, in its 8.0 version).

Why this article

Being a big fan of this stack, I decided to really get interested in the Ruby on Rails world, and so the application I'm currently developing is a Ruby on Rails application.

This application is simply the little sister of ViteUneTable, but this time, for hairdressers...

Its little name is "Coupéo", the .com is already taken 😛...

To successfully carry out this development, I had to reuse some of my Stimulus controllers, update others and finally create new ones.

The fact that Rails and Symfony share the same front-end is great for learning Rails, I only have the Ruby and backend part to master. As for Turbo and Stimulus, I'm already at home.

And in fact, even if Ruby is confusing at first, it's a real pleasure once you're into it (and thanks to AIs for their help in understanding how it all works).

Load controllers asynchronously

The problem with Stimulus controllers is that they can load other libraries. For example, you can perfectly load React from a Stimulus controller.

So, if your big application has lots of controllers and these controllers themselves have big dependencies, you're loading 1 billion Javascript at the beginning of the page.

So, you need to load all of this asynchronously, we only load when we need it.

On Symfony

From my research, it hasn't changed, you need to add a comment "/* stimulusFetch: 'lazy' */" above your controller.

Very simple and effective. After that, I must say that the project that uses Symfony-UX that I have still uses webpack and I imagine that things have probably changed with href="https://symfony.com/doc/current/frontend/asset_mapper.html" target="_blank">AssetMapper.

On Ruby on Rails

Well, let's not lie to ourselves, this is more recent, so I'm sure about this...

At the time of writing, I'm on Ruby on Rails 8.0.

Modify importmap.rb

First, we'll tell importmap not to preload the Stimulus controllers on the first page load.

By default, importmap imports absolutely everything, so the browser starts downloading everything, it can quickly become ultra heavy.

Very simple, where we define our Stimulus controllers, we define "preload: false".

Modify the JavaScript

This happens in the file: app / javascript / controllers / index.js

If you just installed Rails, you'll see that you don't have "lazyLoadControllersFrom", by default it's "eager".

By replacing things as I just told you, you'll load your controllers when Stimulus sees them in the HTML.

The front-end of my next applications will be Open Source

In the way Ruby on Rails 8.0 works, there is no JavaScript code obfuscation, the server sends you the files as I wrote them.

I decided to completely keep this approach, I like the idea that people can see "how it works".

Where to find ready-to-use Stimulus controllers

Before sharing my controllers with you, I'd like to tell you about Stimulus Components...

You'll find many ready-to-use things on it, like an "auto submit" or an integration with Chart.js.

The controllers

Alright, it's in this section that you'll be able to find the controller code.

Hide a button when navigating in a Turbo Frame

Just like ViteUneTable, Coupéo's booking assistant is actually a Turbo Frame. Why change something that works? 🙂

The only thing is that in the header, I have a button that should only appear on the landing... I need it to disappear when the URL no longer matches.

For that, we intercept Turbo events...

A little demo?

A Stimulus controller that hides a button

And now, the code:

DaisyUI and an accordion

Let's start with the controller I use on Coupéo, for the mobile version of appointment time selection.

It's a super annoying interface to make on mobile but with a small Stimulus controller, it's easy.

A Stimulus controller that creates an accordion with daisyUI

And here's the code:

OpenFreeMap only when approaching the element...

This summer, LFMaps came out, it's simply a hosted instance of OpenFreeMap...

And I personally needed it for Coupéo 😁.

On the salons' landing page, you can see the map and where they are located. A demo?

A Stimulus controller that displays an OpenFreeMap

And here's the code, by default it loads LFMaps tiles.

Should we update the intl-tel-input controller? 😛

You remember... it was in 2022.

Well, its new version has arrived, working with the latest version of intl-tel-input...

What does it look like? 😛

A Stimulus controller that uses intl-tel-input

And the code? Watch out for the "Utils" URL. Also, to make all this compatible with Rails, I chose the easy way and put the translation directly in the file.

Make sure to make the .webp "flags" files accessible.

Stripe and Stimulus...

Let's talk about the anti no-show feature of ViteUneTable and Coupéo... 🙂

A little demo? 😁

And the controller code. Note here that I use "window.Turbo", because Rails by default exposes it with the package "@hotwired/turbo-rails".

Conclusion

Here we are, the controllers are given to you as is, as they are in Coupéo...

You'll need to adapt them to your needs... but it gives you a base if you want.

Have a great day and see you next time! 😁