Por qué el panel de Webplo está construido con Flux

Todo lo que ve un cliente de Webplo después de iniciar sesión (el panel, los ajustes del sitio, las reservas, la facturación, las páginas de la cuenta) está construido con Flux, la librería de componentes creada por el equipo de Livewire. También lo está la consola de operaciones con la que gestionamos la plataforma.

Son 175 vistas Blade, 37 componentes distintos de Flux y, en el último recuento, 361 botones. Esta es la razón por la que no los hicimos nosotros, y lo que nos ha costado la decisión.

La pregunta nunca fue "qué sistema de diseño"

Webplo es una aplicación Laravel 13 sobre Livewire 4. La interfaz se renderiza en el servidor y se vuelve interactiva con Livewire y Alpine. Lo que usáramos para los componentes tenía que ser componentes Blade, o acabaríamos manteniendo un segundo stack de front-end junto al primero.

Eso dejaba dos opciones reales: escribir nuestro propio juego de componentes o usar Flux.

Escribir los propios parece barato al principio. Un botón son unas cuantas clases. Un campo de texto, unas pocas más. El coste llega después, en los componentes que nadie quiere escribir dos veces: un modal que retiene el foco y lo devuelve al cerrarse, un desplegable que se maneja con el teclado, un selector de hora, un select que funciona en el móvil, un interruptor que un lector de pantalla sabe anunciar. Cada uno es un pequeño proyecto, y cada uno es un comportamiento que nuestros clientes solo notarían cuando fallara.

El dueño de un negocio que cambia su horario a las once de la noche no debería ser quien descubra que nuestro selector de hora casero no se cierra al pulsar Escape.

Cómo se usa

Esta es la fila de preferencias de notificación de la página de ajustes de la cuenta, reducida a lo esencial:

<x-shell.setting
    :label="__('Booking inbox alerts')"
    :help="__('In-app alerts when a customer books or cancels an appointment on your sites.')"
>
    <flux:switch wire:model="bookingNotificationsEnabled" />
</x-shell.setting>

<x-shell.setting> es un componente nuestro. Coloca la etiqueta y el texto de ayuda a la izquierda y el control que le pases a la derecha. <flux:switch> es el interruptor completo: el marcado, los estados, el manejo del teclado, los atributos de accesibilidad y el enlace con la propiedad de Livewire mediante wire:model. No hay JavaScript escrito para él, y nada en él es específico de esta página.

El mismo patrón vale para un campo de texto, un control segmentado o un select. Mete un control de Flux dentro de una fila de ajustes y la página se mantiene coherente sin que nadie tenga que recordar una regla.

Los modales son donde se amortiza

Cambiar la dirección de un sitio es arriesgado, así que se hace en un modal de dos pasos. En el primero, abajo, el propietario escribe la nueva dirección y ve si está disponible mientras escribe. En el segundo, el modal muestra la dirección antigua tachada junto a la nueva y avisa de que los visitantes de la dirección antigua se redirigirán durante 30 días. No cambia nada hasta que confirma.

El contenido de esos dos pasos lo escribimos nosotros. Flux se encarga de todo lo demás: abrir y cerrar, el foco, la tecla Escape, el botón de cerrar, el fondo, y un segundo paso dentro del mismo diálogo. Usamos diez modales en la aplicación y no hemos tenido que depurar nada de ese comportamiento.

Cinco temas de color, una variable

Webplo permite que cada cuenta elija un tema de color para su panel: ink, forest, indigo, amber o rose. Esta es la misma tarjeta de horario semanal con dos de ellos.

Nada en esa vista sabe qué tema está activo. Flux pinta sus interruptores, casillas, botones de opción, enlaces y botones principales con una sola variable CSS, --color-accent. Nosotros apuntamos esa variable a un token propio, y cada tema solo cambia el token:

--color-accent:            var(--app-accent);
--color-accent-foreground: var(--app-accent-fg);

[data-app-theme="forest"] {
    --_accent-l: #15803d; --_accent-l-fg: #ffffff; --_accent-l-hover: #166534;
    --_accent-d: #4ade80; --_accent-d-fg: #052e16; --_accent-d-hover: #86efac;
}

[data-app-theme="rose"] {
    --_accent-l: #e11d48; --_accent-l-fg: #ffffff; --_accent-l-hover: #be123c;
    --_accent-d: #fb7185; --_accent-d-fg: #4c0519; --_accent-d-hover: #fda4af;
}

Cada tema es un par de colores: el tono 700 de Tailwind en modo claro y el 400 en oscuro, para que el texto sobre el acento se lea bien en ambos. Añadir un sexto tema son cuatro líneas de CSS. El fondo, las tarjetas, los bordes y el texto no cambian entre temas, y eso es lo que hace que todos parezcan el mismo producto.

Tematizar, no bifurcar

Flux permite publicar cualquier componente en tu propio proyecto y editarlo. Hemos tenido cuidado con eso. De los 37 componentes que usamos, hemos publicado dos (la lista de navegación lateral y el toast), además de un juego de iconos propios que Flux muestra junto a los suyos. Todo lo demás se estiliza con tokens.

La razón son las actualizaciones. Un componente publicado es un componente que ahora mantienes tú. Lo que se deja como está recibe sus correcciones y mejoras de accesibilidad con un composer update. Cuando sale una versión nueva de Flux, leemos el changelog, pasamos la batería de tests y la desplegamos.

Lo que cuesta

Sería deshonesto presentarlo como gratis.

Es una licencia de pago. Los componentes en los que más nos apoyamos (el selector de hora, los selects más completos) están en Flux Pro. Para una empresa que construye un solo producto es barato comparado con el tiempo de ingeniería que sustituye, pero es una línea más en el presupuesto.

Nos ata a Livewire. Flux es Blade y Livewire. Si algún día quisiéramos un front-end en React, los componentes no vendrían con nosotros. Lo aceptamos porque toda la plataforma está construida sobre el stack de Laravel, pero es una dependencia real.

Tiene opiniones. Flux tiene su propio espaciado, tamaños y valores por defecto, y a veces nuestro diseño quiere otra cosa. Casi siempre basta con un token. Cuando no, perdemos algo de tiempo trabajando con la librería en lugar de alrededor de ella.

Hay aristas. En una versión, el componente de carrusel traía una clase que nuestra compilación de CSS no sabía interpretar, lo que generaba un aviso en cada build. No usamos el carrusel, así que lo excluimos de la compilación y dejamos una nota para quitar la exclusión si algún día lo adoptamos. Algo pequeño, pero del tipo que se hereda con cualquier dependencia.

¿La volveríamos a elegir?

Sí. La prueba que aplicamos a una dependencia es si deja que un equipo pequeño dedique su tiempo al producto y no a infraestructura que el cliente nunca ve. En Webplo eso es el flujo de reservas, el editor del sitio y el lanzamiento en sesenta segundos. Un modal que se cierra bien no es donde queremos ser ingeniosos.

Si construyes sobre Laravel y Livewire, Flux es la opción por defecto que recomendaríamos. Si no usas Livewire, no es para ti, y ningún tema de color cambia eso.