Symfony UX : Stimulus

Publié le par

En 2010, j’ai commencé ma carrière de développeur professionnel, en travaillant principalement avec PHP et Symfony pour le back-end. Parallèlement, j’utilisais JavaScript et jQuery pour le développement front-end. À l’époque, ces technologies étaient les piliers du développement web, offrant une grande flexibilité et une puissance sans égales.

Avec l’émergence et l’évolution rapide des frameworks front-end tels qu’Angular, React et Vue.js, le paysage du développement a considérablement évolué. Ne pouvant pas suivre toutes ces avancées de près, j’ai préféré concentrer mes efforts sur le back-end avec PHP et Symfony, tout en explorant les CMS/DXP autour de ces technologies. Cette orientation m’a permis de renforcer mes compétences côté serveur et d’approfondir ma compréhension des meilleures pratiques en infrastructure web.

Récemment, ma curiosité m’a poussé à explorer Stimulus JS, un outil intégré dans Symfony UX. Stimulus promet de simplifier l’enrichissement de nos interfaces utilisateurs sans les complexités des frameworks front-end plus lourds. Dans cet article, je vais partager mes découvertes sur Stimulus JS, en espérant que cela vous aidera à améliorer vos propres projets Symfony.

Sans trop parler ….

  • composer require symfony/stimulus-bundle
  • Stimulus tells us to build and return HTML from our server. then add any extra behavior we need via JavaScript.
  • The first is over here in assets/app.js. we’re now importing a new bootstrap.js
    1. That file starts the Stimulus application.
  • Open assets/app.js The built version of this file is included on every page on our site. It loads bootstrap.js. The code inside this file looks a little weird, but its job is simple and important. It reads all of the files in our controllers/ directory and registers them with Stimulus as controllers. This is where the naming convention comes into play. When Stimulus sees a file called counter_controller, it registers that controller under the name counter. Then when a data-controller= »counter » element appears on the page, it knows which controller to use.
    • The data-controllerconnects this element to the controller class. Because we named the file counter_controller.js, the controller’s name internally in Stimulus is counter: it strips off the _controller.js
  • each time we add a new Stimulus controller – either by adding a new file to assets/controllers/, or via the controllers.json file when we install a new Symfony UX package – all the code from that controller – and any modules it imports – are added to the set of JavaScript that’s included and downloaded on every page.
  • When you set fetch to lazy, instead of importing the real controller and its dependencies, the stimulus-bridge library creates a tiny, « fake » controller. That controller waits for a data-controller element matching the controller name to be added to the page
  • Sometimes you might have a controller that’s only used on certain pages... so you don’t want to force your user to download it immediately on every page. If you have that situation, you can make your controller lazy. It’s the best. /* stimulusFetch: ‘lazy’ */
  • There are three main concepts to consider about Stimulus JS
    • Target
      • With target system we do not need find the element anymore. whenever we need to find something, it means that we need a target.
      • There are two important things about this line (event.currentTarget.classList.add(‘selected’))
        • First, when you listen to an event – or « action » in stimulus – the event object always has two similar properties: event.target and event.currentTarget. Sometimes these are the same element… and sometimes they’re not.
        • The other interesting thing on the line in our controller is classList. This is a property on the native Element object and… as you can see, it’s just an easy way to add or remove class. No jQuery or other fancy tools needed.
    • Actions
      • Anytime you need to listen to an event, like click, submit, keyup or anything else, you can use an action instead.
      • Stimulus has a default event name for the most common elements. If you add data-action to an a tag or a button, the default event name is click. If you add one to a <form> element, it defaults to submit. And if you add one to an <input> or <textarea>, it defaults to input
    • Values API
      • The values API allows you to link DOM element values to Stimulus controller objects
      • This makes managing state and user interactions in a web application easier and more efficient because you don’t have to directly manipulate the DOM to read or write form values. Instead, you can simply use the values API to bind these values to Stimulus controllers, making your code more modular and easier to maintain.
        • Here’s how it works. Step 1, add a static values property set to an object. Each « value » that we want to allow to be passed into our controller will be a key in this object. So we want a colorId value. Set this to the type that this will be. In our case, colorId will be a Number.

En explorant Symfony UX : Stimulus, nous avons découvert une approche élégante et simplifiée pour enrichir nos interfaces utilisateur sans la complexité des frameworks front-end plus lourds. Les trois concepts clés de Stimulus – sa simplicité, son adoption de la convention over configuration, et sa modularité – nous offrent des outils puissants pour améliorer nos projets Symfony.

Bien que Stimulus ne soit peut-être pas la solution parfaite pour tous les cas d’utilisation, il offre certainement une alternative attrayante pour les développeurs Symfony qui recherchent une solution plus légère et plus intuitive pour le développement front-end. En intégrant judicieusement Stimulus dans nos flux de travail, nous pouvons améliorer l’expérience de développement et la performance de nos applications web.

Il convient de noter également que Symfony UX propose une gamme de contrôleurs prêts à l’emploi, facilitant ainsi l’intégration de Stimulus dans nos projets Symfony existants.

De plus, pour une installation rapide et facile, nous pouvons utiliser yarn add directement depuis https://www.stimulus-components.com/.

Quelques références :