Modelar el estado como una máquina: autómatas, statecharts de Harel, XState v5 a fondo, el actor model, testing basado en modelos y patrones reales.
Cada nivel construye sobre el anterior. Sin saltos, sin huecos.
La visión aérea: autómatas, statecharts de Harel, XState y el actor model; por qué modelar el estado como una máquina elimina lo imposible.
La FSM: un conjunto finito de estados, eventos que disparan transiciones, y por qué modelar así elimina estados imposibles.
Los statecharts de Harel: estados jerárquicos, regiones paralelas, historia, y cómo domestican la explosión combinatoria.
XState v5: definir una máquina con estados y transiciones; el modelo de configuración y la ejecución determinista.
El estado extendido (context), guards, actions de entrada/salida, y assign para actualizar el context.
En XState v5 el actor es la unidad central: entidades vivas que se comunican por mensajes asíncronos; spawn e invoke.
Invocar promesas, observables, callbacks y otras máquinas como actores; su ciclo de vida, resultados y errores.
Conectar una máquina a la UI con useMachine/useActor; renderizar según el estado y enviar eventos.
El criterio: dónde brillan las máquinas de estado y dónde son sobreingeniería.
La base matemática: autómatas finitos deterministas y no deterministas, lenguajes regulares, y qué puede y no puede expresar una FSM.
SCXML: el estándar W3C de statecharts que XState sigue; la semántica formal de las transiciones y por qué importa.
La API `setup` de XState v5: tipar context, eventos, actores y acciones; inferencia y errores en tiempo de compilación.
Modelar estados anidados y paralelos en XState: submáquinas, regiones ortogonales, y las transiciones que cruzan niveles.
Estados de historia (shallow y deep), estados finales, `onDone` y el output de una máquina que termina.
Testear una máquina: transiciones puras, recorridos exhaustivos, y el model-based testing que genera casos desde el modelo.
El diagrama como documentación viva: Stately Studio, el inspector, y diseñar la máquina visualmente antes de codificarla.
Coordinar una máquina con el estado del servidor: invocar fetches, cachear, y no duplicar lo que ya gestiona TanStack Query.
Statecharts fuera de la UI: modelar procesos de negocio, workflows durables, y máquinas que viven en el servidor.
El caso canónico: un asistente de varios pasos con validación, navegación hacia atrás, y estados de envío.
Modelar un reproductor (idle, cargando, reproduciendo, pausado, error) y cualquier recurso con ciclo de vida complejo.
La máquina de autenticación: anónimo, autenticando, autenticado, refrescando, expirado; el flujo completo sin booleanos sueltos.
Sistemas de actores: jerarquías, supervisión, y la herencia de Erlang/Akka en el modelo de XState.
Otras librerías (Robot, Zag.js) y la FSM escrita a mano; cuándo no necesitas todo el peso de XState.
El patrón fuera de JavaScript: enums con estado asociado en Swift y Rust, sealed classes en Kotlin, y el type-state pattern.
Cuando la máquina crece: dividir en submáquinas, actores independientes, y el coste real de la interpretación.
La síntesis: modelar cualquier dominio como estados y transiciones, decidir cuándo aplicarlo, y el futuro de los statecharts.
Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.
Comenzar el camino →