AlpineJS es una librería moderna de código JavaScript para la realización de interfaces dinámicas y reactivas en páginas Web. Nos permite de una manera sencilla y productiva crear comportamientos dinámicos en sitios web, editando y personalizando la funcionalidad muchas veces en el propio HTML.

Como ya hemos explicado las características de esta librería, vamos a pasar directamente a la práctica en este artículo de iniciación a Alpine.js, explicando cómo realizar un primer ejemplo sencillo. Vamos a tratar de que sirva como punto de entrada a la librería, pero sin extenderse demasiado en explicaciones sobre los distintos artefactos que vamos a utilizar.

Si quieres saber más sobre los fundamentos y características de esta alternativa para el desarrollo frontend te recomendamos acceder a la página de la categoría Alpine en DesarrolloWeb.

Para comenzar esta andadura vamos a explicar un ejemplo típico y bastante útil de un modo general: una interfaz dropdown.

Primer paso: cargar Alpine mediante su CDN

Como se explicó en la página de la categoría Alpine, para poder trabajar con la librería simplemente requerimos instalar el script JavaScript que nos ofrece su funcionalidad completa. Con incluir una etiqueta <script> que trae al código desde el CDN será más que suficiente.

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

Crear unos cuantos estilos CSS

Para que nuestra interfaz tenga un aspecto medianamente vistoso, vamos a incorporar un poquito de CSS. Te dejo todo el código por aquí:

body {
  margin: 2rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1 {
  font-size: 1.5rem;
}

.dropComponent .trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropComponent h2 {
  flex: 0 0 auto;
  font-size: 1.1rem;
  margin: 1rem 0;
}

.dropComponent .icon {
  transition: transform 0.3s ease;
}

.dropComponent .rotate {
  transform: rotate(90deg);
}

.drop {
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 1rem;
}

En este artículo importa poco cuáles son las hojas de estilo que vamos a utilizar, por lo que no vamos a explicarlas. Si acaso, cuando utilicemos los distintos elementos de la interfaz, mencionaremos algunas de las reglas CSS que sean relevantes en cada parte de la interfaz.

Un dropdown básico

Este ejercicio lo vamos a hacer en dos etapas. En la primera vamos a crear un componente de dropdown básico y luego en un segundo apartado de este artículo, añadiremos algunas mejoras para aprender más características de AlpineJS.

Vamos a ver el ejemplo básico completo y enseguida explicamos los detalles que debes conocer:

<div x-data="{ isVisible: false }" class="dropComponent">
  <span class="trigger">
    <h2 @click="isVisible = !isVisible">
      Esto es un tema
    </h2>
  </span>
  <div class="drop" x-show="isVisible">
    Lorem ipsum dolor... y otros mensajes para esta interfaz dropdown.
    </p>
  </div>
</div>

Directiva x-data

Comenzamos comentando la directiva x-data de Alpine. Es la directiva más importante porque hace que un bloque de HTML común se convierta en un componente Alpine.

Mediante la directiva x-data podemos indicar cualquier cantidad de propiedades que manejará el componente. Las propiedades se indican con la notación de objeto JavaScript. El nombre de la propiedad del objeto será el nombre de la propiedad del componente, mientras que el valor que se indique será el valor asignado de manera predeterminada.

En este caso hemos creado una propiedad llamada isVisible. El valor asignado a esta propiedad será el booleano false.

Solamente dentro del bloque HTML donde está definida la directiva x-data podremos acceder a las propiedades declaradas en ella.

Disparador de la apertura del dropdown

A continuación podemos ver un <span> que tiene dentro un <h2>. Ese <h2> es el que hace de disparador de la apertura del dropdown.

Para conseguir abrir ese elemento dropdown lo que haremos será definir un manejador de evento click sobre el <h2>. La directiva para poder asociar manejadores de eventos es x-on, pero la podemos acortar con una simple "@". A continuación le indicamos el tipo de evento que queremos usar, en este caso @click.

Si quisieras usar x-on, el equivalente a @click sería x-on:click. Tampoco es que sa tanto texto, pero el shorcut nos permite un código más claro a primera vista.

El comportamiento o manejador asociado a este evento se coloca en el propio valor del atributo @click. En este caso lo que hacemos es cambiar el valor de la propiedad isVisible, colocando la negación de la propia propiedad. Es decir si isVisible estaba a false pasará a estar a true y viceversa.

@click="isVisible = !isVisible"

Elemento dropdown

Un poco más abajo podemos ver el elemento que se muestra o se oculta dependiendo del Estado de la propiedad isVisible.

En Alpine es muy fácil conseguir que un elemento aparezca o desaparezca dependiendo del valor de una propiedad boleana. Simplemente utilizamos para ello la directiva x-show. Como valor a esta directiva indicamos la propiedad o la expresión que tiene que evaluarse para saber si el elemento debe mostrarse o no.

x-show="isVisible"

Ya está! Con esto hemos conseguido crear una interfaz de drop down que podemos utilizar perfectamente para un menú emergente en una página web, o para ofrecer información adicional de una manera rápida al usuario sobre algún tema.

Interfaz dropdown mejorada

El ejemplo básico de dropdown es el que puedes encontrar en la documentación de Alpine en los primeros pasos. Está bastante bien, pero era quizás demasiado básico. Por eso vamos a adornarlo con algunas nuevas características que nos permitan aprender otros detalles sobre esta biblioteca JavaScript.

En este segundo ejemplo nuestra interfaz dropdown se ve así:

<div x-data="{ isVisible: false }" class="dropComponent">
  <span class="trigger">
    <svg class="icon" :class="isVisible && 'rotate'" xmlns="http://www.w3.org/2000/svg" height="32px"
      viewBox="0 -960 960 960" width="32px" fill="#5f6368">
      <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
    </svg>
    <h2 @click="isVisible = !isVisible">
      Esto es un tema
    </h2>
  </span>
  <div class="drop" x-show="isVisible" x-transition>
    Lorem ipsum dolor, sit amet consectetur adipisicing…
    </p>
  </div>
</div>

Habrás observado que la mayor parte del código es idéntico al ejemplo anterior. Solamente hemos añadido un par de detalles que vamos a comentar.

Icono dinámico con x-bind

En nuestro elemento de trigger hemos colocado un icono. Ese icono tiene un comportamiento dinámico gracias a la directiva x-bind.

En el código anterior no encontrarás la directiva x-bind, ya que hemos utilizado su shortcut que es simplemente ":".Lo que encontrarás es un atributo :class en la etiqueta <svg> del icono. En realidad podrás haber puesto x-bind:class, pero es demasiado largo.

:class="isVisible && 'rotate'"

Ese código quiere decir que se asigne la clase "rotate" en el caso de que la propiedad isVisible se evalúe a true.

Crear una transición con x-transition

El otro detalle que podrás apreciar como diferencia es el uso de la directiva x-transition. Esta directiva lo único que produce es que el efecto de ocultar o mostrar el dropdown se realice con una transición suavizada. Con esto añadimos un poco de vistosidad y dinamismo a nuestra interfaz.

<div class="drop" x-show="isVisible" x-transition>

Código completo de este ejemplo de iniciación a Alpine

Ya para acabar voy a dejar el código completo de este ejemplo de iniciación a la librería AlpineJS. Para ponerlo en marcha simplemente tienes que copiar y pegar el código en cualquier archivo con extensión .html y abrirlo con tu navegador.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js</title>
  <style>
    body {
      margin: 2rem;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h1 {
      font-size: 1.5rem;
    }

    .dropComponent .trigger {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .dropComponent h2 {
      flex: 0 0 auto;
      font-size: 1.1rem;
      margin: 1rem 0;
    }

    .dropComponent .icon {
      transition: transform 0.3s ease;
    }

    .dropComponent .rotate {
      transform: rotate(90deg);
    }

    .drop {
      border: 1px solid #eee;
      padding: 1rem;
      border-radius: 1rem;
    }
  </style>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

<body>
  <h1>Ejemplo</h1>

  <div x-data="{ isVisible: false }" class="dropComponent">
    <span class="trigger">
      <svg class="icon" :class="isVisible && 'rotate'" xmlns="http://www.w3.org/2000/svg" height="32px"
        viewBox="0 -960 960 960" width="32px" fill="#5f6368">
        <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
      </svg>
      <h2 @click="isVisible = !isVisible">
        Esto es un tema
      </h2>
    </span>
    <div class="drop" x-show="isVisible" x-transition>
      Lorem ipsum dolor… 
      Dignissimos!
      </p>
    </div>
  </div>



    <div x-data="{ isVisible: false }" class="dropComponent">
      <span class="trigger">
        <h2 @click="isVisible = !isVisible">
          Esto es un tema
        </h2>
      </span>
      <div class="drop" x-show="isVisible">
        Lorem ipsum dolor... y otros mensajes para esta interfaz dropdown.
        </p>
      </div>
    </div>

</body>

</html>

Se han colocado los dos elementos dropdown, tanto el básico como el avanzado.

Conclusión

Este artículo solo pretendía ofrecer una iniciación a la librería Alpine, sin entrar en demasiados detalles, intentando aportar un efecto vistoso con poco código. Sin embargo, la librería en sí tiene bastante más que aprender sobre cada una de las directivas que hemos usado en este ejemplo, y muchas otras.

Por mencionar algunos detalles en los que no queríamos llegar a entrar:

• Con x-data podríamos añadir funcionalidad aparte de datos.
• la directiva x-transition es totalmente configurable en lo que respecta a duración y estilo del efecto de transición.
• x-bind permite bindear a cualquier tipo de atributo del HTML, consiguiendo comportamientos reactivos

Y esto son solo unos detalles. Puedes consultar otros ejemplos en la documentación de Alpine. Nosotros iremos abordando todas estas directivas y otras muchas utlidades de Alpine en próximos artículos, que esperamos publicar en breve.