Introducción a Alpine.js: un marco de JavaScript para minimalistas
La innovación en los marcos JavaScript front-end es uno de los mayores eventos tecnoculturales de nuestro tiempo. Durante más de 20 años, hemos sido testigos del despliegue de la larga cola de la creatividad evolutiva. Cada nueva idea se alimenta de la olla común, lo que lleva a mejoras tanto en el proceso de desarrollo de software como en los productos finales que crean los desarrolladores.
Uno de los marcos que se está haciendo un nombre en estos días es Alpine.js. El Alpine, como sugiere su nombre, es un cuadro minimalista diseñado para un manejo ligero en terrenos irregulares. Contiene mucha potencia en un paquete delgado y de fácil absorción. Este artículo le dará una idea de Alpine.js para que pueda comprender lo que tiene que ofrecer y cuándo podría serle útil.
API minimalista de Alpine
Quién Archivos Alpine.js lo describe, la API de Alpine consta de 15 atributos, seis propiedades y dos métodos. Este es un perfil de API muy pequeño. Su objetivo minimalista es proporcionar reactividad en un formato limpio, enriquecido con algunas sutilezas del entorno, como un evento y una tienda central.
Considere la página web muy simple en el Listado 1.
Listado 1. Una página web simple construida con Alpine.js
Además de incluir el paquete Alpine vía CDN (puedes informarte sobre defer semántica aquí), donde solo dos cosas sobre los Alpes son directivas x-data y x-text.
Si pega esto en una página HTML en su sistema y lo ve en un navegador, verá el mensaje de salida “Carta de texto”. Aunque no es muy impresionante, este programa muestra dos aspectos interesantes de los Alpes.
Primero, debe incluir el marcado para que la reactividad funcione x-data directiva. Si elimina la directiva, x-text no surtirá efecto. En realidad, x-data directiva crea un componente Alpine. En este ejemplo, x-data directiva está vacía. En uso real, casi siempre tienes datos ahí; Después de todo, está escribiendo componentes destinados a reaccionar a los datos.
La segunda cosa a tener en cuenta en el Listado 1 es que puede incluir cualquier JavaScript válido x-text. Esto se aplica a todas las directivas de Alpine.
elementos de datos x y texto x
los x-data se da a todos los elementos con contenido. Eche un vistazo al Listado 2 para ver a qué me refiero.
Listado 2. Interacción entre datos x y texto x
El comienzo de la Declaración de Independencia ahora aparecerá en la página. Puedes ver eso x-data define un objeto JavaScript simple y antiguo con un campo, 'message'Que contiene el preámbulo de la Declaración. los x-text pertenece al campo de objeto.
Reactividad en Alpine.js
A continuación, usaremos la reactividad para corregir el error en la Declaración. Mira la lista 3.
Listado 3. x-on: clic y reactividad
los x-text La directiva ahora debería explicarse por sí misma. se refiere a pronoun variable expuesta por x-data directiva. La nueva pieza aquí es un botón con un botón. x-on:click directiva. Este controlador de eventos de clic reemplaza el antiguo pronombre predeterminado con un pronombre de género neutral, y la reactividad se encarga de actualizar la referencia en la referencia. x-text.
Funciones sobre datos
Las propiedades de datos en Alpine son objetos de JavaScript con todas las funciones. Consideremos otra forma de cumplir con el requisito anterior que se muestra en el Listado 4.
Listado 4. Uso de funciones de datos
En el Listado 4, puede ver que el objeto de datos ahora es un fixIt método llamado por el controlador de clics.
Aparte, recuerda que a veces verás el código de la aplicación llamando desde el teléfono. x-data directiva a una función definida en una etiqueta de secuencia de comandos: esta es una preferencia personal y funciona igual que en línea x-data:
...
...
Se obtiene información remota
Ahora cambiemos de marcha y pensemos en una solicitud más compleja. Digamos que queremos descargar una lista de presidentes estadounidenses en formato JSON desde una API externa. Lo primero que haremos será cargar la página cuando cargue. Lo usaremos para esto. x-init directiva, como se muestra en el Listado 5.
Listado 5. Precargando datos desde x-init
¿Que está pasando aqui? Pues, ante todo, x-data directiva debe ser clara: simplemente hay una presidents campo con una matriz vacía. los x-text dentro span El elemento genera el contenido de este campo.
los x-init hace que el código sea un poco más complicado. Primero, observe que está envuelto en una función autoejecutable. Esto se debe a que Alpine espera una función, no una definición de función. (Si usa un formulario de devolución de llamada asíncrono fetchno necesitará envolver la función de esta manera).
Después de obtener la lista de presidentes del punto final, la pegamos en la lista presidents Una variable expuesta como parte de Alpine x-data objeto.
Para reiterar: Alpine.js prepara datos de él a-data disponible para otras funciones directivas (p. ej. x-init) en el mismo contexto.
Repetido con Alpine.js
En este punto, nuestra aplicación recupera los datos del extremo remoto y los guarda en el estado. Tenga en cuenta que genera algo como esto [Object],[Object].... Esto no es lo que queremos. Echemos un vistazo a la replicación de datos, como se muestra en el Listado 6.
Listado 6. Replicación con Alpine.js
-
From: Until:
El Listado 6 contiene una lista desordenada normal seguida de una lista Elemento de plantilla HTMLel que x-for directiva. Esta directiva funciona como se ve en otros marcos reactivos. En este caso, te permite definir una colección, presidentsy el identificador que proporcionará el marcado adicional que representa cada instancia de esta colección, en este caso, pres.
El resto del signo utiliza pres variable para recuperar datos de objetos a través de x-text.
La aplicación ahora se ve como se muestra en la Figura 1.
IDGFigura 1. Lista de presidentes de EE. UU.
Mostrar/ocultar y hacer clic
Ahora queremos construir la aplicación para que al hacer clic en el nombre del presidente cambie la información del presidente. Para comenzar, cambiamos el marcado al que se muestra en el Listado 7.
Listado 7. Mostrar/ocultar elementos
From: Until:
Ahora, en el Listado 7, podemos usar x-show Directiva sobre un div contiene detalles del presidente. La verdad de la palabra x-show El valor determina si el contenido es visible o no. En nuestro caso, está determinada por pres.show campo. (Tenga en cuenta que en una aplicación real, es posible que no desee utilizar datos comerciales reales para completar la variable mostrar/ocultar).
Para cambiar el valor pres.show añadimos x-on:click que conduce al título. Este controlador simplemente alterna el valor verdadero/falso pres.show: pres.show = ! pres.show.
Agregar una animación de transición
La función de mostrar/ocultar de Alpine incluye enlaces integrados que puede consultar. El Listado 8 muestra cómo agregar una animación estándar.
Listado 8. Agregue un conmutador para mostrar/ocultar
From: Until:
Lo único que cambia es el elemento portador. x-show la directiva sigue ahí x-transition directiva. De forma predeterminada, Alpine aplica transiciones sensibles. En este caso, la transición es un efecto de deslizamiento y desvanecimiento. Puede personalizar ampliamente la transición aplicando sus propias clases de CSS en diferentes etapas de la animación. Mira Archivos de transición de Alpine.js para obtener más información sobre esta función.
Bloqueo de entradas
Ahora agregaremos una capacidad de filtro simple. Esto requerirá agregar la entrada que vinculó a sus datos y luego filtrar el conjunto de datos devuelto en función de ese valor. Puede ver los cambios en el Listado 9.
Lista 9. Filtrado de presidentes
...
Tenga en cuenta que, x-data El objeto ahora tiene un campo de “filtro”. Está conectado bidireccionalmente al elemento de entrada a través de x-model directiva que apunta a “filter.”
Cambiamos la plantilla x-for instrucciones para una nueva referencia getPresidents() se lleva a cabo el método x-data objeto. Este método utiliza la sintaxis estándar de JavaScript para filtrar presidentes en función de si incluyen texto en el campo de filtro.
El resultado
Al igual que su homónimo, el Alpine.js es una mochila liviana cargada con equipo esencial para atravesar las montañas. Es mínimo, pero es suficiente.
El marco incluye algunas características de nivel superior, en particular, una tienda central y un sistema de eventos, así como una arquitectura y un ecosistema de complementos.
En general, Alpine.js es ergonómico para trabajar. Si tiene experiencia con otros marcos de aviones, el Alpine debería ser lo suficientemente familiar como para que lo aprenda rápidamente. Simplicidad de declarar un componente y sus datos x-data huelgas de genio directivo.
Puede que le interese la comunicación entre componentes. Alpine.js evita el cableado abierto entre los componentes (p. ej., no hay accesorios entre padres e hijos). En su lugar, utiliza el entorno del navegador (es decir, la ventana) como uno autobús de eventos mediante $dispatch directiva. Esto está en consonancia con la filosofía de Alpine de agregar la funcionalidad suficiente para aumentar lo que ya existe. Funciona bien.
Todos estos elementos se prueban a medida que la aplicación crece en tamaño y complejidad. Así que va con cualquier pila que elijas. Alpine.js es una opción convincente la próxima vez que busque código.
Derechos de autor © 2022 IDG Communications, Inc.
