No sucede a menudo que tras probar una nueva herramienta, inmediatamente sienta la necesidad de escribir un artículo acerca de ella. Pero eso es exactamente lo que ha sucedido cuando he tenido la oportunidad de jugar con el último proyecto de Caleb Porzio, AlpineJS.
Etiquetado como ‘el Tailwind de JavaScript’, intenta dar la reactividad y gestión de estado de herramientas más grandes como React o Vue, pero sin su complejidad. ¿Cómo lo consigue? Centrándose en el comportamiento de la mayoría de webs, en lugar de las herramientas necesarias para construir aplicaciones de página única (single page application)
Un ejemplo básico
Si necesito construir un menú desplegable, la herramienta que elegiría hoy sería Vue. Construir estos componentes en Vue es algo trivial, al menos si lo comparo con JavaScript puro o jQuery.
Unas pocas directivas en HTML y un par de líneas de código en un fichero JavaScript es todo lo que se necesita para crear lo que antes necesitaba más de 30 líneas de código JavaScript.
Anteriormente conocido como Project X, AlpineJS lleva este concepto más allá. Si usas CDN, el framework incluso se inicializa automáticamente. Cuatro directivas es todo lo que se necesita para crear un menú desplegable o un modal.
<div x-data="{ open: false }">
<button x-on:click="open = true">Open Dropdown</button>
<ul x-show="open" x-on:click.away="open = false">
Dropdown Body
</ul>
</div>Revisemos el código
La directiva x-data indica a AlpineJS que queremos crear un nuevo componente, con su propio alcance. Es similar a la propiedad data que seguramente habrás usado en Vue.
Hay dos modos de usar esta directiva, podemos o bien pasar un objeto JSON, como en el ejemplo anterior, o bien puedes darle un nombre que estará asociado a una función. Está última es particularmente útil cuando quieres extraer datos o comportamiento para usarlos en otra parte.
Por ejemplo, puedes conseguir lo mismo, pero de forma reutilizable, intercambiando el valor del objeto { open : false } por la función dropdown().
<div x-data="dropdown()">
<button x-on:click="open = true">Open Dropdown</button>
<ul x-show="open" x-on:click.away="open = false">
Dropdown Body
</ul>
</div>
...
<script>
function dropdown() {
return {
show: false
}
}
</script>Puedes extraer el resto de la lógica de modo similar, el resultado sería:
<div x-data="dropdown()">
<button x-on:click="open()">Open Dropdown</button>
<ul x-show="isOpen()" x-on:click.away="close()">
Dropdown Body
</ul>
</div>
...
<script>
function dropdown() {
return {
show: false,
open() { this.show = true },
close() { this.show = false },
isOpen() { return this.show === true },
}
}
</script>Sin embargo, para los casos de uso más sencillos, sería correcto usar el enfoque del objeto.
Las propiedades x-on y x-show se inspiran en las convenciones de Vue. Así que si estás acostumbrado a Vue, estará bastante claro como funciona.
Lo único que es ligeramente diferente son los modificadores inline. .away, por ejemplo, sólo disparará el manejador de evento si es disparado desde un origen diferente a sí mismo o sus hijos.
Un buen ejemplo de esto es cerrar el menú desplegable a menos que el usuario haga clic en el desplegable o en uno de los elementos hijos del desplegable. Hay muchos otros métodos disponibles, así que vale la pena echar un vistazo al repositorio GitHub de AlpineJS.
En las próximas semanas escribiré tutoriales acerca de patrones comunes usados en webs modernas, pero si quieres averiguar más ahora mismo, puedes revisar el fichero ‘readme’ del proyecto.
Puedes leer el artículo original en inglés en:
https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue