Hace poco escuché el episodio 130 del podcast Full Stack Radio donde se hablaba de la aplicación de máquinas de estado en la construcción de aplicaciones web. Sinceramente, nunca había visto este concepto aplicado al desarrollo web. Me ha gustado un poquito 🤓.
¿Máquina de estados? ¿Qué es eso?
Si has cursado alguna carrera de ingeniería muy probablemente te habrás topado con ellas.
Una máquina de estados finitos es un modelo a través del cual podemos describir de forma visual el comportamiento de un sistema que solo puede encontrarse en un estado determinado en un momento dado. Por ejemplo, podemos pensar en un semáforo: puede estar en verde, ámbar o rojo. Siempre estará en uno y solo uno de los tres estados, suponiendo que funciona correctamente.
Estas máquinas de estados finitos tienen cinco partes:
-
Un número finito de estados
-
Un número finito de eventos
-
Un estado inicial
-
Una función de transición que determina el próximo estado dado el estado y evento actuales
-
Posibles estados finales
Muy a groso modo, y para que sirva de ejemplo básico, un semáforo puede estar en tres estados diferentes. Podemos suponer que el estado inicial es verde. Los eventos serían tres: sePoneVerde, sePoneAmbar y sePoneRojo.
La función de transición se ejecutaría cada ciertos tiempo y controlaría el estado siguiente según el estado actual: de verde solo se puede pasar a ámbar, de ámbar a rojo y de rojo a verde nuevamente.
¿Y qué tiene que ver esto con el desarrollo de aplicaciones web?
Pues si lo piensas un poco... mucho. Imagina que tu app tiene una página donde se carga un componente. Este componente hace una llamada a una API externa para preparar y mostrar su contenido. Lo primero que sucede, es que una vez se abre la aplicación, se muestra un mensaje de espera para indicar que está cargando la información. Después de eso, se muestra la información.
¿Ves por dónde voy? El componente de esta página de la aplicación puede estar en varios estados dependiendo de cómo lo queramos modelar. Por ejemplo: mientras carga la información estará en estado cargando. Si todo va bien, pasará a estado carga_exito mientras que si sucede algún error pasará a carga_error.
Pero no te quedes solo aquí, una aplicación web puede estar en muchos estados diferentes, piensa en estas situaciones:
-
login de un usuario
-
Listado y selección de un conjunto de artículos
-
Un reproductor de vídeo
-
...
Es aplicable a cualquier aplicación, valga la redundancia.
¿Por dónde empiezo?
Con XState es posible aplicar máquinas de estado en tu aplicación. Es relativamente sencillo inyectar este paquete a tu proyecto. Puesto que es agnóstico al framework que uses, podrás reutilizar las máquinas de estado que construyas en otros proyectos.
Dispondrás de herramientas para que puedas comprobar de forma visual la máquina de estados mientras la construyes, tu aplicación no estará nunca en un estado inválido. Además, dispones de una documentación de calidad que contiene toda clase de ejemplos e implementaciones.