¿Qué es Alpine.js y cuáles son las ventajas de usarlo?

¿Estás llevando cursos de JavaScript y buscas un buen framework? La innovación en los frameworks JavaScript front-end es uno de los grandes fenómenos culturales de nuestro tiempo. Durante más de 20 años hemos sido testigos de una larga cola de creatividad evolutiva.

Cada nueva idea suscita mejoras tanto en el proceso de desarrollo de software como en los productos finales que construyen los desarrolladores. Uno de los frameworks que se está haciendo un nombre estos días es Alpine.js. Hoy te explicamos qué es Alpine.js y las razones para usarlo, ¡comencemos!

¿Qué es Alpine.js?

Alpine.js es un framework que te ofrece la naturaleza reactiva y declarativa de grandes frameworks como Vue o React a un costo mucho menor. De hecho, consigues mantener tu DOM, y agregar el comportamiento como mejor te parezca. Asimismo, es una herramienta robusta y mínima para componer comportamientos directamente en el código.

Consideremos un patrón básico de interfaz de usuario como las pestañas. El objetivo final es que cuando un usuario haga clic en una pestaña, se muestre su contenido. Si venimos de un fondo de PHP, podríamos lograr fácilmente este lado del servidor. Sin embargo, la actualización de la página con cada clic en la pestaña no es muy reactiva. 

Para crear una mejor experiencia a lo largo de los años, los desarrolladores han recurrido a jQuery y/o Bootstrap. En esa situación, se crea un evento en la pestaña, y cuando un usuario hace clic, el evento se dispara y se le indica al navegador qué hacer.

Eso funciona, pero este estilo de codificación en el que se le dice al navegador exactamente lo que tiene que hacer (codificación imperativa) podría crear un problema. Imagina que quisiéramos desactivar el botón después de que se haya pulsado o quisiéramos cambiar el color de fondo de la página. Sería un gran problema de código.

Los desarrolladores han resuelto este problema recurriendo a frameworks como Vue, Angular y  React. Estos frameworks permiten escribir un código más limpio utilizando el DOM virtual: una especie de espejo de la interfaz de usuario almacenada en la memoria del navegador.

El resultado es que cuando "ocultas" un elemento del DOM (como una pestaña) en uno de estos frameworks, no se añade un atributo de estilo display:none; sino que desaparece literalmente del DOM.

Esto permite escribir un código más declarativo, más limpio y más fácil de leer. Sin embargo, esto tiene un costo. Típicamente, el tamaño del paquete de estos frameworks es grande y para aquellos que vienen de un fondo jQuery, la curva de aprendizaje se siente increíblemente empinada; en especial cuando todo lo que quieres hacer es cambiar pestañas. Y aquí es donde entra Alpine.js.

Al igual que Vue y React, Alpine.js permite escribir código declarativo, pero utiliza el DOM real, modificando el contenido y los atributos de los mismos nodos que podrías editar cuando abres un editor de texto o herramientas de desarrollo.

Como resultado, puedes perder el tamaño de los archivos, la magia y la carga cognitiva de un framework más grande, pero mantener la metodología de programación declarativa. Y esto se consigue sin bundler, sin proceso de construcción y sin etiqueta script. Solo tienes que cargar 6kb de Alpine.js y ¡listo!

Te puede interesar: ¿Qué es JavaScript? Descubre sus 5 principales usos

Ventajas de usar Alpine.js

La primera ventaja de Alpine es su facilidad de instalación. Basta con añadir una etiqueta de script que vincule la biblioteca, y ya está. No necesitas compilar tu JavaScript o estructurar tu proyecto de ninguna manera específica. Esto lo hace el candidato perfecto para la integración con proyectos existentes. También tienes un paquete npm disponible si tu proyecto ya utiliza npm.

Otro de sus pros es la baja curva de aprendizaje, en especial si ya tienes algo de experiencia con otros frameworks. Los conceptos y la sintaxis detrás del framework están fuertemente inspirados en Vue.js. Alpine tiene actualmente 14 directivas y 6 "propiedades mágicas" que se convierten en bloques de construcción para muchos escenarios de interfaz de usuario.

Estas directivas te permiten hacer la mayoría de las funciones que harías con un framework más robusto, como plantillas, vinculación de datos vista/modelo, transiciones de interfaz de usuario y manejo simplificado de eventos. Todo ello en un pequeño paquete y directamente en tu HTML. Es por esto que el creador de Alpine.js, a menudo se refiere a la biblioteca como "Tailwind para js". Veamos un ejemplo de un componente desplegable escrito en Alpine:

<div x-data="{ open:false }">
    <button @click="open = true">Open Dropdown</button>
    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

Como ves, el framework Alpine cubre muchos casos de uso donde frameworks como Vue/React están simplemente demasiado grandes, y añaden complejidad al front.end que simplemente no necesitas. ¡Esperamos que este artículo te haya resultado útil!

¿Te gustaría aprender a programar? En Coders Free contamos con diversos cursos online con todos los niveles de programación, así como servicios de diseño gráfico para hacer crecer tu negocio. ¡Contáctanos para obtener más información!