Ma recherche du framework Javascript débouche sur un nouveau produit, que j’espère être le dernier. Dans cet article, on va s’intéresser à Stimulus.

Introduction

Dans cet article, on va s’intéresser à Stimulus, qui promet le minimum vital pour gérer une interface web (two way binding et gestion d’événements).

Les promesses

Stimulus se veut modeste et ne cherche pas à remplacer le rendu des pages HTML. Son objectif est, au contraire, d’ajouter les comportements nécessaires pour obtenir une interface fonctionnelle avec un minimum d’efforts.

Je trouve cette approche très intéressante pour plusieurs raisons:

  • tout le monde ne veut pas intégrer React, Angular ou autre Vue dans son projet.
  • tout le monde n’a pas la possibilité d’utiliser du Server Side Rendering dans son projet.
  • Pourquoi, finalement, se traîner la syntaxe JSX et perdre la possibilité de déléguer la réalisation des pages HTML?
  • Pourquoi toujours ajouter des couches complexes quand on peut obtenir le même résultat plus simplement? (ça facilitera la maintenance).

Les fonctionnalités proposées

Les fonctionnalités proposées sont peu nombreuses en comparaison des autres frameworks mais elles sont suffisantes pour obtenir un résultat satisfaisant.

Le contrôleur

Chaque page HTML devra être accompagnée d’une classe Javascript dont le rôle est de centraliser les fonctions nécessaires pour réagir aux événements et gérer les données.
Le lien s’effectue depuis le HTML, en ajoutant l’attribut data-controller="jsClass" sur le tag HTML qui va contenir l’ensemble des éléments devant utiliser ce contrôleur.

Réaction aux évènements

Ici c’est l’attribut data-action qui permet de définir l’interaction avec le contrôleur. Sa forme est la suivante: data-action="evenement@cible->contrôleur#méthode"
Stimulus propose les habituels évènements permettant de détecter un clic, un changement de valeur dans un champ (bien fichu puisqu’on peut même savoir si l’utilisateur efface des caractères), un changement dans le fenêtre et surtout permet de gérer des évènements personnalisés.

Gestion des données

Le lien entre champ dans la page et variable du contrôleur s’établit avec l’attribut data-<contrôleur>-target. Il faut garder en tête que, contrairement à d’autres frameworks, le “two way binding” n’est pas automatique. Si on modifie la valeur du champ, le contrôleur n’est pas avertit et l’inverse est également vrai. Pour obtenir un “TWB” à la Angular, il faut le déclarer soi-même.

Mise en œuvre

Installation

On peut installer Stimulus soit via NPM (beurk) soit directement en copiant le (oui oui “le”) fichier Javascript dans le projet puis en le chargeant dans la page HTML principale (méthode que j’ai choisie).

Page d’accueil

Comme dans mes articles sur Svelte et Angular, j’ai repris ma page d’accueil et l’ai adapté à Stimulus.

Code HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<main
        data-controller="home"
        data-home-shown-class="ged-visible"
        data-home-hidden-class="ged-hidden">
    <div class="dark-wrapper">
        <section class="hero is-fullheight is-transparent">
            <div class="hero-head">
            </div>
            <div class="hero-body">
                <div class="container">
                    <div class="columns is-vcentered">
                        <div class="column is-5 landing-caption">
                            <h1 class="title is-1 is-light is-semibold is-spaced main-title"><span>HomeGED</span></h1>
                            <h2 class="subtitle is-6 is-light is-thin"><span>Easily organize your household documents</span></h2>
                            <p>
                                <a data-action="click->home#gotoLogin" class="button is-primary is-fat is-bold is-rounded" tabindex="01"><span>Log in</span>&nbsp;<i class="fas fa-sign-in-alt" aria-hidden="true"></i></a>
                                <a href="#" class="button is-fat is-bold is-rounded" tabindex="02"><span>Register</span>&nbsp;<i class="fas fa-user" aria-hidden="true"></i></a>
                            </p>
                        </div>
                        <div class="column is-7">
                            <figure class="image">
                                <img src="project/fragments/home/home/home.jpg" class="ged-home-illu">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

Les deux attributs en bleu (“data-controller” et “data-action”) font le lien avec le contrôleur Javascript.

Code Javascript

1
2
3
4
5
6
7
8
9

import { Controller } from '../hotwired/stimulus.js';
class HomePresenter extends Controller {

    gotoLogin() {
        alert('Going to login page!);
    };
};

export { HomePresenter };

Configuration de Stimulus

Il faut déclarer le contrôleur à Stimulus afin qu’il puisse router les évènements correctement. Ici, je vous présente un extrait du fichier index.js:

1
2
3
4
5

import { Application, Controller } from './frameworks/hotwired/stimulus.js';
import { HomePresenter } from './project/home.js';

window.Stimulus = Application.start();
Stimulus.register('home', HomePresenter);

En bleu, il s’agit du nom logique du contrôleur qu’on doit utiliser dans le HTML. En rouge, il s’agit de son type Javascript.

Explications

Dans la page HTML, le bloc principal est lié au contrôleur “home”, de type HomePresenter. Lorsqu’on clique sur le bouton “Log in”, Stimulus va exécuter la méthode “gotoLogin” du contrôleur “home”.

Que rajouter à Stimulus?

En l’état, je pense qu’il faut surtout laisser Stimulus comme il est, c’est à dire un jQuery léger mais moderne.
Par contre, il est évident que ce framework est parfaitement incomplet pour réaliser une application complète. Il faut donc s’en servir comme base de travail et lui adjoindre les notions manquantes (formulaires, CRUD, gestion des vues). Comme on l’a déjà vu, il est important d’écrire son framework d’abstraction afin d’unifier les pratiques et c’est en cela que Stimulus est un bon candidat pour un projet d’envergure: les notions manquantes ne sont pas très complexes à mettre en œuvre et on ne risque pas d’écrire du code qui irait à contrario des pratiques proposées par le framework.

Conclusion

Stimulus semble, pour l’instant, répondre à mes besoins: j’ai réussi à ajouter la notion de Modèle, Vue et Présenteur (pattern MVP) ainsi que de formulaire de saisie. A suivre donc.

Commentaires

C’est par ici