Catégories
Plugin et site web

Une introduction à Stimulus.js – Smashing Magazine

A propos de l'auteur

Mike est un développeur Ruby on Rails basé dans le sud du Royaume-Uni, qui démarre actuellement sa propre startup. Il adore créer des applications extrêmement rapides,…
Plus à propos
Mike

Dans cet article, Mike Rogers vous présentera Stimulus, un cadre JavaScript modeste qui complète votre code HTML existant. À la fin, vous comprendrez les prémisses de Stimulus et pourquoi c'est un outil utile à avoir dans votre sac à dos.

Le Web évolue assez rapidement et il est difficile de choisir une approche pour votre interface qui se sentira sensible dans un an. Ma plus grande crainte en tant que développeur est de prendre un projet qui n'a pas été touché depuis un certain temps et de trouver la documentation de l'approche utilisée est inexistante ou difficile à trouver en ligne.

Il y a environ un an, j'ai commencé à utiliser Stimulus et je me sentais vraiment heureux du code que j'expédiais. C'est un ~ Bibliothèque de 30 Ko ce qui encourage de petites pépites de JavaScript réutilisables au sein de votre application, organisées de manière à laisser de petites indications dans votre code HTML accessible pour savoir où trouver le JavaScript auquel il est connecté. Cela permet de comprendre comment un morceau de JavaScript va interagir avec votre page presque comme lire un pseudocode.

Stimulus a été créé par l'équipe de Basecamp – ils ont récemment publié le HEY service de messagerie – pour aider à maintenir le JavaScript qu'ils écrivent pour leurs applications Web. Historiquement, Basecamp a été assez bon pour maintenir ses projets open source, donc je suis assez confiant que Stimulus a été testé à fond et sera maintenu pour les prochaines années.

Stimulus m'a permis de créer des applications d'une manière qui semble réutilisable et accessible. Bien que je ne pense pas que Stimulus prendra le contrôle du Web comme React et Vue, je pense que c'est un outil utile à apprendre.

Terminologie

Comme tous les frameworks, Stimulus a des termes préférés pour décrire certaines choses. Heureusement (et l'une des principales raisons pour lesquelles j'ai aimé Stimulus), il n'y en a que deux que vous devrez connaître:

  • Manette
    Il s'agit des instances de classes JavaScript qui sont les éléments constitutifs de votre application. Il est sûr de dire que lorsque nous parlons de contrôleurs de stimulation, nous parlons de classes JavaScript.
  • Identifiant
    Il s'agit du nom que nous utiliserons pour référencer notre contrôleur dans notre code HTML à l'aide d'un attribut de données commun aux bases de code Stimulus.

Sautons dans le stimulus!

Dans les quelques exemples suivants, je vais utiliser du code que vous pouvez déposer dans le navigateur pour commencer immédiatement via la bibliothèque distribuée via unpkg.com. Plus tard, je couvrirai l'approche du webpack qui est fortement encouragée car elle permet une meilleure organisation de votre code et est l'approche utilisée dans le manuel Stimulus.

La chaudière

Voir le Pen (The Boilerplate – Stimulus) (https://codepen.io/smashingmag/pen/abdjXvP) de Mike Rogers.

Voir le Pen The Boilerplate – Stimulus par Mike Rogers.

Une fois que vous aurez compris l'essentiel de l'extrait ci-dessus, vous aurez les connaissances nécessaires pour choisir un projet qui utilise Stimulus.

Assez génial, non? Voyons ce que tout fait!

application.start

Cette ligne indique à Stimulus d'ajouter les écouteurs à la page. Si vous l'appelez une seule fois en haut de votre page avant d'ajouter un code Stimulus, il renverra une instance du contrôleur Stimulus principal qui inclut la méthode register qui est utilisé pour informer Stimulus des classes auxquelles vous souhaitez vous connecter.

Contrôleurs

le data-controller L'attribut connecte notre élément HTML à une instance de notre classe JavaScript. Dans ce cas, nous avons utilisé l'identifiant «compteur» pour raccorder une instance du CounterController Classe JavaScript à notre div élément. Nous avons informé Stimulus de la connexion entre cet identifiant et le contrôleur via le application.register méthode.

Stimulus surveillera en permanence votre page lorsque des éléments avec cet attribut sont ajoutés et supprimés. Lorsqu'un nouveau morceau de HTML est ajouté à la page avec un data-controller , il initialisera une nouvelle instance de la classe de contrôleur appropriée, puis connectera l'élément HTML. Si vous supprimez cet élément de la page, il appellera le disconnect sur la classe du contrôleur.

Actions

Stimulus utilise un attribut de données data-action pour définir clairement quelle fonction du contrôleur sera exécutée. Utilisation de la syntaxe event->controller#function toute personne lisant le code HTML pourra voir ce qu'il fait. Ceci est particulièrement utile car il réduit le risque de code inattendu provenant d'autres fichiers, ce qui facilite la navigation dans la base de code. Quand j'ai vu l'approche que Stimulus encourage pour la première fois, c'était presque comme lire un pseudocode.

Dans l'exemple ci-dessus, lorsque le bouton déclenche l'événement «clic», il sera transmis à la addOne fonction au sein de notre contrôleur "compteur".

Cibles

Les cibles sont un moyen de définir explicitement quels éléments seront disponibles pour votre contrôleur. Historiquement, j'ai utilisé un mélange d'ID, de noms de classes CSS et d'attributs de données pour y parvenir, donc avoir un seul "C'est la façon de le faire" qui est si explicite rend le code beaucoup plus cohérent.

Cela nécessite de définir vos noms cibles dans votre classe de contrôleur via le targets fonction et en ajoutant le nom à un élément via le data-target.

Une fois que vous avez configuré ces deux éléments, votre élément sera disponible dans votre contrôleur. Dans ce cas, j'ai configuré la cible avec le nom "sortie" et elle est accessible par this.outputTarget dans les fonctions de notre contrôleur.

Cibles en double

Voir le Pen (Duplicate Targets – Stimulus) (https://codepen.io/smashingmag/pen/ExPprPG) de Mike Rogers.

Voir les Pen Duplicate Targets – Stimulus de Mike Rogers.

Si vous avez plusieurs cibles avec le même nom, vous pouvez y accéder en utilisant la version plurielle de la méthode target, dans ce cas lorsque j'appelle this.outputTargets, il retournera un tableau contenant mes deux divs avec l'attribut data-target="hello.output".

Types d'événements

Vous écoutez les événements que vous pourriez généralement attacher via la méthode JavaScript addEventListener. Ainsi, par exemple, vous pouvez écouter lorsqu'un bouton est cliqué, un formulaire est soumis ou une entrée est modifiée.

Voir le Pen (Types d'événements – Stimulus) (https://codepen.io/smashingmag/pen/wvMxNGJ) de Mike Rogers.

Voir les types d'événements Pen – Stimulus par Mike Rogers.

Écouter window ou document événements (tels que le redimensionnement ou la mise hors ligne de l'utilisateur), vous devez ajouter «@window» ou «@document» au event type (par ex. resize@window->console#logEvent appellera la fonction logEvent) sur le console contrôleur lorsque la fenêtre est redimensionnée.

Il existe un moyen raccourci pour attacher des événements courants, où vous pouvez omettre le type d'événement et il a une action par défaut pour le type d'élément. Cependant, je déconseille fortement d'utiliser le raccourci d'événement, car cela augmente la quantité d'hypothèses qu'une personne qui connaît moins Stimulus doit faire à propos de votre code.

Utilise plusieurs contrôleurs dans le même élément

Très souvent, vous souhaiterez peut-être diviser deux éléments de logique en classes distinctes, mais les faire apparaître proches les uns des autres dans le code HTML. Stimulus vous permet de connecter des éléments à plusieurs classes en plaçant des références aux deux dans votre code HTML.

Voir le Pen (Multiple Controllers – Stimulus) (https://codepen.io/smashingmag/pen/XWXBOjy) de Mike Rogers.

Voir le Pen Multiple Controllers – Stimulus de Mike Rogers.

Dans l'exemple ci-dessus, j'ai configuré un basket objet qui se préoccupe uniquement de compter le nombre total d'articles dans le panier, mais a également ajouté un child objet qui indique le nombre de sacs par article.

Passer des données à votre objet

Voir le Pen (Passing Data – Stimulus) (https://codepen.io/smashingmag/pen/mdVjvOP) de Mike Rogers.

Voir le Pen Passing Data – Stimulus de Mike Rogers.

Stimulus fournit les méthodes this.data.get et this.data.set au sein de la classe du contrôleur, cela vous permettra de modifier les attributs de données qui se trouvent dans le même espace de noms que l'identifiant. J'entends par là si vous voulez transmettre des données à votre contrôleur de stimulus à partir de votre HTML, ajoutez simplement un attribut comme data-(identifier)-a-variable à votre élément HTML.

En appelant this.data.set, il mettra à jour la valeur dans votre code HTML afin que vous puissiez voir le changement de valeur lorsque vous inspectez l'élément à l'aide des outils de développement de votre navigateur.

L'utilisation d'attributs de données à espace de noms est un très bon moyen d'aider à clarifier clairement quel attribut de données correspond à quel morceau de code.

Initialiser, connecté, déconnecté

Au fur et à mesure que votre application se développe, vous devrez probablement vous connecter à des «événements de cycle de vie» pour définir les paramètres par défaut, récupérer les données ou gérer la communication en temps réel. Stimulus a trois méthodes intégrées qui sont appelées tout au long du cycle de vie d'une classe Stimulus.

Voir le stylo (initialiser, connecté, déconnecté – stimulation
) (https://codepen.io/smashingmag/pen/ZEQjwBj) par Mike Rogers.

Voir le Pen Initialize, Connected, Disconnected – Stimulus de Mike Rogers.

Lorsque Stimulus voit un élément avec une correspondance data-controller , il créera une nouvelle version de votre contrôleur et appellera le initialize fonction. Cela s'exécutera souvent lors du premier chargement de la page, mais sera également exécuté si vous deviez ajouter un nouveau code HTML à votre page (par exemple via AJAX) contenant une référence à votre contrôleur. Il ne s'exécutera pas lorsque vous déplacez un élément vers une nouvelle position dans votre DOM.

Une fois qu'une classe a été initialisée, Stimulus la connectera à l'élément HTML et appellera le connect fonction. Il appellera également connect si vous deviez déplacer un élément dans votre DOM. Donc, si vous deviez prendre un élément, le supprimer d'un élément, puis l'ajouter ailleurs, vous ne remarqueriez que connect sera appelé.

le disconnect La fonction sera exécutée lorsque vous supprimerez un élément de votre page, donc par exemple, si vous deviez remplacer le corps de votre code HTML, vous pourriez détruire tout code qui pourrait devoir être réexécuté si l'élément n'est pas dans la même position . Par exemple, si vous aviez un éditeur WYSIWYG sophistiqué qui ajoute beaucoup de code HTML supplémentaire à un élément, vous pouvez le ramener à son état d'origine lorsque disconnect a été appelé.

Hériter de la fonctionnalité

À l'occasion, vous souhaiterez peut-être partager une petite fonctionnalité commune entre vos contrôleurs Stimulus. Ce qui est cool avec Stimulus, c'est que (sous le capot) vous connectez des classes JavaScript un peu vanilleuses à des éléments HTML, donc la fonctionnalité de partage devrait vous sembler familière.

Voir le Pen (fonctionnalité d'héritage – Stimulus) (https://codepen.io/smashingmag/pen/JjGBxbq) de Mike Rogers.

Voir la fonctionnalité Pen Inheriting – Stimulus de Mike Rogers.

Dans cet exemple, j'ai configuré une classe parent nommée ParentController, qui est ensuite étendu par une classe enfant nommée ChildController. Cela m'a permis d'hériter des méthodes du ParentController donc je n'ai pas eu à dupliquer de code dans mon ChildController.

L'utiliser en production

J'ai montré ci-dessus quelques exemples assez autonomes de la façon d'utiliser Stimulus, qui devraient vous donner un avant-goût de ce que vous pouvez réaliser. J'ai également pensé que je devrais parler de la façon dont je l'utilise dans la production et comment cela a fonctionné pour moi.

Webpack

Si vous utilisez Webpack, vous allez vous régaler! Stimulus a été entièrement conçu pour être utilisé avec Webpack. Leur documentation contient même un joli kit de démarrage pour Webpack. Cela vous permettra de diviser vos contrôleurs en fichiers séparés et Stimulus décidera du nom correct à utiliser comme identifiant.

Vous n'avez pas besoin d'utiliser le webpack si vous souhaitez utiliser Stimulus, mais cela nettoie l'expérience un tas. Personnellement, Stimulus était la bibliothèque qui m'a aidé à me familiariser avec Webpack et à vraiment ressentir la valeur qu'il offrait.

Conventions relatives aux noms de fichiers

J'ai mentionné dans l'introduction de cet article que j'aimais bien utiliser Stimulus parce qu'il semblait organisé. Cela devient vraiment apparent lorsque vous le combinez avec Webpack, qui permet le chargement et l'enregistrement automatiques des contrôleurs.

Une fois que vous avez configuré Stimulus dans Webpack, il vous encourage à nommer vos fichiers comme (identifier)_controller.js, où l'identifiant est ce que vous passerez dans vos codes HTML data-controller attribut.

Au fur et à mesure que votre projet se développe, vous pouvez également déplacer vos contrôleurs Stimulus dans des sous-dossiers. De manière magique, Stimulus convertira les traits de soulignement en tirets et les barres obliques de dossier en deux tirets, qui deviendront alors votre identifiant. Ainsi, par exemple, le nom de fichier chat/conversation_item_controller.js aura l'identifiant chat--conversation-item.

Maintenir moins de JavaScript

L'une de mes citations préférées est «Le meilleur code n'est pas du tout un code», j'essaie d'appliquer cette approche à tous mes projets.

Les navigateurs Web évoluent beaucoup, je suis assez convaincu que la plupart des choses dont j'ai besoin pour écrire JavaScript aujourd'hui seront normalisées et intégrées dans le navigateur au cours des 5 prochaines années. Un bon exemple de cela est l'élément de détails, lorsque j'ai commencé le développement, il était très courant de devoir coder manuellement cette fonctionnalité à la main à l'aide de jQuery.

En conséquence, si je peux écrire du HTML accessible avec une pincée de JavaScript pour répondre à mes besoins, avec la mentalité de «Cela fait le travail aujourd'hui, mais dans 5 ans, je veux le remplacer facilement» je serai heureux développeur. Ceci est beaucoup plus réalisable lorsque vous avez écrit moins de code pour commencer, auquel Stimulus se prête.

HTML d'abord, puis JavaScript

Un aspect que j'aime beaucoup dans l'approche encouragée par Stimulus, c'est que je peux me concentrer sur l'envoi de code HTML à mes utilisateurs, qui est ensuite légèrement amélioré avec JavaScript.

J'ai toujours aimé utiliser les premières millisecondes de l'attention d'un utilisateur pour obtenir ce que je dois partager avec lui – devant lui. Ensuite, inquiétez-vous de configurer la couche d'interaction pendant que l'utilisateur peut commencer à traiter ce qu'il voit.

En outre, si le JavaScript devait échouer pour une raison quelconque, l'utilisateur peut toujours voir le contenu et interagir avec lui sans JavaScript. Par exemple, au lieu de soumettre un formulaire via AJAX, il sera envoyé via une demande de formulaire traditionnelle qui recharge la page.

Conclusion

J'adore créer des sites qui n'ont besoin que de petites touches de JavaScript maintenable pour améliorer l'expérience utilisateur, parfois il est agréable de simplement créer quelque chose de plus simple. Avoir quelque chose de léger est super, j'aime vraiment que sans trop de charge cognitive, il soit assez clair comment organiser vos fichiers et configurer de petits chapelures qui indiquent comment le JavaScript fonctionnera avec un morceau de HTML.

J'ai vraiment aimé travailler avec Stimulus. Il n'y en a pas trop, donc la courbe d'apprentissage est assez douce. Je suis assez confiant que si je transmettais mon code à quelqu'un d'autre, ils seraient des développeurs heureux. Je vous recommande fortement de l'essayer, même si c'est juste par pure curiosité.

L'éléphant dans la pièce est de savoir comment il se compare à React et Vue, mais dans mon esprit, ce sont des outils différents pour une exigence différente. Dans mon cas, je restitue souvent du HTML à partir de mon serveur et j'ajoute un peu de JavaScript pour améliorer l'expérience. Si je faisais quelque chose de plus complexe, j'envisagerais une approche différente (ou repousserais les exigences pour aider à garder mon code simple).

Lectures complémentaires

  • Page d'accueil de Stimulus
    Ils ont un manuel fantastique qui approfondit les concepts que j'ai décrits ci-dessus.
  • Référentiel Stimulus GitHub
    J'ai tellement appris sur le fonctionnement de Stimulus en explorant leur code.
  • Cheatsheet Stimulus
    Le manuel est résumé sur une seule page.
  • Forum de stimulation
    Voir d'autres personnes travailler avec Stimulus m'a donné vraiment l'impression qu'il est utilisé à l'état sauvage.
Smashing Editorial(sh, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *