Alpine.js a fondo, construyendo componentes para WordPress

WordPress, Libreria Javascript, Web Components / / 6 minutos de lectura

Alpine.js es un framework de Javascript liviano y fácil de utilizar con el que podemos agregar interactividad en las páginas web. Nos proporciona todas las herramientas que necesitamos para crear interfaces de usuario básicas.

Utiliza una sintaxis declarativa y reactiva, es decir, te permite agregar la interactividad directamente en el HTML utilizando atributos como «x-data», «x-bind» o «x-on» entre otros. Siendo una gran alternativa a jQuery, React.js o Vue.js.

Me parece interesante destacar lo sencillo que es integrarlo con WordPress, ya sea para añadir interactividad a temas y plugins como para la creación de bloques o componentes web. También se combina muy bien con ACF y su forma de crear bloques. Ideal para proyectos escalables.

Alpine.js tiene una gran comunidad activa y una documentación muy completa que facilita mucho su aprendizaje y su uso en proyectos con WordPress.

Es el complemento perfecto para combinarlo con TailwindCSS.

¿Cómo empezamos a utilizar Alpine.js?

Ten en cuenta que en un framework que no requiere de compilación como otros. Se puede incluir en un proyecto directamente a través de un script CDN o descargando el archivo Javascript.

Puedes añadir el siguiente fragmento directamente en el <head> de tu tema en funcionamiento.

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.9/dist/cdn.min.js"></script>

También se puedes incluirlo a través del hook wp_head(). Inserta el siguiente fragmento en el archivo functions.php de tu tema en funcionamiento o plugin de personalizaciones.

<?php
// Función para cargar el script de Alpine.js tanto en el frontend como en el backend
function ie_add_alpinejs_to_wordpress() {
        wp_enqueue_script( 'alpinejs', 'https://cdn.jsdelivr.net/npm/alpinejs@3.13.9/dist/cdn.min.js', array(), null, false );
    }
}
add_action( 'enqueue_block_editor_assets', 'ie_add_alpinejs_to_wordpress' );

¡Listo! Ya tenemos todo preparado para empezar a introducir directivas y jugar con el potencial que tiene el framework.

Con Alpine.js no necesitas tener un archivo externo para añadir funciones de Javascript. Como hemos comentado consiste en añadir directamente las directivas en el marcado HTML. En WordPress puedes utilizar el bloque HTML para introducir los componentes hechos con Alpine.js. ¡Magia!

Uno de los componentes más básicos que podemos crear es el típico contador interactivo. En el siguiente código puedes ver que la directiva x-data proporciona los datos reactivos para el componente. La directiva x-on:click escucha el evento click y activa la propiedad count para incrementar un número y por último la directiva x-text se utiliza para mostrar el resultado.

<div x-data="{ count: 0 }">
    <button x-on:click="count++">+</button>
    <span x-text="count"></span>
    <button x-on:click="count--">-</button>
</div>

No parece un componente muy útil pero es un ejemplo para que veas y pruebes como funciona la reactividad. Imagina una web donde puedes votar por algo, con este componente limitado a subir 1 voto máximo y jugando con el estado y guardando en base de datos… podrías terminar haciendo un sistema básico de votaciones. Salvando las distancias, este sería únicamente un componente de un conjunto para hacer una aplicación completa.

¿Necesitas un desarrollo web a medida con WordPress?

Me especializo en desarrollar sitios webs avanzados, programando soluciones personalizadas para proyectos web.

Contáctame

Información interesante de Alpine.js

Alpine.js tiene un State o Estado que se considera el núcleo de todo. Por ejemplo puedes añadir datos a un HTML que estén disponibles de forma local o hacer que estén disponibles de forma global en una página usando x-data o Alpine.store() respectivamente.

Además trabaja con «Templating» que ofrece una serie de directivas para manipular el DOM. (Alternativa a jQuery más simple).

Escucha los eventos del navegador de una forma muy simple y se puede conectar mediante hooks a las diferentes partes del ciclo de vida de un componente.

Permite añadir Javascript directamente dentro de las expresiones por ejemplo: <div x-text="twit.toUpercase()"></div>.

Cuenta con una colección de atributos o directivas, propiedades y métodos para trabajar. Repasamos que hacen algunos de ellos.

Como cualquier framework van añadiendo mas contenido a la documentación en función de las nuevas actualizaciones.

DIRECTIVAS

  • x-text => Establece el contenido de texto de un elemento.
  • x-data => Declarar un nuevo componente y sus datos para un bloque HTML.
  • x-show => Se utiliza para alternar la visibilidad de un elemento.
  • x-if => Para crear condicionales de un bloque de HTML completo, tiene que ir dentro de la etiqueta <template x-if="open"> Contenido </template>.
  • x-transition => Crea transiciones de elementos con CSS Transitions además con opciones extra como .opacity o .scale.
  • x-bind => Establece dinámicamente atributos HTML en un elemento.
  • x-on => Directiva que se utiliza para escuchar los eventos del navegador de un elemento.
  • x-html => Establece el HTML interno de un elemento.
  • x-model => Para sincronizar datos con un campo imput.
  • x-modelable => Permite exponer cualquier propiedad de Alpine como objetivo de la directiva x-model.
  • x-teleport => Sirve para transportar un <template> a otras partes del DOM.
  • x-for => Realiza iteraciones de un bloque HTML basado en un conjunto de datos.
  • x-init => Ejecuta el código cuando Alpine inicializa un elemento.
  • x-effect => Ejecuta un script cada vez que cambie una de sus dependencias.
  • x-ref => Hacer referencia directamente a elementos mediante claves específicas utilizando $refs.
  • x-cloak => Hasta que Alpine no se inicializa el bloque HTML quedará oculto.
  • x-ignore => Evita que Alpine inicialice un bloque de HTML.
  • x-id => Te permite declarar un nuevo «scope» o alcance para cualquier ID generado con $id().

PROPIEDADES

  • $store => Para acceder a la Store global registrada.
  • $el => Referencia el elemento del DOM actual.
  • $dispatch => Para enviar un evento al navegador personalizado.
  • $watch => Observa un dato y ejecuta un Callback cuando el dato cambia.
  • $refs => Referencia a un elemento por clave (key).
  • $nextTick => Espera hasta el siguiente Tick para ejecutar un fragmento de código.
  • $root => Propiedad para recuperar el elemento raíz.
  • $id => Para generar ID únicos para evitar conflictos entre elementos.

MÉTODOS

  • Alpine.data => Sirve para reutilizar un objero de datos y hacer referencia a el usando x-data
  • Alpine.store => Para declarar una parte de datos globales y reactivos a los que se pueden acceder desde cualquier lugar usando $store.
  • Alpine.bind => Nos ayudará a reutilizar objetos x-bind dentro de la aplicación.

Como puedes ver, no es un lenguaje muy extenso, la verdad que es muy sencillo de entender y de usar en proyectos, te invito a visitar algunos de los enlaces que voy a compartir donde encontrarás un montón de componentes de copiar y pegar en tus desarrollos.

Analiza su comportamiento con la documentación oficial e intenta entender como funcionan las directivas, de esa forma podrás resolver cientos de problemas que surgen a diario en la web.

Ideas para utilizar Alpine.js

  • Utilízalo para ofrecer interactividad en el desarrollo de temas de WordPress.
  • Consultar APIs externas y manipular el contenido obtenido en JSON.
  • Crea una TODO APP o una aplicación de votación de próximos post para que vote tu comunidad (Intenta detectar la IP del usuario para que solo se pueda votar una vez por IP)
  • Ideal para proyectos escalables como CRMS, Intranets, directorios…
  • Crea tu propia colección de componentes. Si buscas vas encontrar:
Dropdown para un menú de usuario

Enlaces de interés

Espero que alguna de mis ideas te ayude a interesarte por Alpine la próxima vez que necesites añadir interactividad a tus sitios o componentes.

¡Gracias!

Entradas relacionadas

2 comentarios en “Alpine.js a fondo, construyendo componentes para WordPress”

    1. chicho_zar

      Para usar NPM tienes que estar desarrollando un Tema con Javascript, en donde tendrás un archivo package.json. Dicho esto…
      Para instalar Añpine.js es muy fácil, desde la consola mediante npm install alpinejs. Ahora si miras el package.json deberías tener la dependencia de Alpine.js.
      Para utilizarlo en plantillas, paginas, componentes… Tienes que importarlo de la siguiente forma:
      ————–

      import Alpine from 'alpinejs'
      window.Alpine = Alpine

      Alpine.start()

      ————–
      Revisa la documentación de Alpine.js ahí lo indica mucho mejor. Gracias

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comienza a escribir y presiona Intro para buscar