Découverte d’Alpine JS
Développement web
Ils existent déjà plusieurs frameworks que beaucoup de personnes utilisent et aiment, parmi eux nous retrouvons React, Vue, Angular et Svelte. Il est donc naturel de se demander s’il est nécessaire de parler encore d’un autre framework. Aujourd’hui je vous invite à jeter un œil du côté d’AlpineJS, ainsi vous pourrez vous faire votre propre avis.
Récemment, avec l'avènement des frameworks CSS utilitaires tels que Tailwind CSS ou Basscss, c’est au tour d’Alpine JS de nous proposer quelque chose de similaire mais pour JavaScript.
Alpine JS késako ?
Alpine JS est un micro-framework JavaScript permettant de dynamiser des pages web en facilitant la création d’éléments interactifs tels que des fenêtres modales, un système d’onglets et bien plus.... Un composant s'écrit à l'aide de directives que l'on ajoute aux balises HTML et dont la syntaxe s'inspire très fortement du framework Vue.
Notre premier composant
Déclarer un élément Alpine JS, se fait à l’aide de la directive “x-data”, elle prend en valeur un objet permettant de définir les données nécessaires au bon fonctionnement du composant. Voici un composant qui affiche ou cache le message “Hello World!” quand on clique sur le bouton “Toggle” :
<!-- Alpine JS component -->
<div x-data=”{ isVisible: true }”>
<p x-show=”isVisible”>Hello World!</p>
<button type=”button” @click=”isVisible = !isVisible”>Toggle</button>
</div>
Dans cet exemple, la directive “x-show” prend en valeur le booléen “isVisible” permettant de définir l’état d’affichage du paragraphe “Hello World!’. Le bouton “Toggle” quant à lui écoute l'événement du clique de la souris à l’aide de l’élément @click. Celle-ci change la valeur du booléen "isVisible" par son contraire, affichant ou cachant le dit paragraphe selon son état d’origine.
Ce que j’en pense
A la différence de frameworks tels que Vue ou React qui eux fournissent tout un écosystème (compilateur, dom-virtuel…). Alpine JS se démarque par son minimalisme, sa portabilité, et son couplage très puissant avec Tailwind CSS, notamment pour les transitions. Voici quelques liens où vous trouverez mes créations AlpineJS ainsi que des aides afin que vous puissiez créer vos propres composants. En espérant que cette introduction à AlpineJS vous a plu, et surtout n'arrêtez jamais d’apprendre.