Qu'est-ce que Alpine.js et comment l'utiliser ?

Le monde du développement web est chaotique – les frameworks apparaissent et disparaissent, et les choses peuvent être accablantes pour les nouveaux développeurs comme pour les plus expérimentés.

Contrairement à la plupart des frameworks de développement web, Alpine.js vise à être aussi simple que possible, tout en étant suffisamment puissant pour gérer des concepts tels que la réactivité et les effets de bord.

Démarrer avec Alpine.js

L’installation d’Alpine.js est assez simple. Il suffit d’inclure les éléments suivants script dans votre HTML :

 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Alternativement, vous pouvez installer Alpine.js dans votre projet en utilisant le Node Package Manager :

 npm install alpinejs

Réactivité dans Alpine.js

Créer un index.htm et ajoutez le code boilerplate suivant :

Lire Découvrez les Secrets de la Détection Moderne et des Enjeux Géopolitiques Actuels

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js</title>
</head>
<body>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>

Le reporter dans l’attribut script indique au navigateur de n’exécuter le script qu’une fois l’analyse du document terminée.

Alpine.js fournit plusieurs directives comme x-data qu’il utilise pour stocker des données et des x-texte qu’il utilise pour définir innerText du composant attaché. Pour utiliser ces directives, ajoutez le code suivant à votre code HTML.

 <div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
    My name is <strong x-text="name"></strong>
    and <i x-text="organisation"></i> is Awesome
</div>

La directive x-data stocke un objet avec les clés nom et organisation. Vous pouvez ensuite passer ces clés dans la directive x-text. Lorsque vous exécutez le code, Alpine.js remplit les valeurs :

Un onglet chrome avec des outils de développement ouverts.

Comment Alpine.js se compare à React

Alpine.js est un framework léger qui convient au développement de petits projets et de prototypes.

Dans les frameworks plus importants comme React, vous utilisez des crochets comme useEffect() pour gérer les effets de bord dans le cycle de vie du composant. Ce crochet exécute une fonction de rappel chaque fois qu’un des éléments du tableau de dépendances change :

 import {useEffect} from "React";

function MyComponent() {
    useEffect(() => {
        /* Callback function goes here */
    }, [ /* The dependency array is optional */ ]);
}

Pour gérer les effets de bord dans Alpine.js, vous pouvez utiliser la fonction x-effect . Par exemple, supposons que vous souhaitiez surveiller une variable et enregistrer sa valeur chaque fois qu’elle change :

 <div x-data="{number: 1}" x-effect="console.log(number)">
    <h1 x-text="number"></h1>
    <button @click="number = number + 1">Add new number</button>
</div>

La première chose que vous remarquerez est que vous n’avez pas besoin de spécifier une dépendance. Alpine écoutera simplement les changements dans toutes les variables passées à x-effect. L’effet @click incrémente la variable nombre de 1.

Rendu conditionnel dans Alpine.js

Rendre des éléments de manière conditionnelle est quelque chose que vous pouvez faire dans des frameworks comme React. Alpine.js vous permet également d’effectuer un rendu conditionnel des éléments. Il fournit un x-if et une directive spéciale modèle que vous pouvez utiliser pour effectuer un rendu conditionnel des éléments.

Créer un autre index.htm et ajoutez le même code de base que précédemment. Ajoutez le code suivant au corps du code HTML.

 <div x-data="{shown:true}">
    <button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>

    <template x-if="shown">
        <div>The quick brown fox jumped over the dog.</div>
    </template>
</div>

Le x-if est transmise à la directive modèle élément. C’est important car cela permet à Alpine.js de garder une trace d’un élément qui est ajouté ou supprimé de la page. L’élément modèle doit contenir un élément de niveau racine ; le code suivant enfreindrait cette règle :

 <template x-if="shown">
    <div>This element will be rendered just fine.</div>
    <div>This element will be ignored by Alpine.js</div>
</template>

Construire une application To-Do avec Alpine.js

Il est temps de combiner tout ce que vous avez appris jusqu’à présent et de construire une simple application de tâches avec un support de stockage local. Tout d’abord, créez un dossier et remplissez-le avec un fichier index.htm et un style.css . Ajoutez le code modèle dans le fichier index.htm et incluez une référence au fichier style.css fichier :

 <link rel="stylesheet" href="style.css">

Ne vous préoccupez pas du CSS ici, copiez simplement le fichier style.css du dépôt GitHub de ce projet.

Pour conserver les données après le rechargement de la page, vous avez besoin du fichier Alpine.js persister plugin. Ajouter la version CDN de ce plugin en tant que fichier script juste au-dessus de la version principale d’Alpine.js CDN :

 <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

Dans la balise corps définir un div avec un élément x-data directive. Cette directive doit contenir un tableau appelé allTasks. Ensuite, ajoutez un h1 avec le texte « Application To-Do ».

 <div x-data="{allTasks:$persist([])}">
    <h1>To-do Application</h1>
</div>

L’élément $persist est une enveloppe pour le plugin JavaScript localStorage API. Elle indique au navigateur de stocker le tableau dans le stockage local, de sorte que les données restent intactes même après le rechargement de la page. Ajouter un formulaire avec un soumettre qui empêche également l’action de soumission par défaut.

 <form @submit.prevent="
    ($refs.task.value.trim().length && !allTasks.map(x=>x.task).includes($refs.task.value.trim()))
       ? allTasks = [{task: $refs.task.value.trim(), id:Date.now(), done:false}].concat(allTasks)
        : $refs.task.value.trim() === '' 
            ? alert('Input value cannot be empty')
           : alert('Task added already.');
    $refs.task.value=""
">
</form>

La directive $refs permet d’accéder à l’élément DOM avec la clause « task » x-ref . Le code gère également une certaine validation et s’assure qu’il n’ajoute pas de chaînes vides ou de tâches en double à la liste. Avant de terminer le formulaire, ajoutez une directive entrée avec un élément x-ref de « task » et d’un espace réservé. Ajoutez ensuite un bouton et définissez son type à « submit ».

 <input type="text" x-ref="task">
<button type="submit">Add Task</button>

Ensuite, définissez une div avec la classe « items ». Cette div doit contenir deux autres divs : l’une avec la classe x-data L’une des deux divs doit être un tableau « non complété » et l’autre un tableau « complété ». Les deux divs doivent avoir un effet x et le tableau doit être enveloppé dans la directive $persist comme indiqué précédemment.

 <div class="items">
    <div x-data="{uncompleted:$persist([])}" x-effect="uncompleted = allTasks.filter(x=>x.done===false)">
    </div>
    
    <div x-data="{completed:$persist([])}" x-effect="completed=allTasks.filter(y=>y.done===true).reverse()">
    </div>
</div>

Dans la première div, ajouter un h3 avec le texte « Uncompleted ». Ensuite, pour chaque élément de la balise inachevé tableau, rendre un div qui contient les « contrôles » et la tâche elle-même.

Les commandes permettent à l’utilisateur de supprimer un élément ou de le marquer comme terminé :

 <h3>Uncompleted</h3>

<template x-for="element in uncompleted" :key="element.id">
    <div x-data="{showControls:false}" @mouseover="showControls = true" @mouseout="showControls = false"
        class="task"
    >

        <div class="controls">
            <div x-show="showControls" @click="element.done=true">[M]</div>
            <div x-show="showControls" @click="allTasks=allTasks.filter(x=>x.id!==element.id)">[R]</div>
        </div>

        <div x-text="element.task" ></div>
    </div>
</template>

Vous pouvez utiliser la commande x-pour pour parcourir un tableau et en restituer les éléments. Elle est similaire à v-for dans Vue et le Array.map() Méthode array dans React. La div « controls » contient deux divs avec la chaîne « [M] » et « [R] ». Ces chaînes signifient « Marquer comme terminé » et « Supprimer ». Vous pouvez les remplacer par des icônes appropriées si vous le souhaitez.

Le x-show La directive définit un élément affichage Propriété CSS à aucun si la valeur pointant vers la directive est falsy. La deuxième div de la div « items » est similaire à la première à quelques exceptions près : L’élément h3 est défini sur « Completed », le premier enfant de la div « control » a le texte « [U] » au lieu de « [M] » et dans cette div @click directive, element.done est fixé à faux.

 <div x-show="showControls" @click="element.done=false">[U]</div>

Et voilà, vous avez passé en revue les bases d’Alpine.js et utilisé ce que vous avez appris pour créer une application basique de tâches à faire.

Capture d'écran de l'application terminée

Faciliter l’écriture du code Alpine.js

Lorsque vous commencez à écrire du code Alpine.js, il peut être difficile de s’y retrouver. Heureusement, les éditeurs de code comme Visual Studio Code fournissent une large gamme d’extensions qui facilitent le développement.

Dans le marché des extensions, vous pouvez obtenir l’extension Alpine.js IntelliSense qui facilite le travail avec les directives. Cela peut vous aider à améliorer votre productivité lorsque vous utilisez Alpine.js dans vos projets.