¿Qué es Alpine.js y cómo se usa?

El mundo del desarrollo web es caótico: los marcos aparecen y desaparecen y las cosas pueden ser abrumadoras tanto para los desarrolladores nuevos como para los experimentados.

A diferencia de la mayoría de los marcos de desarrollo web, Alpine.js pretende ser lo más simple posible, pero lo suficientemente potente como para manejar conceptos como la reactividad y los efectos secundarios.

Primeros pasos con Alpine.js

Instalar Alpine.js es bastante simple. Solo necesitas incluir lo siguiente guion etiqueta en tu HTML:

<guionaplazarorigen=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">guion>

Alternativamente, puede instalar Alpine.js en su proyecto usando Node Package Manager:

npm instalar alpinejs

Reactividad en Alpine.js

Crear un índice.htm archivo y agregue el siguiente código repetitivo:

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8">





instagram viewer


<metahttp-equiv="X-UA-Compatible"contenido="IE=borde">
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0">
<título>Alpine.jstítulo>
cabeza>
<cuerpo>
<guionaplazarorigen=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">guion>
cuerpo>
html>

El aplazar atributo en el guion La etiqueta le dice al navegador que ejecute el script solo después de que haya terminado de analizar el documento.

Alpine.js proporciona varias directivas como datos x que utiliza para almacenar datos y texto x que utiliza para establecer textointerno del componente adjunto. Para usar estas directivas, agregue el siguiente código a su HTML.

<divisióndatos x="{nombre: 'David Uzondu', organización: 'Hacer uso de'}">
 Mi nombre es <fuertetexto x="nombre">fuerte>
 y <itexto x="organización">i> es increíble
división>

La directiva x-data almacena un objeto con las claves nombre y organización. Luego puede pasar esas claves a la directiva x-text. Cuando ejecute el código, Alpine.js completará los valores:

Cómo se compara Alpine.js con React

Alpine.js es un marco ligero que lo hace adecuado para desarrollar pequeños proyectos y prototipos.

En marcos más grandes como React, usas ganchos como usarEfecto() para manejar los efectos secundarios en el ciclo de vida del componente. Este enlace ejecuta una función de devolución de llamada cada vez que cambia uno de los elementos de la matriz de dependencia:

importar {usar efecto} de"Reaccionar";
funciónmicomponente() {
 usarEfecto(() => {
/* La función de devolución de llamada va aquí */
 }, [ /* La matriz de dependencia es opcional */ ]);
}

Para manejar los efectos secundarios en Alpine.js, puede usar el efecto x directiva. Por ejemplo, supongamos que desea ver una variable y registrar el valor cada vez que cambia:

<divisióndatos x="{numero 1}"efecto x="console.log (número)">
<h1texto x="número">h1>
<botón @hacer clic="número = número + 1">Agregar nuevo númerobotón>
división>

Lo primero que notará es que no necesita especificar una dependencia. Alpine simplemente escuchará los cambios en todas las variables pasadas a efecto x. El @hacer clic directiva incrementa la variable número en 1.

Representación condicional en Alpine.js

Renderizar elementos condicionalmente es algo que puedes hacer en frameworks como React. Alpine.js también le permite renderizar elementos condicionalmente. Proporciona un x-si directiva y una especial plantilla elemento que puede usar para representar elementos condicionalmente.

Crea otro índice.htm archivo y agregue el mismo código repetitivo que antes. Agregue el siguiente código al cuerpo del HTML.

<divisióndatos x="{mostrado: verdadero}">
<botón @hacer clic="mostrado=!mostrado"texto x="¿mostrado? 'Ocultar elemento': 'Mostrar elemento'">Palancabotón>
<plantillax-si="mostrado">
<división>El rápido zorro marrón saltó sobre el perro.división>
plantilla>
división>

El x-si se pasa la directiva al plantilla elemento. Esto es importante porque permite que Alpine.js realice un seguimiento de un elemento que se agrega o elimina de la página. El plantilla el elemento debe contener un elemento de nivel raíz; el siguiente código violaría esa regla:

<plantillax-si="mostrado">
<división>Este elemento se renderizará bien.división>
<división>Este elemento será ignorado por Alpine.jsdivisión>
plantilla>

Creación de una aplicación de tareas pendientes con Alpine.js

Es hora de combinar todo lo que ha aprendido hasta ahora y crear una aplicación de tareas sencilla con soporte de almacenamiento local. Primero, cree una carpeta y llénela con un índice.htm archivo y un estilo.css archivo. Agregue el código repetitivo en el archivo index.htm e incluya una referencia al estilo.css archivo:

<enlacereal="hoja de estilo"href="estilo.css">

No te preocupes por el CSS aquí, simplemente copia el estilo.css archivo de este repositorio GitHub del proyecto.

Para conservar los datos después de recargar la página, necesita Alpine.js persistir enchufar. Agregue la compilación CDN de este complemento como un guion etiqueta, justo encima de la compilación central de Alpine.js CDN:

<guionaplazarorigen=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">guion>

En el cuerpo definir un división elemento con un datos x directiva. Esta directiva debe contener una matriz llamada todas las tareas. Luego, agrega un h1 elemento con el texto "Aplicación de Tareas".

<divisióndatos x="{todas las tareas: $ persisten ([])}">
<h1>Aplicación de tareas pendientesh1>
división>

El $ persistir plugin es un envoltorio para el Almacenamiento local de JavaScript API. Le dice al navegador que almacene la matriz en el almacenamiento local, de modo que los datos permanezcan intactos incluso después de recargar la página. Agrega un forma con un entregar directiva que también evita la acción de envío predeterminada.

<forma @enviar.prevenir="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{tarea: $refs.task.value.trim(), id: Date.now(), done: false}].concat (allTasks)
: $refs.tarea.valor.trim() '' 
? alerta ('El valor de entrada no puede estar vacío')
: alert('Tarea agregada ya.');
 $refs.tarea.valor=''
">
forma>

El $ referencias cláusula permite el acceso al elemento DOM con la "tarea" referencia x directiva. El código también maneja alguna validación y asegura que no agrega cadenas vacías ni tareas duplicadas a la lista. Antes de finalizar el formulario, agregue un aporte elemento con un referencia x de "tarea" y un marcador de posición. Luego agregue un botón y establezca su tipo en "enviar".

<aportetipo="texto"referencia x="tarea">
<botóntipo="entregar">Agregar tareabotón>

A continuación, defina un div con la clase "elementos". Este div debe contener otros dos divs: uno con el datos x establecido en una matriz "incompleta" y el otro establecido en una matriz "completa". Ambos divs deben tener un efecto x directiva y la matriz debe estar envuelto en el $ persistir cláusula como se mostró anteriormente.

<divisiónclase="elementos">
<divisióndatos x="{incompleto:$persistir([])}"efecto x="sin completar = allTasks.filter (x=>x.donefalse)">
división>

<divisióndatos x="{completado:$persistir([])}"efecto x="completed=allTasks.filter (y=>y.donetrue).reverse()">
división>
división>

En el primer div, agregue un h3 etiqueta con el texto "Incompleto". Luego, para cada elemento de la incompleto matriz, renderizar un división que contiene los "controles" y la tarea en sí.

Los controles permiten al usuario eliminar un elemento o marcarlo como completado:

<h3>incompletoh3>
<plantillax-para="elemento en incompleto":llave="elemento.id">
<divisióndatos x="{showControls: falso}" @ratón sobre="showControls = verdadero" @ratón fuera="mostrar controles = falso"
 clase = "tarea"
 >
<divisiónclase="control S">
<divisiónespectáculo x="mostrarControles" @hacer clic="elemento.hecho=verdadero">[METRO]división>
<divisiónespectáculo x="mostrarControles" @hacer clic="allTasks=allTasks.filter (x=>x.id!==elemento.id)">[R]división>
división>
<divisióntexto x="elemento.tarea" >división>
división>
plantilla>

Puedes usar el x-para Directiva para iterar a través de una matriz y representar elementos. Esto es similar a v-para en Vue y el matriz.mapa() método de matriz en Reaccionar. El div "controles" contiene dos divs con la cadena "[M]" y "[R]". Estas cadenas significan "Marcar como hecho" y "Eliminar". Puede reemplazarlos con iconos adecuados si lo desea.

El espectáculo x directiva establece un elemento mostrar Propiedad CSS para ninguno si el valor que apunta a la directiva es falso. El segundo div en el div "elementos" es similar al primero con algunas excepciones notables: El h3 text se establece en "Completado", el primer hijo del div "control" tiene el texto "[U]" en lugar de "[M]" y en este div @hacer clic directiva, elemento.hecho se establece en FALSO.

<divisiónespectáculo x="mostrarControles" @hacer clic="elemento.hecho=falso">[U]división>

Y eso es todo, repasó los conceptos básicos de Alpine.js y usó lo que aprendió para crear una aplicación básica de tareas pendientes.

Hacer que el código Alpine.js sea más fácil de escribir

Cuando comienza a escribir código Alpine.js, puede ser difícil entenderlo. Afortunadamente, los editores de código como Visual Studio Code brindan una amplia gama de extensiones que facilitan el desarrollo.

En Extensions Marketplace, puede obtener la extensión Alpine.js IntelliSense que facilita el trabajo con directivas. Esto puede ayudar a mejorar su productividad al usar Alpine.js en sus proyectos.