Dans cet article, on part à la découverte d’un nouveau framework Javascript: Alpine.js
Introduction
Toujours dans ma recherche du framework Javascript parfait, je vais tester Alpine.js plutôt prometteur.
Les promesses
Alpine se veut léger, robuste et minimal. Contrairement à Angular, React, Ember ou Svelte, Alpine n’impose pas un flux de travail avec node.js: Alpine cherche à remplacer jQuery avec un set de 15 attributs HTML, 6 propriétés et 2 méthodes. Pour le côté minimal, c’est réussi.
Fonctions de base
Attributs
Ces 15 attributs viennent compléter le code HTML afin de faire le lien avec le code Javascript, comme dans la plupart des frameworks Javascript.
Les attributs sont les suivants: x-data, x-bind, x-on, x-text, x-html, x-model, x-show, x-transition, x-for, x-if, x-init, x-effect, x-ref, x-cloak, x-ignore.
Attribut | Utilisation |
---|---|
x-data | C’est le point de départ puisque c’est grâce à cet attribut qu’on définit le composant Javascript qui va traiter les données et les événements. |
x-bind | Cet attribut permet d’associer un changement en fonction d’une variable du composant. |
<div x-bind:class="! open ? 'hidden' : ''"></div> | |
Dans ce mini exemple, la classe CSS hidden est ajoutée dès que la variable open vaut false . | |
x-on | “x-on” permet d’intercepter les événements tels que les clics qui se produisent sur les éléments HTML. |
x-text | Cet attribut permet de changer le texte affiché en utilisant le contenu de la variable indiquée. |
x-html | Même principe que “x-text” mais pour remplacer le contenu HTML d’un élément. |
x-model | Établit le lien bidirectionnel entre un champ HTML et une variable. |
x-show | Permet de changer la visibilité d’un élément. |
x-transition | Gère les changement de classes CSS afin de produire une transition. |
x-for | Permet la répétition d’un bloc HTML selon le contenu d’une variable. |
x-if | Permet d’ajouter ou retirer un bloc HTML selon le contenu d’une variable. |
x-init | Exécute la méthode désignée lors de l’initialisation par Alpine. |
x-effect | Exécute la méthode désignée lorsque le contenu d’une variable change. |
x-ref | Ajoute une référence sur un élément, qui sera utilisable avec la propriété $ref . |
x-cloak | Permet de cacher un bloc HTML tant qu’Alpine n’a pas finit l’initialisation. |
x-ignore | Empêche Alpine d’initialiser le bloc HTML désigné. |
Description des attributs
Propriétés
Alpine propose 6 propriétés utilisables dans le code HTML pour manipuler certains éléments.
Propriété | Utilisation |
---|---|
$store | Récupère le contenu stocké par la méthode “Alpine.store() ” |
$el | Il s’agit de la référence sur l’élément DOM courant. |
$dispatch | Émet un événement personnalisé. |
$watch | Permet de surveiller le changement de valeur d’une variable et d’exécuter un code. |
$refs | Permet d’accéder à un élément en utilisant sa référence (voir attribut x-ref ) |
$nextTick | Exécute une méthode lors de chaque “tick” (c’est à dire lorsque le browser dessine la page). |
Description des propriétés
Méthodes
En complément des attributs et propriétés à utiliser dans le code HTML, Alpine propose deux méthodes Javascript: Alpine.data()
et Alpine.store()
Méthode | Utilisation |
---|---|
Alpine.data() | Permet d’accéder au contenu d’un objet référencé par l’attribut x-data |
Alpine.store() | Permet de stocker une classe Javascript qui pourra ensuite être utilisée via la propriété $store |
Description des méthodes
Développement
Le développement avec Alpine est plutôt simple, même s’il faut s’habituer à une logique un peu différente (on est à la croisée des chemins entre un jQuery et un Vue.js, en gros) des autres frameworks. J’ai réalisée deux pages (une homepage et un écran de login), le code est assez léger et lisible donc la promesse est tenue. Cependant, ce framework fonctionne en “SSR” (Server Side Rendering) et donc se trouve limité à une fonctionnement dans Node.js.
Conclusion
Alpine est un framework léger, assez simple d’utilisation, qui remplacera sans gros souci jQuery. Par contre, son fonctionnement SSR en interdit l’usage dans des projets ne fonctionnant pas avec Node.js.
Ressources
- Le site Alpine: https://alpinejs.dev/
- Des exemples: https://www.alpinetoolbox.com/
- Communication inter-componsants: https://www.wittyprogramming.dev/articles/cross-component-communication-pattern-in-alpinejs/