¿Qué es AlpineJS?

Alpine.js es una librería de JavaScript que permite incluir interactividad y dinamismo en tus páginas web sin proceso de compilado. Simplemente hay que añadir la etiqueta <script> necesaria y ya podemos empezar a trabajar.

¿Cómo funciona AlpineJS?

Alpine está compuesto por una serie de atributos (15 en noviembre de 2022), propiedades (6 en noviembre de 2022) y 2 métodos. Para ilustrar cómo funciona podemos ver el siguiente ejemplo:

<script src="//unpkg.com/alpinejs" defer></script>

<!-- Con x-data definimos las variables que existirán en ese bloque de código -->
<div x-data="{ open: false }">
    <!-- Al hacer click en el botón, mostraremos el contenido -->
    <button x-on:click="open = true">Expand</button>
 	<!-- Al cambiar la variable open, se mostrará / ocultará el contenido automáticamente -->
    <span x-show="open">
      Content...
    </span>
</div>

Como podréis ver, es bastante parecido al funcionamiento que obtenemos con frameworks reactivos como Vue, Angular o React, pero sin necesidad de instalación ni procesos de compilación.

AlpineJS es muy usado en el ecosistema Laravel y forma parte del conocido TALL Stack.