Hace unos meses, nuestro frontend era como un clóset bien organizado: sencillo, funcional, sin complicaciones. La persona subía fotos de sus documentos, los validábamos y listo. Un flujo simple, directo y sin problemas.

Pero, como todo desarrollador sabe, las cosas suelen complejizarse.

Con el tiempo, ese clóset pasó de estar impecable a convertirse en la pieza de un adolescente desordenado. Fuimos agregando autenticaciones, flujos de firma digital y más lógica dispersa. El caos se apoderó de nuestra aplicación.

Ahí fue cuando decidimos hacer limpieza y XState fue nuestra herramienta mágica.

De un MVP a un laberinto en Vue

Cuando lanzamos la primera versión de nuestro producto, las cosas eran bastante simples. Usábamos renderizado condicional en Vue para manejar los distintos estados de la aplicación y, aunque no era elegante, funcionaba. Todo fluía desde una sola ruta. Sin embargo, a medida que el proyecto crecía, lo que antes era una solución eficaz se convirtió en una maraña incontrolable de ifs y else.

Esta maraña no solo afectaba la legibilidad del código, sino también su mantenibilidad. Cada nuevo requisito significaba añadir más lógica condicional, lo que aumentaba exponencialmente la complejidad del sistema. Los bugs se volvieron más frecuentes, el tiempo para implementar nuevas funcionalidades se disparó y cualquier cambio menor podía romper partes críticas del flujo. El sistema se volvió frágil y claramente insostenible para escalar.

Cuando llegaron los nuevos flujos para la reutilización de identidades y la firma digital, nos dimos cuenta de que ya no era viable seguir agregando parches a la lógica existente. El sistema había alcanzado un punto de inflexión donde los ajustes incrementales no serían suficientes. Fue en ese momento que quedó claro: necesitábamos un cambio profundo en nuestra arquitectura para poder avanzar de manera sostenible.

XState al rescate: el GPS para nuestra aplicación

Cuando exploramos soluciones, consideramos opciones como Redux o simplemente seguir añadiendo más lógica personalizada en Vue. Sin embargo, elegimos XState porque nos ofrecía una estructura mucho más clara para manejar la complejidad creciente de nuestra aplicación.

Si no te suena mucho, XState es una librería que implementa máquinas de estado, un concepto que permite modelar los posibles estados de un sistema (por ejemplo: "inicial", "procesando", "completado") y las transiciones entre ellos de forma muy clara y controlada. En vez de tener condicionales dispersos, las máquinas de estado permiten definir estos flujos de manera declarativa y precisa, lo que facilita mucho la comprensión y mantenimiento de la lógica de la aplicación.

Mientras que Redux es excelente para la gestión de estado global, requiere una gran cantidad de código adicional para manejar transiciones complejas entre estados. Además, la lógica personalizada de Vue, aunque flexible, nos había llevado al problema inicial: era difícil de mantener, escalar y entender para nuevos miembros del equipo.

En cambio, XState nos permitió modelar los estados de la aplicación de manera clara, eliminando el caos de los condicionales y brindándonos un mapa preciso de cómo fluían los estados y transiciones. Además, su soporte nativo para TypeScript redujo errores y su independencia del framework nos ofrecía la flexibilidad de cambiar a otros frameworks en el futuro sin reescribir la lógica central de los estados.

Transformación: de caos a claridad

Adoptar XState nos permitió reestructurar nuestro flujo de autenticación y validación desde la raíz. Dividimos cada sub-flujo en su propia máquina de estados. Luego, creamos una máquina “maestra” que orquestaba estas sub-máquinas. Algo así como un director dirigiendo una sinfonía.

Lo mejor de todo es que ahora cada estado y transición están claramente definidos.

La diferencia fue abismal, no solo por la claridad en el código, sino también por herramientas como el inspector de Stately, que nos brindó una visibilidad completa de cómo los estados de nuestra aplicación se comportaban en tiempo real.

Con este inspector pudimos visualizar gráficamente cada máquina de estados, sus transiciones y obtener un historial detallado de cómo se comunican los actores en nuestra aplicación. Esta característica nos permitió rastrear con precisión los eventos enviados entre actores, identificar posibles cuellos de botella y depurar flujos complejos con facilidad.

¿Y el rendimiento?

Además de mejorar la claridad del código, XState demostró ser extremadamente eficiente.

Nos permitió definir acciones específicas en cada transición, guardar y restaurar estados con facilidad, e incluso manejar eventos de manera asíncrona.

Y, lo mejor, todo esto sin ninguna dependencia externa, manteniendo el bundle ligero. Un verdadero alivio.

Algunas dificultades en el camino

Implementar XState no fue un camino completamente libre de obstáculos que deberías saber si estás considerando adoptarlo en tu proyecto.

Como cualquier nueva tecnología, requirió una curva de aprendizaje, especialmente para los miembros del equipo que no estaban familiarizados con el paradigma de máquinas de estados.

Aunque XState ofrece muchas ventajas, aprender a usarla de manera efectiva demandó tiempo y, probablemente, requerirá más esfuerzo y tiempo en futuras incorporaciones de desarrolladores al equipo.

Sin embargo, lo que ganamos en claridad y organización superó con creces los desafíos iniciales.

Lo que aprendimos

Mirando hacia atrás, el mayor aprendizaje fue cómo una buena arquitectura puede transformar por completo un proyecto. Pasar de una lógica dispersa y caótica a una estructura organizada y clara nos permitió recuperar el control de nuestra aplicación.

Además, nos dimos cuenta de que invertir tiempo en aprender una herramienta sólida como XState, aunque al principio parezca costoso, rinde frutos a largo plazo.

Ahora, las decisiones que tomamos en ese momento nos siguen beneficiando no solo en términos de eficiencia, sino que también en la facilidad para agregar nuevas funcionalidades sin comprometer la estabilidad del sistema.

Nuestro mapa hacia un frontend sin caos

Adoptar XState cambió por completo nuestra manera de manejar flujos complejos en Vue. Nos devolvió la visibilidad y el control sobre el estado de nuestra aplicación.

Si te encuentras navegando por un océano de complejidad en tu aplicación frontend, te recomendaría dar una oportunidad a XState. No solo es una herramienta, sino un enfoque que cambia la forma en que ves y estructuras tu código.

En Soyio nos encanta enfrentarnos a este tipo de desafíos y buscar soluciones que no solo resuelvan problemas inmediatos, sino que construyan un futuro más sólido y escalable.

Para nosotros, la verdadera clave está en crear soluciones claras, robustas y fáciles de mantener. Resolver problemas complejos es parte de nuestra esencia.