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.

AttributUtilisation
x-dataC’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-bindCet 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-textCet attribut permet de changer le texte affiché en utilisant le contenu de la variable indiquée.
x-htmlMê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-showPermet de changer la visibilité d’un élément.
x-transitionGère les changement de classes CSS afin de produire une transition.
x-forPermet la répétition d’un bloc HTML selon le contenu d’une variable.
x-ifPermet d’ajouter ou retirer un bloc HTML selon le contenu d’une variable.
x-initExécute la méthode désignée lors de l’initialisation par Alpine.
x-effectExécute la méthode désignée lorsque le contenu d’une variable change.
x-refAjoute une référence sur un élément, qui sera utilisable avec la propriété $ref.
x-cloakPermet de cacher un bloc HTML tant qu’Alpine n’a pas finit l’initialisation.
x-ignoreEmpê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
$storeRécupère le contenu stocké par la méthode “Alpine.store()
$elIl s’agit de la référence sur l’élément DOM courant.
$dispatchÉmet un événement personnalisé.
$watchPermet de surveiller le changement de valeur d’une variable et d’exécuter un code.
$refsPermet d’accéder à un élément en utilisant sa référence (voir attribut x-ref)
$nextTickExé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éthodeUtilisation
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