Presentamos Alpine.js: un pequeño marco de JavaScript

1. ¿Qué es Alpine.js?
   1. ¿Cuándo debería optar por Alpine?
   2. ¿Cuándo debería buscar en otra parte?
2. De jQuery a Vue a Alpine
   1. Empezando
   2. Capturar entradas de usuario
   3. Eventos de clic, atributos booleanos y clases de alternancia
   4. Ocultar y mostrar
3. Propiedades mágicas
4. Construyamos algo útil
5. Basta con JavaScript

¿Alguna vez creó un sitio web y utilizó jQuery, Bootstrap, Vue.js o React para lograr una interacción básica con el usuario? Alpine.js es una fracción del tamaño de estos marcos porque no implica pasos de compilación y proporciona todas las herramientas que necesita para crear una interfaz de usuario básica.

Como la mayoría de los desarrolladores, tengo una mala tendencia a complicar demasiado mi flujo de trabajo, especialmente si hay algo nuevo en el horizonte. ¿Por qué usar CSS cuando puedes usar CSS-in-JS? ¿Por qué usar Grunt cuando puedes usar Gulp? ¿Por qué usar Gulp cuando puedes usar Webpack? ¿Por qué utilizar un CMS tradicional cuando puedes trabajar sin cabeza? Sin embargo, de vez en cuando, el nuevo atractivo hace la vida más sencilla.

Recientemente, el auge de herramientas basadas en utilidades como Tailwind CSS ha hecho esto para CSS, y ahora Alpine.js promete algo similar para JavaScript.

En este artículo, veremos más de cerca Alpine.js y cómo puede reemplazar JQuery o bibliotecas JavaScript más grandes para crear sitios web interactivos. Si crea regularmente sitios que requieren un poco de Javascript para alterar la interfaz de usuario en función de alguna interacción del usuario, entonces este artículo es para usted.

A lo largo del artículo, me refiero a Vue.js, pero no te preocupes si no tienes experiencia con Vue, no es necesario. De hecho, parte de lo que hace que Alpine.js sea excelente es que apenas necesitas saber nada de JavaScript.

Ahora comencemos.

¿Qué es Alpine.js?

Según el autor del proyecto, Caleb Porzio:

“Alpine.js le ofrece la naturaleza reactiva y declarativa de grandes frameworks como Vue o React a un costo mucho menor. Puedes mantener tu DOM y aplicar el comportamiento como mejor te parezca”.

Analicemos eso un poco.

Consideremos un patrón de interfaz de usuario básico como Tabs . Nuestro objetivo final es que cuando un usuario haga clic en una pestaña, se muestre el contenido de la pestaña. Si tenemos experiencia en PHP, podríamos lograr fácilmente este lado del servidor. Pero la actualización de la página con cada clic en una 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, creamos un detector de eventos en la pestaña y, cuando un usuario hace clic, el evento se activa y le indicamos al navegador qué hacer.

Vea Pen Mostrando/ocultando con jQuery de Phil en CodePen .

Eso funciona. Pero este estilo de codificación en el que le decimos al navegador exactamente qué hacer (codificación imperativa) rápidamente nos mete en un lío. Imagínese si quisiéramos desactivar el botón después de hacer clic en él, o si quisiéramos cambiar el color de fondo de la página. Rápidamente entraríamos en un código de espagueti serio.

Los desarrolladores han resuelto este problema recurriendo a marcos como Vue, Angular y React. Estos marcos nos permiten escribir 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 DOM (como una pestaña) en uno de estos marcos; no agrega un display:none;atributo de estilo, sino que literalmente desaparece del DOM "real".

Esto nos permite escribir código más declarativo que sea más limpio y más fácil de leer. Pero esto tiene un costo. Por lo general, el tamaño del paquete de estos marcos es grande y para aquellos que tienen experiencia en jQuery, la curva de aprendizaje parece increíblemente empinada. ¡Especialmente cuando todo lo que quieres hacer es alternar pestañas! Y ahí es donde interviene Alpine.js.

Al igual que Vue y React, Alpine.js nos permite escribir código declarativo pero utiliza el DOM “real”; modificar los contenidos y atributos de los mismos nodos que usted y yo podríamos editar cuando abrimos un editor de texto o herramientas de desarrollo. Como resultado, puede perder el tamaño de archivo, la magia y la carga cognitiva de un marco más grande pero conservar la metodología de programación declarativa. Y obtienes esto sin paquete, sin proceso de compilación y sin etiqueta de script. ¡Simplemente cargue 6kb de Alpine.js y listo!

¿Cuándo debería optar por Alpine?

Para mí, la fortaleza de Alpine está en la facilidad de manipulación de DOM. Piense en esas cosas que usó de inmediato con Bootstrap, Alpine.js es excelente para ellas. Ejemplos serían:

• Mostrar y ocultar nodos DOM bajo ciertas condiciones,
• Enlace de entrada del usuario,
• Escuchar eventos y alterar la interfaz de usuario en consecuencia,
• Anexando clases.

También puede usar Alpine.js para crear plantillas si sus datos están disponibles en JSON, pero guardémoslo para otro día.

¿Cuándo debería buscar en otra parte?

Si está recuperando datos o necesita realizar funciones adicionales como validación o almacenamiento de datos, probablemente debería buscar en otra parte. Los marcos más grandes también vienen con herramientas de desarrollo que pueden ser invaluables al crear interfaces de usuario más grandes.

De jQuery a Vue a Alpine

Hace dos años, Sarah Drasner publicó un artículo en Smashing Magazine, " Reemplazando jQuery con Vue.js: No es necesario ningún paso de compilación ", sobre cómo Vue podría reemplazar jQuery en muchos proyectos. Ese artículo me inició en un viaje que me llevó a usar Vue casi cada vez que creo una interfaz de usuario. Hoy vamos a recrear algunos de sus ejemplos con Alpine, lo que debería ilustrar sus ventajas sobre jQuery y Vue en ciertos casos de uso. Elchat Directorio de chats en español

La sintaxis de Alpine se ha extraído casi por completo de Vue.js. En total, hay 13 directivas. Cubriremos la mayoría de ellos en los siguientes ejemplos.

Empezando

Al igual que Vue y jQuery, no se requiere ningún proceso de compilación. A diferencia de Vue, Alpine se inicializa solo, por lo que no es necesario crear una nueva instancia. Simplemente cargue Alpine y listo.

script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer/script

El alcance de cualquier componente determinado se declara mediante la x-datadirectiva. Esto inicia y establece algunos valores predeterminados si es necesario:

div x-data="{ foo: 'bar' }".../div

Capturar entradas de usuario

• Ver sección en el artículo de Sarah Drasner →

x-modelnos permite mantener cualquier elemento de entrada sincronizado con los valores establecidos usando x-data. En el siguiente ejemplo, configuramos el valor del nombre en una cadena vacía (dentro de la formetiqueta). Usando x-model, vinculamos este valor al campo de entrada. Al usar x-text, inyectamos el valor en el innerTextelemento del párrafo.

Consulte la entrada del usuario sobre Pen Capturing con Alpine.js de Phil en CodePen .

Esto resalta las diferencias clave con Alpine.js y jQuery y Vue.js.

Actualizar la etiqueta de párrafo en jQuery requeriría que escuchemos eventos específicos (¿keyup?), identifiquemos explícitamente el nodo que deseamos actualizar y los cambios que deseamos realizar. La sintaxis de Alpine, por otro lado, simplemente especifica lo que debería suceder. Esto es lo que se entiende por programación declarativa.

Actualizar el párrafo en Vue, aunque simple, requeriría una nueva etiqueta de script:

new Vue({ el: '#app', data: { name: '' } });

Si bien esto puede no parecer el fin del mundo, destaca la primera gran ganancia con Alpine. No hay cambio de contexto. Todo se hace allí mismo, en HTML, sin necesidad de JavaScript adicional.

Eventos de clic, atributos booleanos y clases de alternancia

• Ver sección en el artículo de Sarah Drasner →

Al igual que con Vue, :sirve como abreviatura de x-bind(que vincula atributos) y @es abreviatura de x-on(que indica que Alpine debe escuchar eventos).

En el siguiente ejemplo, creamos una instancia de un nuevo componente usando x-datay configuramos el valor predeterminado de showcomo falso. Cuando se hace clic en el botón, alternamos el valor de show. Cuando este valor es verdadero, le indicamos a Alpine que agregue el aria-expandedatributo.

x-bindfunciona de manera diferente para las clases: pasamos un objeto donde la clave es el nombre de la clase ( activeen nuestro caso) y el valor es una expresión booleana ( show).

Consulte Eventos de clic del lápiz, atributos booleanos y clases de alternancia con Alpine.js de Phil en CodePen .

Ocultar y mostrar

• Ver sección en el artículo de Sarah Drasner →

La sintaxis para mostrar y ocultar es casi idéntica a la de Vue.

Vea Pen Mostrando/ocultando con Alpine.js de Phil en CodePen .

Esto establecerá un nodo DOM determinado en display:none. Si necesita eliminar un elemento DOM por completo, x-ifpuede utilizarlo. Sin embargo, debido a que Alpine.js no usa el DOM virtual, x-ifsolo se puede usar en una template/template(etiqueta que envuelve el elemento que desea ocultar).

Propiedades mágicas

Además de las directivas anteriores, tres propiedades mágicas proporcionan algunas funciones adicionales. Todo esto le resultará familiar a cualquiera que trabaje en Vue.js.

• $elrecupera el componente raíz (lo que tiene el atributo x-data);
• $refsle permite tomar un elemento DOM;
• $nextTickgarantiza que las expresiones sólo se ejecuten una vez que Alpine haya hecho su trabajo;
• $eventse puede utilizar para capturar un evento del navegador de la naturaleza.

Consulte las propiedades de Pen Magic de Phil en CodePen .

Construyamos algo útil

Es hora de construir algo para el mundo real. En aras de la brevedad, usaré Bootstrap para los estilos, pero usaré Alpine.js para todo JavaScript. La página que estamos creando es una página de inicio simple con un formulario de contacto que se muestra dentro de un modal que se envía a algún controlador de formulario y muestra un bonito mensaje de éxito. ¡Justo el tipo de cosas que un cliente podría pedir y esperar pronto!

Nota : Puede ver el marcado original aquí .

Para que esto funcione, podríamos agregar jQuery y Bootstrap.js, pero eso supone una sobrecarga considerable para poca funcionalidad. Probablemente podríamos escribirlo en Vanilla JS, pero ¿quién quiere hacerlo? En su lugar, hagamos que funcione con Alpine.js.

Primero, establezcamos un alcance y algunos valores iniciales:

body x-data="{ showModal: false, name: '', email: '', success: false }"

Ahora, hagamos que nuestro botón establezca el showModalvalor en verdadero:

button @click="showModal = true" Get in touch/button 

Cuando showModales cierto, necesitamos mostrar el modal y agregar algunas clases:

div :class="{ 'show d-block': showModal }" x-show="showModal" role="dialog" 

Vinculemos los valores de entrada a Alpine:

input type="text" name="name" x-model="name" input type="email" name="email" x-model="email" 

Y deshabilite el botón 'Enviar', hasta que se establezcan esos valores:

button type="button" :disabled="!name || !email"Submit/button

Finalmente, enviemos datos a algún tipo de función asincrónica y ocultemos el modal cuando hayamos terminado:

button type="button" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() = {showModal = false; success= true;})"Submit/button 

¡Y eso es todo!

Vea el Pen Something útil creado con Alpine.js por Phil en CodePen .

Basta con JavaScript

Cuando construyo sitios web, intento preguntarme cada vez más qué sería “suficiente JavaScript”. Al crear una aplicación web sofisticada, ese bien podría ser React. Pero al crear un sitio de marketing o algo similar, Alpine.js parece suficiente. (E incluso si no lo es, dada la sintaxis similar, cambiar a Vue.js no lleva nada de tiempo).

Es increíblemente fácil de usar (especialmente si nunca has usado VueJS). Es pequeño (6kb comprimido). Y significa que no habrá más cambios de contexto entre archivos HTML y JavaScript.

Hay funciones más avanzadas que no están incluidas en este artículo y Caleb agrega nuevas funciones constantemente. Si desea obtener más información, consulte los documentos oficiales en Github .

(ra, il)Explora más en

• javascript
• Marcos

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Presentamos Alpine.js: un pequeño marco de JavaScript

¿Qué es Alpine.js?De jQuery a Vue a AlpinePropiedades mágicasConstruyamos algo útilBasta con JavaScriptAnuncie en la revista Smashing Implemente rápidame

programar

es

https://aprendeprogramando.es/static/images/programar-presentamos-alpine-1017-0.jpg

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente