Une introduction à Stimulus.js

Le Web se déplace assez rapidement et choisit une approche pour votre interface qui se sentira sensible dans un an est délicat. 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 qu'ils utilisent est inexistante ou difficile à trouver en ligne.

Il y a environ un an, J'ai commencé à utiliser Stimulus et je me suis senti vraiment content du code que j'expédiais. C'est une bibliothèque ~ 30 Ko qui encourage les petites pépites de JavaScript réutilisables au sein de votre application, organisées de telle sorte qu'elle laisse peu d'indications dans votre HTML accessible pour savoir où trouver le JavaScript auquel elle est connectée. 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 service de messagerie HEY – pour aider à maintenir le JavaScript qu'ils écrire pour leurs applications Web. Historiquement, Basecamp a été assez bon pour maintenir leurs 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 construire des applications d'une manière qui se sent 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 pris goût à Stimulus), il n'y en a que deux que vous devrez connaître:

• Contrôleur
  Cela fait référence aux 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.
• Identifier
  C'est le nom que nous utiliserons pour référencer notre contrôleur dans notre code HTML à l'aide d'un attribut de données commun à

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 de stimulation.

The Boilerplate

] Une fois que vous aurez compris l'essentiel de l'extrait ci-dessus, vous aurez les connaissances nécessaires pour être à l'aise avec 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 principal Stimulus qui inclut la méthode registre qui est utilisée pour informer Stimulus des classes vous souhaitez vous y connecter.

Contrôleurs

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

Stimulus surveillera en permanence votre page lorsque des éléments avec cet attribut sont ajoutés et supprimés. Lorsqu'un nouvel élément HTML est ajouté à la page avec un attribut contrôleur de données il initialise une nouvelle instance de la classe de contrôleur appropriée, puis connecte l'élément HTML. Si vous supprimez cet élément de la page, il appellera la méthode déconnecter sur la classe de contrôleur.

Actions

Stimulus utilise un attribut de données data-action pour clairement définir quelle fonction du contrôleur sera exécutée. En utilisant 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 pour la première fois l'approche encouragée par Stimulus, cela ressemblait presque à la lecture d'un pseudocode.

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

Cibles

Les cibles sont un moyen de définir explicitement les éléments qui 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 définir vos noms cibles dans votre classe de contrôleur via la fonction cibles et ajouter le nom à un élément via la cible de données .

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

.

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 ça va retourne 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 soumis ou une entrée modifiée.

Pour écouter la fenêtre ou ] documenter les événements (tels que le redimensionnement ou la mise hors ligne de l'utilisateur), vous devrez ajouter "@window" ou "@document" au type d'événement (par exemple resize @ window-> console # logEvent appellera la fonction logEvent ) sur le contrôleur de la console lorsque la fenêtre est redimensionnée.

Il existe un raccourci pour attacher événements communs 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

Assez souvent, vous voudrez peut-être décomposer 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 HTML.

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

Transmission de données à votre objet

.

Stimulus fournit les méthodes this.data.get et this.data.set dans la classe de contrôleur, cela vous permettra de changer des 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.

Lorsque vous appelez this.data.set il mettra à jour la valeur dans votre code HTML afin que vous puissiez voir la modification 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 une très bonne façon d'aider indiquez clairement quel attribut de données correspond à quel morceau de code.

Initialiser, Connecter, Déconnecter

Au fur et à mesure que votre application se développe, vous devrez probablement vous connecter à des «événements du cycle de vie» pour définir les valeurs 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.

Lorsque Stimulus voit un élément avec un contrôleur de données correspondant ]il créera une nouvelle version de votre contrôleur et appellera la fonction initialiser . 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éplacerez un élément vers une nouvelle position dans votre DOM.

Après l'initialisation d'une classe, Stimulus la connectera à l'élément HTML et appellera la fonction connect . Il appellera également connect si vous deviez déplacer un élément dans votre DOM. Donc, si vous deviez prendre un élément, le retirer d'un élément, puis l'ajouter ailleurs, vous remarqueriez que connect sera appelé.

La fonction déconnecter fonctionnera être exécuté lorsque vous supprimez un élément de votre page.Par exemple, si vous remplacez le corps de votre code HTML, vous pouvez supprimer 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 disposiez d'un éditeur WYSIWYG sophistiqué qui ajoute beaucoup de code HTML supplémentaire à un élément, vous pouvez le ramener à son état d'origine lorsque la déconnexion a été appelée.

Hériter de la fonctionnalité

Parfois, vous voudrez peut-être partager une petite fonctionnalité commune entre vos contrôleurs Stimulus. La chose intéressante à propos de Stimulus est que (sous le capot) vous connectez des classes JavaScript un peu vanillées à des éléments HTML, donc la fonctionnalité de partage devrait vous sembler familière.

Dans cet exemple, j'ai défini une classe parent nommée ParentController qui est ensuite étendue 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 le code dans mon ChildController .

Utilisation en production

J'en ai démontré quelques-unes assez autonomes des exemples d'utilisation de Stimulus ci-dessus, qui devraient vous donner un aperçu de ce que vous pouvez réaliser. J'ai aussi pensé que je devrais parler de la façon dont je l'utilise en production et de la façon dont 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 webpack si vous voulez 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 à ressentir vraiment 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 automatique et l'enregistrement 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 votre attribut HTML data-controller .

À 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 est pas de code du tout ", 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 deviendront aujourd'hui standardisé et intégré dans le navigateur au cours des 5 prochaines années. Un bon exemple de ceci 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.

Par conséquent, 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 un développeur heureux. 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 HTML en aval de mes utilisateurs, qui est ensuite légèrement amélioré avec JavaScript.

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

De plus, 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 soumis 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 , il est parfois agréable de simplement construire quelque chose qui semble 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 mettre en place de petits chapelures qui suggèrent comment le JavaScript fonctionnera avec un morceau de HTML.

J'ai vraiment apprécié de 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 recommanderais 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 s'empile par rapport aux goûts de React et Vue, mais dans mon esprit, ils sont différents outils 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
• Référentiel Stimulus GitHub
  J'ai tellement appris sur le fonctionnement de Stimulus en explorant leur code.
• Stimulus Cheatsheet
  Le manuel résume sur une seule page.
• Forum Stimulus
  Le fait de voir d'autres personnes travaillant avec Stimulus m'a vraiment donné l'impression qu'il est utilisé à l'état sauvage.

(sh, ra, yk, il) [19659099]

Le meilleur outil 2023 pour ta croissance Instagram !

Source link

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

Articles similaires