Menu

AlpineJS le framework JS entre JQuery et VueJS

Publié en Août 2020 - Design & UI, Développement web, Logiciel Libre

alpinejs

Nous utilisons régulièrement VueJS et Angular pour nos développement, mais nous avons régulièrement des besoins en javascript pour quelques animations ou de petites choses, ou ils paraissent trop imposants par rapport aux besoins.

AlpineJS répond parfaitement à cette problématique, il permet de manipuler le DOM et de dynamiser les pages web sans se lancer dans une SPA. Il est très léger (6,4kb GZippé et minifié) et n'utilise pas de DOM virtuel ce qui est parfait pour répondre aux soucis de référencement. Son écriture est très inspiré de VueJS ce qui permet de le prendre en main en quelques minutes.

Très simple d'utilisation il suffit d'ajouter sur un élément HTML x-data="Object" pour créer un nouveau composant. Voici un petit exemple de code pour un système de dropdown :

<div class="dropdown" x-data="{open: false}">
    <button class="button" x-on:click="open = true">Toggle</button>
    <div class="content" x-show="open" x-on:click.away="open = false">
        <div>Lorem</div>
        <div>Ipsum</div>
        <div>Dolor</div>
    </div>
</div>

Vraiment très simple et très pratique ! Et il est aussi possible, si le code devient plus complexe de l'extraire dans une fonction et l'appeler du type :

<div class="dropdown" x-data="dropdown()">...</div>

Toute la documentation pour Alpine est disponible sur le repo Github.