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 por sí mismo. Alpine.js es para desarrolladores que no buscan crear una aplicación de una sola página (SPA). Es liviano (~ 7kB comprimido en gzip) y está diseñado para escribir JavaScript del lado del cliente basado en marcado.
La sintaxis se toma prestada de la directiva Vue y Angular. Eso significa que se sentirá familiar si ha trabajado con ellos antes. Pero, de nuevo, Alpine.js no está diseñado para crear SPA, sino 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 en dos direcciones a la entrada utilizando x-model="msg". El “nivel” del mensaje de alerta se establece mediante un reactivo level propiedad. La alerta se muestra cuando ambos msg y level tener un valor.
Es como un reemplazo de jQuery y JavaScript, pero con representación declarativa
Alpine.js es un reemplazo con sabor a plantilla de Vue para jQuery y JavaScript vanilla 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 una breve comparación entre los dos.
Consultas frente a 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 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 usando el x-bind directiva de enlace de atributos. Se puede utilizar para vincular cualquier atributo a datos reactivos en el componente Alpine.js. Alpine.js, al igual que sus contemporáneos de biblioteca de vistas declarativas (React, Vue), proporciona x-ref como una trampilla de escape para acceder directamente a los elementos DOM desde el código del componente JavaScript cuando el enlace no es suficiente (por ejemplo, cuando se integra una biblioteca de terceros a la que se debe pasar un nodo DOM).
Manejo de eventos
jQuery también proporciona una forma de manejar, crear y desencadenar eventos. Alpine.js proporciona x-on directiva y la $event valor mágico que permite que las funciones de JavaScript manejen eventos. Para activar eventos (personalizados), Alpine.js proporciona la $dispatch propiedad mágica que es una envoltura delgada sobre las API de eventos y despacho 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 fáciles. Donde podríamos usar slideUp, slideDown, fadeIn, fadeOut propiedades en jQuery para crear efectos, Alpine.js proporciona un conjunto de x-transition directivas, que agregan y eliminan clases durante la transición del elemento. Eso está inspirado en gran medida por 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 la API Fetch 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 de Alpine.js es relativamente simple, por lo general 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 un script etiqueta. Todas las propiedades mágicas se agregan cuando Alpine se inicializa o se pasa a enlaces, como $event en x-on fijaciones.
Actualmente no hay ejemplos de extensiones de Alpine.js, aunque hay algunos problemas y solicitudes de extracción para agregar eventos “centrales” 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 inspire en lo que proporciona Vue.js.
Tamaño
Alpine.js es más liviano que jQuery, con 21.9kB minificado – 7.1kB con gzip – en comparación con jQuery con 87.6kB minificado – 30.4kB minificado y con gzip. ¡Solo el 23% del tamaño!
La mayor parte de eso probablemente 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).
Bundlephobia rompe los dos
En aras de la comparación, Vue tiene 63.5kB minificado (22.8kB en 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, dado que el código de la aplicación es de naturaleza declarativa y se declara a través de 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-data y una función que devuelve los datos, métodos y componentes iniciales x-init para ejecutar esa función en carga.
Enlaces y detectores de eventos en Alpine.js con una sintaxis sorprendentemente similar a las plantillas de Vue.
- Alpino:
x-bind:attribute="express"yx-on:eventName="expression", taquigrafía es:attribute="expression"y@eventName="expression"respectivamente - Vue:
v-bind:attribute="express"yv-on:eventName="expression", taquigrafía es:attribute="expression"y@eventName="expression"respectivamente
La representación de listas se logra con x-for en un template elemento y renderizado condicional con x-if en un template elemento.
Tenga en cuenta que Alpine.js no proporciona un lenguaje de plantillas completo, por lo que no hay sintaxis de interpolación (p. Ej. {{ myValue }} en Vue.js, Handlebars y AngularJS). En cambio, la vinculación de contenido dinámico se realiza con el x-text y x-html directivas (que se asignan directamente a las llamadas subyacentes a Node.innerText y Node.innerHTML).
Un ejemplo equivalente con jQuery es un ejercicio que puede realizar, pero el estilo clásico incluye varios pasos:
- Enlazar imperativamente al clic del botón usando
$('button').click(/* callback */). - Dentro de este “clic de devolución de llamada” obtenga el valor de entrada del DOM, luego úselo para llamar a la API.
- Una vez que se ha completado 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 en Alpine.js.
De nuevo en boga: 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 tan importante?
Uno de los puntos de venta de Tailwind es que “proporciona clases de servicios públicos 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 las plantillas de JavaScript de la forma en que 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 llevar la diferencia a casa. Aquí hay un menú de navegación accesible en Alpine.js que no usa etiquetas de script en absoluto.
Este ejemplo aprovecha aria-labelledby y aria-controls fuera de Alpine.js (con id referencias). Alpine.js se asegura de que el elemento “alternar” (que es un botón) tenga un aria-expanded atributo que es true cuando se expande la navegación, y false cuando se derrumbó. Esta aria-expanded El enlace también se aplica al menú en sí y mostramos / ocultamos la lista de enlaces 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 ejecuta Alpine.js / TailwindCSS. ¡No hay directorios locos llenos de plantillas que se compilan y renderizan 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). La integración de datos con este tipo de herramientas puede ser tan simple como generar JSON en el x-data="{}" vinculante. La posibilidad de pasar algo de JSON desde su plantilla de sitio backend / estático directamente al componente Alpine.js evita la creación de “otro punto final de API” que simplemente proporciona un fragmento de datos requeridos por un widget de JavaScript.
Lado del cliente sin el paso de compilación
Alpine.js está diseñado para usarse como una secuencia de comandos directa incluida desde una CDN pública. Su experiencia de desarrollador está diseñada para eso. Por eso es 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á optando activamente por no:
- la CLI de Vue
- componentes de un solo archivo
- paquetes más pequeños / optimizados
- una estricta CSP (Política de seguridad de contenido) ya que las plantillas en línea de Vue evalúan expresiones del lado del cliente
Entonces, sí, si bien Vue cuenta con una implementación sin compilación, su experiencia de desarrollador depende realmente de la CLI de Vue. Eso se podría decir sobre la aplicación Create React para React y la CLI de Angular. Ir sin construcción quita esos marcos de sus mejores cualidades.
¡Ahí tienes! Alpine.js es una biblioteca moderna de CDN que ofrece renderizado declarativo para una pequeña carga útil, todo sin el paso de compilación y las plantillas que requieren otros marcos. El resultado es un enfoque centrado en HTML que no solo se parece a un jQuery moderno, sino que también es un gran sustituto de él.
Si está buscando un reemplazo de jQuery que no lo obligue a ingresar a una arquitectura de SPA, ¡pruebe Alpine.js! ¿Interesado? Puede encontrar más información en Alpine.js Weekly, un resumen semanal gratuito de noticias y artículos de Alpine.js.