¿Qué es Alpine.js? como instalarlo y dar los primeros pasos

▶

Alpine.js es una biblioteca JavaScript liviana y fácil de usar que se utiliza para agregar interactividad y funcionalidad a las páginas web; su propósito es presentar una alternativa minimalista a frameworks más complejos como Vue.js o React.

Alpine.js emplea los atributos HTML para agregar funcionalidad a los elementos de la página. Permite manipular el DOM, realizar acciones condicionales, manejar eventos y realizar interacciones de forma sencilla y declarativa, sin la necesidad de escribir mucho código JavaScript; toda la lógica la podemos definir a nivel de los atributos o en un bloque de script aparte.

Características principales

Alpine es "reactivo" en el sentido de que cuando cambia un dato, todo lo que depende de esos datos "reacciona" automáticamente a ese cambio.

Alpine está basado en componentes, todas ellas son como mini aplicaciones que realizan una tarea en particular cómo:

• Abrir un diálogo en el header.
• Interactuar con un formulario.
• Mostrar un diálogo.

Todos estos componentes pueden coexistir en un mismo documento HTML y son independientes entre ellos, lo que significa, que los datos, variables y funciones que definas en cada uno de estos componentes son locales a los mismos.

Un componente en Alpine luce como el siguiente:

<div x-data="{ header:false }">
    // Hacer Algo
</div>

Algunas características destacadas de Alpine.js son:

• Sintaxis intuitiva: Alpine.js utiliza una sintaxis clara y fácil de entender, por lo tanto, su curva de aprendizaje es bastante baja.
• Interactividad declarativa: Permite agregar interactividad a los elementos HTML mediante la adición de atributos especiales como x-data, x-show, x-bind, entre otros.
• Manipulación del DOM: Alpine.js permite manipular el DOM de forma sencilla mediante atributos.
• Eventos y acciones: Permite manejar eventos como clics, cambios de estado y teclas presionadas, y realizar acciones correspondientes utilizando directivas como x-on y x-bind.
• Tamaño y rendimiento: Alpine.js es extremadamente liviano, con un tamaño de archivo muy pequeño. Esto lo hace ideal para proyectos pequeños o para aquellos que buscan una solución simple sin agregar mucha complejidad o sobrecarga al sitio web.

Introducción a Alpine.js: Reactividad Ligera

Vamos a comenzar esta introducción a Alpine.js. Puedes tomarte esta sección, valga la redundancia, como una introducción propia al framework. Aunque inicialmente esta explicación forma parte del curso de Laravel Livewire, será independiente.

Vamos a crear proyectos desde cero trabajando directamente con Alpine y, más adelante, en otra sección, lo ligaremos con Livewire (que es la razón por la que estoy haciendo esta introducción). No obstante, puedes ver este contenido independientemente de si te interesa aprender Laravel Livewire o no.

Alpine.js: El Vue Más Ligero

Aclarado esto, quería hablar un poco sobre el framework. Si ya has trabajado con Livewire, no debería ser una gran sorpresa, pero considero necesario hacer una introducción formal.

Alpine.js es otro framework de JavaScript, una palabra clave importante, ya que hoy en día existen muchísimos frameworks de JavaScript con distintos propósitos. Este es uno más; al final, puedes verlo como una especie de Vue, pero más ligero y sencillo de entender.

Menciono Vue porque, en mi opinión, frameworks como Angular y React siempre los considero un poco más complejos.

El propósito de Alpine es manejar operaciones sencillas. Es ideal cuando no necesitas la complejidad de Vue, sino que simplemente quieres hacer pequeñas adaptaciones o añadir reactividad mínima.

⚙️ Estructura y Reactividad en el HTML

Alpine tiene una estructura diferente, más modular. No tienes que crear archivos .vue ni nada por el estilo, sino que directamente desde el mismo HTML puedes crear tus "pseudo-componentes", por decirlo de alguna manera.

Un componente en Alpine luce de la siguiente forma, siempre acompañado por directivas que comienzan con x-:

<div x-data="{ header: false }"></div>

La directiva x-data es la clave: asocia lo que es un componente en sí. Al igual que ocurre con Tailwind (aunque sea una filosofía diferente), establecemos el JavaScript directamente en el HTML. Podemos crear un bloque de script aparte si quieres hacer algo más complejo, ya que también lo permite.

En pocas palabras, y comparándolo de nuevo con frameworks como Vue, lo que nos permite hacer Alpine es agregar esa capa de reactividad a nuestra página HTML. Cuando cambiamos una propiedad (por ejemplo, header), automáticamente se actualiza el DOM basado en directivas que conoceremos más adelante (x-show, x-if, etc.).

Ventaja principal: la reactividad

La gran ventaja de Alpine es la reactividad.

Esto significa que podemos atar una variable a un bloque de HTML y mostrar u ocultar elementos dependiendo de su valor.

Por ejemplo:

• Una variable controla si un menú está abierto
• Otra controla si se muestra un panel
• Otra controla el estado de un botón

Cuando la variable cambia, la interfaz se actualiza automáticamente.

¿Cuándo usar Alpine.js?

Seguramente te preguntarás: “¿Para qué voy a emplear algo más sencillo y menos completo?”. La respuesta reside en su simplicidad y su peso. A diferencia de otros frameworks que requieren configuraciones complejas, Alpine es extremadamente liviano, lo que beneficia drásticamente la velocidad de carga del sitio.

Usar un framework robusto para tareas pequeñas es como usar un Ferrari para ir a comprar pan a la esquina. A veces no necesitamos lanzar cohetes a la luna; solo queremos resolver interacciones puntuales como:

• Menús desplegables (hamburguesa).
• Modales o diálogos.
• Pequeñas interacciones de usuario.

En mi sitio web desarrollolibre.net, empleo Alpine para estas acciones porque no requiere funcionalidades avanzadas ni dependencias pesadas. Es una solución directa y sencilla en la cual, no quiero lidiar con vanilla JavaScript para hacer este tipo de acciones.

Alpine.js vs. Vanilla JavaScript

Podrías pensar en usar JavaScript puro (Vanilla JS), pero suele ser molesto y poco mantenible. Tienes que:

1. Gestionar manualmente las referencias al DOM.
2. Evaluar y manipular clases manualmente para mostrar u ocultar elementos.
3. Escribir lógica extensa que se vuelve difícil de leer conforme crece el proyecto.

Con Alpine, la ventaja es la reactividad. Mediante una variable, puedes "atar" un bloque de HTML y ocultarlo o mostrarlo según tus necesidades de forma automática.

Si vienes de otros frameworks

Si vienes de frameworks como Vue, React o Angular, aprender Alpine es muy fácil.

De hecho, gran parte de lo que necesitas saber está prácticamente en la primera página de la documentación.

Entre las operaciones más comunes tenemos:

• Bloque de datos (x-data)
• Binding de atributos
• Eventos
• Mostrar u ocultar elementos
• Mostrar texto
• Mostrar HTML
• Iterar listas
• Condicionales

Es decir, la mayoría de cosas que normalmente queremos hacer.

Eventos y Ejemplo de Modal

También tenemos eventos para que el usuario pueda interactuar con nuestra página. Un buen ejemplo de esto es la creación de un modal o diálogo de confirmación.

<html>
   <body>
       <div x-data="{ open: false }">
           Abrir un modal
           </div>
       <div x-data="{ fieldText: 'Pon tu nombre' }">
           Manejar un formulario
       </div>
   </body>
</html>

En el ejemplo anterior, open: false es nuestra data. La idea es que si open es true, un condicional abrirá el modal, y si es false, lo mantendrá cerrado u oculto.

️ Directivas Clave de Alpine.js

Aquí las directivas son el secreto de la reactividad. Por supuesto, tenemos también los eventos (x-on:click, x-on:keyup, etc.).

En cuanto a los atributos, el x-data es fundamental, ya que indica que es un componente y permite definir nuestras variables. Al igual que en Vue, tenemos:

• x-show: Para mostrar u ocultar un elemento basándose en una condición booleana. Oculta el div (manteniéndolo en el DOM con display: none).
• x-if: Similar a v-if en Vue (elimina el elemento del DOM completamente).

La Carta de Presentación de Alpine

Esta es la página oficial (simplemente busca "Alpine.js"). Aquí puedes ver la presentación del componente. Fíjate en el siguiente ejemplo:

<div x-data="{ open: false }">
   <button x-on:click="open = !open">Dame un click</button>
   <div x-show="open">
       Oculto por defecto
   </div>
</div>

Aquí tenemos x-data con open definido en false. Si el usuario hace clic (evento x-on:click), la propiedad open cambia a su estado opuesto. El div con x-show="open" se mostrará cuando se haga clic. Lamentablemente, no podemos ejecutarlo aquí, pero esta es su carta de presentación.

Alpine es un framework extremadamente sencillo y simple. La propia página oficial ya define sus atributos, propiedades y métodos principales, ya que conociendo esto, conocerías la parte más importante de Alpine, que es lo que cubriremos en este curso.

Instalación

El siguiente punto es cómo podemos instalarlo. Tenemos, al igual que con Vue, la opción de:

• CDN: Sería la opción que emplearemos inicialmente para hacer pruebas y el "Hola Mundo".
• Node/NPM: Es la opción ideal para un proyecto real.

Puedes ir a la sección "Installation" de la documentación oficial, donde verás el método CDN y el método NPM (que se inicializa mediante import Alpine from 'alpinejs').

Esa era la introducción que quería darte: hablar sobre la tecnología, lo que ofrece, cómo está formada y cómo podemos instalarla. Sin más que decir, ¡vamos a la siguiente clase!

Para poder usar Alpine JS, lo podemos hacer mediante Node:

$ npm i alpinejs

O mediante la CDN:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

La CDN va a ser la vía que se usará en este libro al ser la más sencilla por ende, la más recomendada para comenzar.

Una aplicación en Alpine consta de dos partes:

1. La declaración de la data, mediante el atributo x-data.
2. La parte funcional, que es empleando la lógica que implementes usando las características de Alpine.

Modularizar en componentes

Como te había comentado, la característica principal de Alpine.js es que te permite crear microcomponentes reactivos directamente en el HTML utilizando la directiva x-data. Aquí colocamos la data y la lógica en línea.

Sin embargo, cuando la cantidad de JavaScript crece mucho, inyectar todo en un mismo lugar (el atributo x-data) dificulta la lectura y el mantenimiento, llevando al temido "código espagueti".

Por lo tanto, si es necesario, también podemos crear un bloque de JavaScript separado para definir la lógica del componente, replicando un poco el esquema que se utiliza en frameworks como Vue.

Creando Funciones Externas para x-data

Para lograr la modularización, simplemente creamos una función clásica de JavaScript que retorne el objeto que Alpine espera.

1. Definición de la Función

La función debe retornar un objeto que contenga tanto las variables (la data) como las funciones (la lógica) que el componente va a utilizar.

<script>
 function miComponenteData(){
   return {
     // Aquí se definen las variables reactivas (ej: 'todos', 'isOpen')
     // Aquí se definen las funciones que el componente invocará (@click="miFuncion")
     todos: [],
     incrementar: (value) => value + 1 
  }
}
</script>

2. Uso de la Función en x-data

En lugar de colocar el objeto JSON directamente en el atributo x-data, simplemente llamamos a la función. Alpine tomará el objeto retornado y lo asignará como la fuente de datos reactiva para ese div.

<div x-data="miComponenteData()">
   <template x-for="t in todos">
       <p x-text="t.task"></p>
   </template>
</div>

De esta forma, en caso de que la lógica en línea sea insuficiente o genere código complejo, puedes emplear esta sintaxis para modularizar tus componentes de Alpine.js, manteniendo el JavaScript en un bloque <script> limpio.

El siguiente paso, es conocer las Directiva x-bind en Alpine.js - Atributos de clases y estilos