Alpine.js: el marco de JavaScript que se usa como jQuery, escrito como Vue e inspirado en TailwindCSS

Tenemos grandes marcos de JavaScript que muchas personas ya usan y les gustan, incluidos React, Vue, Angular y Svelte. ¿Necesitamos otra biblioteca de JavaScript? Echemos un vistazo a Alpine.js y podrá decidir usted mismo. Alpine.js es para desarrolladores que no buscan crear una aplicación de una sola página (SPA). Es liviano (~7kB comprimido con gzip) y está diseñado para escribir JavaScript del lado del cliente basado en marcado.

La sintaxis está tomada de la directiva Vue y Angular. Eso significa que le resultará familiar si ha trabajado con ellos antes. Pero, nuevamente, Alpine.js no está diseñado para crear SPA, sino más bien para mejorar sus plantillas con un poco de JavaScript.

Por ejemplo, aquí hay una demostración de Alpine.js de un componente de “alerta” interactivo.

El mensaje de alerta está vinculado bidireccionalmente a la entrada mediante x-model="msg". El “nivel” del mensaje de alerta se establece mediante una levelpropiedad reactiva. La alerta se muestra cuando ambos msgy level tienen un valor.

Es como un reemplazo de jQuery y JavaScript, pero con renderizado declarativo.

Alpine.js es un reemplazo con sabor a plantilla de Vue para jQuery y JavaScript básico en lugar de un competidor de React/Vue/Svelte/WhateverFramework .

Dado que Alpine.js tiene menos de un año, puede hacer suposiciones sobre las API DOM que jQuery no puede. Hagamos brevemente una comparación entre los dos.

Consulta versus vinculación

La mayor parte del tamaño y las características de jQuery viene en forma de una capa de compatibilidad entre navegadores sobre API DOM imperativas; esto generalmente se conoce como jQuery Core y tiene características deportivas que pueden consultar el DOM y manipularlo.

La respuesta de Alpine.js al núcleo de jQuery es una forma declarativa de vincular datos al DOM utilizando la x-binddirectiva de vinculación de atributos . Se puede utilizar para vincular cualquier atributo a datos reactivos en el componente Alpine.js. Alpine.js, al igual que sus bibliotecas de vista declarativa contemporáneas (React, Vue), proporciona x-refuna trampilla de escape para acceder directamente a elementos DOM desde el código del componente JavaScript cuando la vinculación no es suficiente (por ejemplo, cuando se integra una biblioteca de terceros que debe pasarse). un nodo DOM).

Manejo de eventos

jQuery también proporciona una forma de manejar, crear y activar eventos. Alpine.js proporciona la x-ondirectiva y el $eventvalor mágico que permite que las funciones de JavaScript manejen eventos. Para activar eventos (personalizados), Alpine.js proporciona la $dispatchpropiedad mágica que es una envoltura delgada sobre las API de eventos y envío de eventos del navegador .

Efectos

Una de las características clave de jQuery son sus efectos, o más bien, su capacidad para escribir animaciones sencillas. Mientras que podríamos usar las propiedades slideUp, slideDown, fadeIn, fadeOuten jQuery para crear efectos, Alpine.js proporciona un conjunto de x-transitiondirectivas que agregan y eliminan clases durante la transición del elemento. Esto está inspirado en gran medida en la API de transición de Vue.

Además, el cliente Ajax de jQuery no tiene una solución prescriptiva en Alpine.js, gracias a Fetch API o aprovechando una biblioteca HTTP de terceros (por ejemplo, axios, ky, superagent).

Complementos

También vale la pena mencionar los complementos de jQuery. No hay comparación con eso (todavía) en el ecosistema Alpine.js. Compartir componentes Alpine.js es relativamente simple y generalmente requiere un simple caso de copiar y pegar. Los componentes de JavaScript en Alpine.js son “solo funciones” y tienden a no acceder a Alpine.js en sí, lo que los hace relativamente sencillos de compartir al incluirlos en diferentes páginas con una scriptetiqueta. Las propiedades mágicas se agregan cuando Alpine se inicializa o se pasa a enlaces, como $eventen x-onenlaces.

Actualmente no hay ejemplos de extensiones de Alpine.js, aunque existen algunos problemas y solicitudes de extracción para agregar eventos “principales” que se conectan a Alpine.js desde otras bibliotecas. También hay discusiones sobre la capacidad de agregar directivas personalizadas. La postura del creador de Alpine.js, Caleb Porzio , parece basar las decisiones de API en las API de Vue, por lo que esperaría que cualquier punto de extensión futuro se inspirara en lo que proporciona Vue.js.

Tamaño

Alpine.js es más liviano que jQuery, con un tamaño de 21,9 kB minificado (7,1 kB comprimido con gzip) en comparación con jQuery de 87,6 kB minificado (30,4 kB minificado y comprimido con gzip). ¡Solo el 23% del tamaño!

Es probable que la mayor parte de esto se deba a la forma en que Alpine.js se enfoca en proporcionar una API declarativa para el DOM (por ejemplo, enlace de atributos, detectores de eventos y transiciones).

A modo de comparación, Vue tiene un tamaño de 63,5 kB minimizado (22,8 kB comprimidos con gzip). ¿Cómo puede Alpine.js ser más liviano a pesar de que su API es equivalente a Vue? Alpine.js no implementa un DOM virtual. En cambio, muta directamente el DOM mientras expone la misma API declarativa que Vue.

Veamos un ejemplo

Alpine es compacto porque el código de la aplicación es de naturaleza declarativa y se declara mediante plantillas. Por ejemplo, aquí hay una página de búsqueda de Pokémon que usa Alpine.js:

Este ejemplo muestra cómo se configura un componente usando x-datauna función que devuelve los datos y métodos iniciales del componente y x-initcómo ejecutar esa función durante la carga.

Enlaces y detectores de eventos en Alpine.js con una sintaxis sorprendentemente similar a las plantillas de Vue.

• Alpine: x-bind:attribute="express" y x-on:eventName="expression", taquigrafía :attribute="expression"y @eventName="expression"respectivamente
• Vue: v-bind:attribute="express" y v-on:eventName="expression", la abreviatura es :attribute="expression"y @eventName="expression"respectivamente

La representación de listas se logra con x-forun templateelemento y la representación condicional con x-ifun templateelemento.

Tenga en cuenta que Alpine.js no proporciona un lenguaje de plantillas completo, por lo que no hay sintaxis de interpolación (por ejemplo, {{ myValue }}en Vue.js, manillares y AngularJS). En cambio, el contenido dinámico vinculante se realiza con las directivas x-texty x-html(que se asignan directamente a las llamadas subyacentes a Node.innerTexty Node.innerHTML).

Un ejemplo equivalente usando jQuery es un ejercicio que puedes realizar, pero el estilo clásico incluye varios pasos:

• Imperativamente vincúlese al botón haciendo clic usando $('button').click(/* callback */).
• Dentro de esta “devolución de llamada de clic”, obtenga el valor de entrada del DOM y luego utilícelo para llamar a la API.
• Una vez que se completa la llamada, el DOM se actualiza con nuevos nodos generados a partir de la respuesta de la API.

Si está interesado en una comparación lado a lado del mismo código en jQuery y Alpine.js, Alex Justesen creó el mismo contador de caracteres en jQuery y Alpine.js .

De nuevo de moda: herramientas centradas en HTML

Alpine.js se inspira en TailwindCSS . La introducción de Alpine.js en el repositorio es “Tailwind para JavaScript”.

¿Por qué es eso importante?

Uno de los puntos de venta de Tailwind es que “proporciona clases de utilidad de bajo nivel que le permiten crear diseños completamente personalizados sin tener que abandonar su HTML”. Eso es exactamente lo que hace Alpine. Funciona dentro de HTML, por lo que no es necesario trabajar dentro de plantillas de JavaScript como lo haríamos en Vue o React. ¡Muchos de los ejemplos de Alpine citados en la comunidad ni siquiera usan etiquetas de script!

Veamos un ejemplo más para aclarar la diferencia. Aquí hay un menú de navegación accesible en Alpine.js que no utiliza etiquetas de script de ningún tipo.

Este ejemplo aprovecha aria-labelledbyy aria-controlsfuera de Alpine.js (con idreferencias). Alpine.js se asegura de que el elemento “alternar” (que es un botón) tenga un aria-expandedatributo que indique truecuándo se expande la navegación y falsecuándo se contrae. Este aria-expandedenlace también se aplica al menú en sí y mostramos/ocultamos la lista de enlaces en él enlazando a hidden.

Estar centrado en el marcado significa que los ejemplos de Alpine.js y TailwindCSS son fáciles de compartir. Todo lo que se necesita es copiar y pegar en HTML que también ejecute Alpine.js/TailwindCSS. ¡No hay directorios locos llenos de plantillas que se compilan y procesan en HTML!

Dado que HTML es un bloque de construcción fundamental de la web, significa que Alpine.js es ideal para aumentar sitios renderizados por servidor (Laravel, Rails, Django) o estáticos (Hugo, Hexo, Jekyll). Integrar datos con este tipo de herramientas puede ser tan simple como generar algo de JSON en el x-data="{}"enlace. La posibilidad de pasar algo de JSON desde su plantilla de backend/sitio estático directamente al componente Alpine.js evita crear “otro punto final de API” que simplemente sirve un fragmento de datos requerido por un widget de JavaScript.

Del lado del cliente sin el paso de compilación

Alpine.js está diseñado para usarse como script directo incluido desde una CDN pública. Su experiencia de desarrollador está diseñada para eso. Es por eso que constituye una excelente comparación y reemplazo de jQuery: se incluye y elimina un paso de compilación.

Si bien no se usa tradicionalmente de esta manera, la versión incluida de Vue se puede vincular directamente. Sarah Drasner tiene un excelente artículo que muestra ejemplos de jQuery sustituido por Vue . Sin embargo, si usa Vue sin un paso de compilación, está excluyendo activamente:

• la CLI de Vue
• componentes de un solo archivo
• paquetes más pequeños/más optimizados
• un CSP (Política de seguridad de contenido) estricto ya que las plantillas en línea de Vue evalúan las expresiones del lado del cliente

Entonces, sí, si bien Vue cuenta con una implementación sin compilación, su experiencia de desarrollador realmente depende de la CLI de Vue. Eso podría decirse de Create React App para React y Angular CLI. La falta de construcción despoja a esos marcos de sus mejores cualidades.

¡Ahí tienes! Alpine.js es una biblioteca CDN moderna que ofrece renderizado declarativo para una carga útil pequeña, todo sin el paso de compilación ni las plantillas que requieren otros marcos. El resultado es un enfoque centrado en HTML que no sólo se parece a un jQuery moderno sino que también es un excelente sustituto.

Si está buscando un reemplazo de jQuery que no lo obligue a utilizar una arquitectura SPA, ¡pruebe Alpine.js! ¿Interesado? Puede obtener más información en Alpine.js Weekly , un resumen semanal gratuito de noticias y artículos de Alpine.js .