Primeros pasos con AlpineJS, el microframework mágico

AlpineJS es un micro-framework muy interesante, que no va a tener las mismas capacidades para hacer aplicaciones web interactivas que las que podemos tener con otros frameworks más normales y corrientes como por ejemplo Vue, Svelte o React, pero que por otra parte tampoco lo necesita.

Alpine busca ser útil principalmente cuando tenemos una página compuesta de HTML puro en la que queremos lanzar un poquito de JavaScript para algunas cosas puntuales, por ejemplo el típico panel de control que se genera server-side por parte de algún framework de back como Laravel, Rails o Django, o la típica aplicación de panel de control que se genera con algún CMS como por ejemplo WordPress o Drupal, aunque seguro que se os ocurren más casos como este.

De hecho sus autores lo comparan precisamente con jQuery, y es que nos permite hacer lo que a lo mejor hace 10 o 15 años haríamos con jQuery, tomar una página web hecha inicialmente en HTML e incorporarle un poquito de JavaScript para poder desarrollar algunas funcionalidades interactivas que lo necesitan de forma suelta.

Su sintaxis, no obstante, va a recordar muchísimo a la de otros frameworks como Vue, porque como os voy a enseñar es posible hacer cosas con Alpine.js sin ni siquiera escribir una sola línea de JavaScript, no necesitas ni siquiera crear un archivo .js, lo puedes hacer todo en HTML.

Primero voy a crear un directorio y lo voy a abrir con Visual Studio Code, y dentro voy a crear una plantilla de HTML básica, nada de frameworks, ni siquiera un Vite creado en un proyecto vanilla. Y por si alguien se lo está preguntando, sí, puedes instalar alpine con un módulo de NPM normal e integrarlo con Vite, pero yo me propuesto para este vídeo ir a lo más crudo.

Dentro de este archivo HTML, el cual ya estoy sirviendo en mi navegador web a través de un pequeño servidor, voy a agregar el módulo de instalación de Alpine, y lo voy a hacer directamente desde la propia CDN utilizando el enlace que yo os recomiendo, voy a poner una etiqueta script y voy a agregar la ruta que será //unpkg.com/alpinejs, y a esa script le voy a poner la etiqueta defer, que es un requisito que tiene cuando lo importas así. Si ahora recargo la página, debería poder apreciar ningún tipo de error en la consola, y a través de la pestaña de red debería poder ver mi descarga hecha.

Y ahora vamos a empezar a crear. Para ello quizás sea necesario contaros cómo se estructura una aplicación de Alpine. Una vez que agregamos Alpine a una página web, nosotros podemos crear pequeñas aplicaciones o módulos dentro de la misma. Es importante tener en cuenta que una vez que tenemos Alpine instalado, nosotros podemos tener dentro de este HTML varias aplicaciones coexistiendo de forma paralela, y cada una será por lo general independiente al resto.

Por ejemplo, voy a crear aquí un div y lo voy a llamar app, como haríamos en otros frameworks, y esta va a ser la raíz de mi aplicación, donde voy a haceros un pequeño ejemplo para que veáis las posibilidades que tiene Alpine. Cualquier aplicación de Alpine tiene como raíz un elemento muy importante que es la data, y en el caso de Alpine se escribe como x-data directamente dentro de la misma etiqueta. Esto que estamos haciendo aquí es un poco peculiar, y puede que algunas de las cosas que nos va a obligar Alpine a escribir en el HTML de esta página se salten un poco el estándar HTML como tal, pero es necesario para poder utilizar este framework. De todos modos hay alternativas, pero ésta ya las exploraré en otro momento.

Para poder funcionar AlpineJS va a necesitar que definamos antes unos datos, que es lo que estamos especificando por medio de este atributo. ¿Y qué son los datos? Es el estado de nuestra aplicación interactiva. Y esto es esencialmente lo que define cualquier aplicación.

Uno de los ejemplos más típicos puede ser el típico menú desplegable, como el mismo menú que tiene Firefox. Se compone de un botón que cuando se activa al pulsarlo cambia el valor de una variable que dice si un elemento tiene que ser visible o no, y luego el propio menú como tal que es visible solamente cuando la variable visible sea true. Es el típico ejemplo, ¿no? If visible, render menu, y luego un evento onclick que haga que visible sea lo contrario de visible.

O por ejemplo, no valoramos lo suficiente como hoy en día podemos utilizar sin más la etiqueta details para hacer elementos que se despliegan y que muestran información. adicional. En otros tiempos, antes de tener la etiqueta details, teníamos que hacer estas cosas a mano, utilizando un poquito de CSS y a lo mejor un poquito de JavaScript, y éste es el tipo de cosas que con Alpine podríamos hacer sin involucrar la etiqueta details, aunque tal vez no sea el ejemplo más recomendado.

Voy a hacer una demo para replicar algo como esto. Lo primero que tengo que hacer es declarar el conjunto de datos que va a necesitar mi aplicación, y en este caso va a consistir únicamente en una variable booleana que nos diga si tenemos que mostrar el menú desplegable o no. Una vez que tenga identificadas qué variables voy a necesitar como parte del estado de mi aplicación, lo que voy a hacer es rellenar el atributo x-data, y dentro de este atributo lo que voy a hacer es ponerle unos corchetes. Este atributo, el x-data, se va a evaluar como si fuese JavaScript, y representa una expresión JavaScript que debe ser un objeto con los campos que quiero que tenga el estado de mi aplicación.

Sí, lo que vas a poner aquí dentro es JavaScript, solo que vamos a escribir directamente un objeto con notación JavaScript, así que lo que voy a hacer es poner tal cual la variable, en este caso visible, y le voy a dar como valor por defecto false. Por cierto, para buena parte de los IDEs que vayamos a utilizar o de los editores, como por ejemplo Visual Studio Code, existen plugins que sirven para autocolorear directamente el contenido de la variable x-data y similares, porque claro, evidentemente esto está siendo interpretado como un string, a pesar de que dentro hemos puesto JavaScript.

Dentro de esta aplicación es HTML regular, por ejemplo, si yo pongo aquí un menú de navegación dentro de un párrafo y trato de recargar la pestaña, aparece mi menú de navegación con toda la normalidad del mundo, como debería ser, pero ahora vamos a hacer, por ejemplo, que este menú de navegación solo se vea cuando la variable visible vale true.

Y para ello lo que voy a hacer es ponerle un atributo llamado x-show, que es otro de los atributos de alpine que identificamos porque comienza por la letra x. x-show es un atributo que nos permite pedirle al párrafo, en este caso, que se muestre solamente cuando la expresión JavaScript que pongamos aquí sea cierta. Por ejemplo, si pongo true, esto quiere decir verdadero, así que siempre se va a mostrar. Si pongo false, esto quiere decir falso, así que nunca se va a mostrar, porque esta expresión siempre es falsa. Y en este caso, si quiero mostrarlo solamente cuando visible sea true, pues pondré directamente visible. Y como veis, en este momento no se está mostrando. Eso es porque la variable visible vale false.

Podría cambiarla a true para que lo volváis a ver mostrar eso una vez más, o bien podría añadirle un poquito de reactividad por medio de un botón para cambiar lo que vale esta variable, y así os enseño cómo funcionan los event listeners.

Voy a incorporar un botón a mi aplicación web que va a decir Mostrar menú. Nos vamos aproximando, pero de momento este botón no funciona. Vamos a añadirle el event listener. Aquí es donde Alpine va a mostrar su cara más propia de frameworks como Vue o Svelte, y también su utilidad y simplicidad propia de frameworks antiguos de otros tiempos como por ejemplo jQuery. En vez de irnos al JavaScript y escribir a event listener, todo lo que vamos a hacer es escribir la siguiente directiva, x-on, que sirve para declarar eventos. En este caso el evento que queremos declarar es de tipo click, y por eso lo separo con un dos puntos. Yo pongo x-on:click, x:on-doubleclick, x-on:keyup... en fin, el evento que se os ocurra.

Y este x-on es equivalente a irse al JavaScript y poner un event listener de este nodo de acá. Y este atributo necesita un valor que, como os podéis imaginar, también va a ser una expresión JavaScript que se supone que tiene que representar una función que queramos que se ejecute. Y en este caso lo que quiero que se haga es que la variable visible cambie de valor. Por ejemplo voy a poner que visible es igual a lo contrario de lo que vale visible ahora mismo. De este modo si estaba false se pone a true y si estaba true se pone a false.

Como estáis viendo, a pesar de que la data es un objeto, todas las variables que forman parte de la data están bien bindeadas y por lo tanto no hace falta poner ni this, ni ref, ni nada por el estilo, solamente ponemos el identificador de la variable y ya está.

Con esto hemos conseguido agregar reactividad a nuestra aplicación, porque ahora cuando pulsemos el botón se hará un cambio en una variable que provocará que se repinte la aplicación debido a que ha cambiado lo que tiene que mostrarse. Vamos a verlo en funcionamiento, de momento no es visible pero cuando le doy al botón aparece el menú, y si le vuelvo a dar el menú vuelve a desaparecer.

Y por si acaso todavía os quedan dudas de esta reactividad que permite cambiar lo que valen unas variables por medio de eventos y hacer que se repinte la interfaz, vamos a depurar mostrando lo que vale la variable visible en todo momento. Por ejemplo voy a poner otro párrafo aquí, voy a poner visible es igual a y un span que voy a dejar en blanco, excepto que no va a estar en blanco. Aquí dentro de este span voy a meter otro atributo que se va a llamar x-text. x-text es realmente otra directiva de Alpine que nos permite pintar dinámicamente el contenido de un nodo en función de una expresión JavaScript que valuemos y que se supone que tiene que ser una string.

Es decir, si aquí dentro meto una string tal cual, cuando yo lo pinte de nuevo lo que va a ocurrir es que se va a mostrar el string así en bruto. Pero mostrar una string tal cual no es muy útil, podemos poner cualquier tipo de expresión como por ejemplo Date.now, y nos mostrará la fecha actual en formato timestamp. Y por supuesto para el caso que me interesa podemos poner lo que vale la variable visible y en ese caso veremos el false o el true según si el menú está plegado o desplegado.

Aquí os he enseñado 4 de las 15 directivas que existen en este momento en Alpine, data, text, on y show. Pero existen muchas más y su documentación hace una buena labor a la hora de presentaros cuales son.

Tenemos directivas como por ejemplo la for que nos va a permitir hacer bucles o la if que nos va a permitir directamente eliminar códigos si no se cumplió una determinada condición. Su documentación está cargada de ejemplos que os pueden permitir sacar las partes más importantes del framework. Incluso si queréis ir más allá y apostar muchísimo por Alpine.js podéis comprar la biblioteca de componentes con la cual podéis hacer directamente componentes interactivos para vuestras aplicaciones sin tener ni siquiera que programarlos. Eso sí, se venden aparte.

En la descripción os dejo enlaces que os llevarán a la página principal y también a la página de documentación por si le queréis echar un vistazo. Hasta entonces, si esta introducción te ha gustado espero que lo puedas agradecer con un me gusta, no te cuesta nada y ayuda a que el vídeo llegue más lejos. Nos vemos en próximos vídeos, un saludo y hasta luego.