¿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.

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.).

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