Alpine.js

Las características más importantes de la librería Alpine.js se pueden resumir en los siguientes puntos:

Facilidad de integración

Alpine requiere muy poco para integrarse dentro de un sitio web. Simplemente con usar un script colocado en el cuerpo del documento HTML es suficiente en la mayoría de los casos. Es ideal para usarla desde un CDN para descargar al servidor de las transferencias y acelerar la descarga del archivo.

Librería ligera

La librería entera ocupa 45 KB, por lo que no impacta demasiado a la hora de agregarla incluso en proyectos ya existentes. Si tenemos en cuenta que el servidor generalmente envía los archivos a los clientes comprimidos estámos hablando que Alpine ocupará alrededor de 8KB (minificado y comprimido el código). Esto es ideal para proyectos que necesitan ser eficientes en términos de carga.

Declarativo

Utiliza una sintaxis declarativa que permite controlar el comportamiento del DOM de manera sencilla y expresiva. En muchos casos podemos escribir todos los comportamientos directamente desde el marcado HTML.

No requiere bundles

No requiere herramientas de compilación como Vite o Webpack. Tampoco configuraciones complicadas o flujos de trabajo costosos.

Reactividad

Soporta un modelo de datos reactivo que permite actualizar la UI de forma automática cuando cambian los datos del modelo. Esto facilita la creación de interfaces dinámicas sin necesidad de manipular el DOM manualmente.

Curva de aprendizaje asequible

También se destaca por su facilidad de uso: Es fácil de aprender Alpine.js y usarla en los sitios web, incluso por desarrolladores con menos experiencia. Por supuesto, si ya tienes ciertos conocimientos de Javascript te resultará todavía mucho más sencilla.

Para comenzar a utilizar Alpine.js, simplemente necesitas incluir un pequeño archivo de código JavaScript en tu HTML, mediante la correspondiente etiqueta <script>. Dado que no se requiere nada, aparte de ese código JavaScript, la manera más habitual de instalar Alpine.js en una página web es a través del CDN.

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

Por supuesto, nada nos impide descargar la librería e instalarla como archivo dentro de nuestro sitio web, colocando la ruta hacia el lugar donde lo hayamos dejado en nuestro servidor.

Una vez agregado este script ya puedes empezar a agregar directivas y expresiones directamente en el marcado de los elementos HTML, lo que facilita la creación de interfaces dinámicas sin tener que escribir mucho código JavaScript explícito.

A continuación vamos a ver cómo podríamos crear unas sencillas directivas de AlpineJS en unas etiquetas de nuestra página.

<div x-data="{ message: 'Hola Mundo' }">
  <span x-text="message"></span>
</div>

En el anterior ejemplo podemos ver como hemos creado una etiqueta <div> en la que hemos colocado nuestra primera directiva Alpine.js. La hemos implementado a través del atributo x-data. Ese atributo no forma parte del HTML estándar, sino que lo tenemos disponible gracias a la instalación del script de Alpine.js.

La directiva x-data sirve para declarar el estado de las aplicaciones. Gracias a ella podemos declarar variables con sus valores. Más adelante con otras directivas de Alpine.js podremos acceder a ese estado o manipularlo. De hecho, en el anterior código HTML podemos ver una segunda directiva de Alpine: x-text. Esa directiva permite mostrar como contenido en una etiqueta el valor de una variable seteada anteriormente como estado de la aplicación.

Por tanto nuestro ejemplo anterior, una vez ejecutado, producirá la visualización del mensaje "Hola mundo". Sería como si en la práctica tuviéramos este código HTML.

<div>
  <span>Hola Mundo</span>
</div>

Una de las facilidades que nos aporta de manera sencilla Alpine.js es la reactividad. Esto quiere decir que, si cambiamos los valores del estado de la página, los nuevos estados se propagarán por todos los lugares donde se estén visualizando.

Vamos a ver ahora cómo podemos incrementar un poco de código a nuestro sencillo "hola mundo" explicado en el punto anterior, para crear un botón capaz de cambiar el valor de la variable "message".

<div x-data="{ message: 'Hola Mundo' }">
    <span x-text="message"></span>
    <button x-on:click="message = 'Bienvenidos a Alpine.js'">Cambiar texto</button>
</div>

En este caso hemos implementado una nueva directiva llamada x-on. Esta directiva sirve para declarar manejadores de eventos. El nombre del evento que estamos definiendo es "click". La sintaxis completa para definir esos manejadores de eventos determinados es "x-on:click".

Luego, como valor de este atributo podemos colocar directamente el código Javascript que deseeamos ejecutar como consecuencia del evento.

En este caso concreto se ejecutará este código Javascript:

message = 'Bienvenidos a Alpine.js'

Gracias a la reactividad de Alpline.js se actualizará automáticamente la página al asignar un nuevo valor a la variable message, definida como estado de la aplicación. Eso quiere decir que todos los lugares donde se esté mostrando ese valor, se actualizarán automáticamente, sin que tengamos que acceder al DOM de la página explícitamente.