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.

Alpine JS 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 JS est disponible sur le repo Github.