Convirtiéndose en un Maestro de Formularios: Flujos de Trabajo Intuitivos de Múltiples Pasos

Rate this content
Bookmark

Los formularios son una parte fundamental de muchas aplicaciones y a menudo las acciones complejas se dividen en múltiples formularios como pasos en este flujo de trabajo. Usando el API de Contexto de React y una máquina de estados convencional, podemos construir un sistema reutilizable para construir estos magos y hacer que la web sea un poco más mágica.

26 min
21 Jun, 2022

Video Summary and Transcription

Esta Charla explora el concepto de los magos de formularios y su papel en la creación de flujos de trabajo intuitivos de múltiples pasos. Se discute el uso de máquinas de estados y varias opciones de implementación, incluyendo Formic y el API de Dream. Se explica el proceso de construcción de un mago de formularios utilizando el contexto de React, los reductores y los hooks personalizados. También se cubre la integración de máquinas de estados y la introducción de la biblioteca Robo Wizard, destacando su flexibilidad y compatibilidad con diferentes frameworks de UI.

Available in English

1. Introducción a los Asistentes de Formularios

Short description:

Bienvenido a Convertirse en un Asistente de Formularios, una charla sobre la construcción de flujos de trabajo intuitivos y de múltiples pasos impulsados por máquinas de estado. Mi nombre es Nick Hare, un ingeniero de software senior en el equipo de plataforma de front-end en Betterment en la ciudad de Nueva York. Hoy exploraremos qué es un asistente, cómo se crean, el papel de las máquinas de estado, las opciones de implementación y las direcciones futuras.

Bienvenido a Convertirse en un Asistente de Formularios, una charla sobre la construcción de flujos de trabajo intuitivos y de múltiples pasos impulsados por máquinas de estado.

Mi nombre es Nick Hare, soy un ingeniero de software senior en el equipo de plataforma de front-end en Betterment en la ciudad de Nueva York. En el pasado, he ayudado a organizar eventos y encuentros como Manhattan JS y ahora organizo una serie de charlas internas en Betterment llamada Better Dev. Además, me gusta experimentar con JavaScript integrado y soy fanático de andar en bicicleta al aire libre y escalar en interiores. Puedes encontrarme en línea en hipsterbrown.com o en hipsterbrown en Twitter y GitHub.

En nuestro viaje de hoy aprenderemos todo sobre qué es un asistente, cómo se crean típicamente, cómo las máquinas de estado pueden ayudarnos a mejorarlos, qué podemos usar para implementarlos y hacia dónde vamos desde aquí.

2. Introducción a los Asistentes y Flujos de Usuario

Short description:

Los asistentes son guías paso a paso que ayudan a los usuarios a realizar tareas complejas. Dividen el proceso de registro en pasos manejables, permitiendo a los usuarios centrarse en secciones individuales del formulario. Este patrón, conocido como flujo o flujo de trabajo en Betterment, ayuda a los usuarios a evitar experiencias abrumadoras y tediosas. También asegura que los usuarios comprendan conceptos y decisiones complejas. Betterment formaliza diversas tareas, como la creación de metas y la conexión de cuentas externas, como flujos, proporcionando convenciones y utilidades comunes para sus equipos.

Los asistentes han existido durante muchos años. Al construir aplicaciones, solicitar la entrada del usuario para crear registros o realizar acciones no siempre es tan simple como un formulario en una sola página. Muchas experiencias de usuario requieren que los clientes hagan clic a través de varios pasos para enviar toda la información. Este patrón de interfaz de usuario a menudo se llama asistente, un término que se remonta a finales de los años 80 y principios de los 90, para indicar guías paso a paso diseñadas para ayudarlo a realizar una tarea compleja.

Una fuente popular de esta fraseología es la función de asistente de Microsoft Page Publisher y el asistente de conexión. Sin embargo, el nombre generalmente me recuerda a este asistente. Muchos servicios y aplicaciones dividen el proceso de registro en una serie de pasos para que sea más fácil, especialmente si hay mucha información que recopilar para comenzar. Rellenar formularios largos puede ser increíblemente tedioso, por lo que los asistentes brindan una experiencia en la que las personas pueden centrarse en las partes individuales de esos formularios con una sensación de logro en cada paso adelante. Según las elecciones realizadas en este proceso, el asistente incluso puede ayudar a las personas a omitir rutas irrelevantes y posibles confusiones.

Creo que todos hemos visto esas secciones en los formularios de impuestos con un montón de condicionales en letra pequeña que al final terminamos ignorando por completo. Eso es lo que queremos evitar. Puede ser abrumador, distraído e incluso, como dije antes, muy tedioso de pasar. En su lugar, queremos ver esto. En Betterment, llamamos a este patrón flujo o flujo de trabajo y lo usamos bastante. Como empresa de servicios financieros, hay mucha información y conceptos complejos que cubrir. Queremos asegurarnos de que nuestros clientes comprendan estas decisiones. Junto con las tareas habituales de registro, formalizamos la creación de metas, mover dinero, conectar cuentas externas y más, todo como flujos. Dado la cantidad que hemos tenido que construir y mantener, tiene sentido tener algunas convenciones y utilidades comunes para que nuestros equipos las utilicen.

3. Construyendo Asistentes de Formulario con Formic

Short description:

Entonces, ¿cómo se construyen típicamente los asistentes de formulario? Busqué soluciones cuando comencé en Betterment y encontré ejemplos que utilizaban Formic, un administrador de estado de formulario para React. Una desventaja es la falta de enrutamiento, lo que hace que el paso actual se pierda al recargar la página. Se pueden encontrar ejemplos de formularios de múltiples pasos enrutados utilizando pasos numerados o con nombres en el mismo repositorio. Sin embargo, estos ejemplos están vinculados a Formic y carecen de soporte para rutas condicionales. Para abordar estas preocupaciones, desarrollé una nueva solución, la API Dream, que mantiene el uso de URL, simplifica el mantenimiento y permite recopilar información sin requerirla en cada paso.

Entonces, ¿cómo se construyen típicamente? Si alguna vez has tenido que abordar este patrón en el pasado, es posible que hayas buscado formularios de varios pasos o un asistente de formulario para X, donde X es el marco de elección para tu producto. Sé que definitivamente busqué una solución así cuando comencé este viaje en Betterment.

Naturalmente, busqué la documentación y ejemplos de Formic, el administrador de estado de formulario elegido para React en Betterment. Al mirar el repositorio de Formic, podemos encontrar un ejemplo de un asistente de varios pasos que crea un componente de asistente abstracto con componentes secundarios de paso de asistente. Esto permite una composición agradable al dividir un formulario grande, y se puede reutilizar en diferentes características siempre que utilicen el mismo diseño. Una desventaja notable es la falta de enrutamiento. Por lo tanto, el paso actual en el flujo se pierde si se recarga la página.

Podemos ver aquí nuestro componente de asistente de nivel superior, donde tenemos una matriz de pasos y tenemos algunas acciones de siguiente y anterior para avanzar en el asistente. Tenemos nuestro controlador de envío, que permite que este paso declare su propio envío, y avanzaremos al siguiente paso a menos que estemos en el último paso, en cuyo caso realizaremos un envío final. Todo se recopila bajo un contexto de formato único con pasos individuales mostrados y nuestros botones de retroceso y envío realizando acciones anteriores o siguientes. Y luego, como dije antes, todo se compone bajo el asistente único, pasos del asistente y luego cada paso declara los campos en los que se recopilan los valores que les importan.

Ahora, en el mismo repositorio, podemos encontrar ejemplos de formularios de múltiples pasos enrutados, uno utilizando pasos numerados y otro utilizando pasos con nombres. Los pasos numerados proporcionan un beneficio de composición más simple como en el primer ejemplo, aunque los números no son muy útiles como nombres de ruta para comunicar la intención del paso. Con los pasos con nombres, se pierde la capacidad de personalizar la validación y el envío del formulario por paso. Aquí podemos ver ubicaciones de ruta específicas para cada página. Todavía tenemos una base de asistente y ahora un componente de página asociado para pasar a través de los hijos en lugar de un componente de paso. Todavía tenemos nuestras acciones de siguiente y anterior, alguna validación, manejo de envío, que nos hace avanzar al siguiente. Y luego tenemos cierta lógica para mostrar nuestro contexto de Formic de alto nivel, nuestro formulario, la página activa y luego esa acción de retroceso y envío nuevamente, todo se compone bajo una sola ruta con un asistente y sus páginas de asistente individuales, recopilando todos los campos que les importan.

La mayor debilidad de cada uno de estos ejemplos es lo vinculados que están a Formic, lo cual tiene sentido ya que son ejemplos para esta biblioteca. Sin embargo, muchos enfoques que se encuentran en línea promoverán patrones similares, especialmente con pasos sin enrutamiento. Todos se centran en moverse secuencialmente o en el orden en que se declaran. No es fácil ver cómo se pueden integrar rutas condicionales. Al mirar las bibliotecas creadas específicamente, no parecía que resolvieran todas las preocupaciones de construir flujos en Betterment, así que decidí resolverlo yo mismo. Para dirigir el trabajo hacia la construcción de esta nueva solución, establecí tres directivas principales. La primera mantiene la idea de que las buenas experiencias web tienen URL y se alinean con los flujos impulsados por Rails que construimos en el pasado. La segunda fue aprender de flujos existentes que los hacían complejos de mantener en general. La última vino de observar nuestras necesidades en Betterment y cómo los asistentes pueden recopilar información pero no siempre es requerida en cada paso. Esta es la API Dream que vamos a implementar. Se parece mucho a lo que vimos antes con los ejemplos de Formic, donde tenemos un asistente de alto nivel y componentes de paso individuales que presentarán un conjunto de campos o lo que deseen hacer, y estos tienen nombres en lugar de números o sin nombre en absoluto.

4. Construyendo el Asistente de Formulario

Short description:

Utilizaremos el contexto de React, el gancho del reductor, los componentes de ruta de React Router y un gancho personalizado para construir nuestro asistente de formulario. El reductor del asistente se encarga de actualizar el paso actual y los valores. El componente de paso asigna el nombre del paso a la ruta de la ruta. El gancho del contexto del asistente proporciona el estado del asistente y la función de despacho. Las funciones personalizadas simplifican la llamada a las acciones de despacho. La API permite que los pasos individuales compongan el asistente. La función handleSubmit obtiene los valores del formulario y navega al siguiente paso.

Y vamos a utilizar este conjunto de suministros para hacerlo. Tenemos nuestro contexto de React para usar un gancho de reductor de React, componentes de ruta de React Router y un gancho personalizado para unirlo todo.

Comenzaremos con nuestro contexto de React para recopilar toda la información que necesitamos compartir entre el asistente de alto nivel y los pasos individuales. En nuestro componente de asistente, vamos a iterar sobre los hijos para obtener aquellos que coincidan con nuestro componente de paso que construiremos, y buscar la propiedad de nombre y recopilar nuestra lista de nombres como nuestros pasos. Vamos a establecer el paso predeterminado como el primero en esa lista, y luego declarar nuestro reductor.

El reductor del asistente lo veremos a continuación, pero estableceremos el estado inicial como el paso actual, el primer paso en el flujo. Los valores iniciales ayudarán a sembrar cualquier dato inicial que estemos recopilando en el flujo, y también esa lista de pasos. El valor devuelto por el reductor del usuario se establecerá como el proveedor del contexto del asistente. Mostraremos todos los hijos pasados a través de nuestro componente de asistente, y luego redirigiremos inicialmente desde el índice de esta función al paso predeterminado. Por lo tanto, cualquier dirección o enlace a esta función no tiene que saber cuál es el primer paso.

Ahora nuestro reductor del asistente es bastante simple en comparación con otros reductores. Tenemos dos acciones que contienen la sincronización para actualizar nuestro paso actual, y luego actualizar los valores para, como sugiere el nombre, actualizar los valores que estamos recopilando a lo largo de la vida útil de nuestro asistente. Y aquí está el componente de paso al que nos referíamos antes. Tenemos nuestra propiedad de componente y nuestro nombre, y luego vamos a utilizar nuestro gancho de contexto del asistente, que declararemos a continuación, para propagar este estado como propiedades en nuestros componentes. Esto es similar a otras API que ReactRouter solía usar en el pasado, y vamos a asignar el nombre de nuestro paso como la ruta de nuestra ruta. Y veremos lo útil que puede ser tener el mapa de estado a propiedades en nuestro componente a continuación. En nuestro gancho de contexto del asistente, vamos a volver a utilizar ese contexto utilizando el gancho de contexto de React. Y como resultado de useReducer, obtendremos el estado del asistente y esa función de despacho para enviar acciones a nuestro reductor. Vamos a envolver estas acciones de despacho en nuestras propias funciones personalizadas solo para facilitar la llamada a ellas para cualquier cosa que consuma este gancho. Tenemos nuestra acción de sincronización, nuestra acción de actualización de valores, y luego tenemos algo llamado goToStep, que utilizará ambas para llamar a updateValues si las tenemos, y luego llamar a sync, y luego avanzar en el historial, o simplemente avanzar y navegar al siguiente paso o al paso anterior dependiendo de cómo se use. Y así, nuestro siguiente paso buscará asegurarse de que no estemos en el último paso de nuestro asistente, y luego llamará a goToStep si no lo estamos, en comparación con el paso anterior, que se asegurará de que no estemos en el primer paso y nos permitirá llamar a previous, si ese es el caso, y luego lo devolveremos todo como resultado de nuestro gancho.

Y aquí está esa API nuevamente, veamos cómo un paso individual puede componer esto. Como declaramos como parte de una de nuestras directivas, puede ser independiente del formulario. Así que tenemos goToNextStep, goToPreviousStep y wizard.state que provienen de ese gancho, el componente de paso en sí. Pero nuevamente, podríamos usar ese gancho si quisiéramos directamente. Esto limpia un poco el código repetitivo y evita tener que llamar siempre a ese gancho, y permite una inyección de dependencia en caso de que quieras probar esto individualmente más tarde. Entonces, nuestra función handleSubmit simplemente utiliza un formulario regular. Vamos a obtener todos los valores del formulario del formulario HTML utilizando el nuevo método de objeto de fecha del formulario, y luego llamar a goToNextStep con ese objeto para los valores. Incluso podemos usar valores existentes del estado del asistente para establecer el valor predeterminado en nuestra entrada, y luego acciones muy familiares, como nuestro botón de retroceso y enviar para retroceder o avanzar.

5. Usando Formic y Valores de Estado del Asistente

Short description:

Para simplificar el código repetitivo, podemos usar Formic. goToNextStep se asigna a la propiedad onSubmit de Formic. Los valores del estado del asistente son un objeto, por lo que podemos ver los valores iniciales. El campo hereda y se vincula al valor del primer nombre. Las acciones siguen siendo las mismas con un botón y un controlador de envío. No se necesita un formulario si solo queremos mostrar el estado del asistente.

Si queremos simplificar el código repetitivo, podemos usar Formic. Y nuestro goToNextStep se asigna exactamente a la propiedad onSubmit de Formic, y nuestro estado del asistente es solo un objeto, por lo que podemos usar eso para ver los valores iniciales de Formic. Y luego tenemos nuestro campo, que heredará automáticamente y se vinculará a ese valor del primer nombre dentro de los valores del estado del asistente. Y las acciones pueden seguir siendo las mismas, porque solo son un botón y un controlador de envío. Y no se necesita ningún formulario en absoluto, porque si solo queremos mostrar el estado del asistente, entonces podemos mostrarlo como queramos.

6. Integrando Máquinas de Estado

Short description:

La solución cubre la mayoría de nuestros usos y necesidades. Las máquinas de estado, también conocidas como autómatas finitos, proporcionan un modelo matemático de computación. Un asistente es una experiencia interactiva que muestra un paso a la vez y puede cambiar según las entradas externas. Los diagramas de estado ayudan a visualizar los pasos y transiciones en un asistente. Los guards permiten la navegación condicional entre pasos. Podemos integrar una máquina de estado dentro de nuestra abstracción de asistente.

Ahora, la solución parece cubrir la mayoría de nuestros usos y necesidades. Sin embargo, todavía tenemos una forma de proporcionar condiciones sin tener que actualizar algo específico dentro de los componentes de cada paso, sino a este nivel superior. Entonces, ¿qué sucede cuando mostrar un paso o conjunto de pasos depende de una elección realizada en una parte anterior de nuestro asistente? ¿Y cómo nos ayudan las máquinas de estado a resolver este problema?

Para aquellos que no están familiarizados con las máquinas de estado, se conocen formalmente como autómatas finitos. Proporcionan un modelo matemático de computación que describe el comportamiento de un sistema que solo puede mostrar un estado a la vez. La capacidad de transición entre estos estados está determinada por eventos específicos. Ahora, si quisiéramos relacionarlo directamente con un asistente, podríamos decir que un asistente es una experiencia interactiva que puede mostrar exactamente uno de un número finito de pasos a la vez. El asistente puede cambiar de un paso a otro en respuesta a algunas entradas o eventos externos. El cambio de un paso a otro se llama navegación. Un asistente se define por una lista de pasos, su paso inicial y las condiciones para cada navegación. Podemos utilizar esta idea de modelar nuestros asistentes como máquinas de estado en forma de diagramas de estado.

Este diagrama de estado se construye utilizando Text y MermaidJS para generar la visualización. Podemos ver nuestros estados individuales, o pasos, inicio, acerca de y completar. Podemos realizar transiciones o navegaciones utilizando siguiente o anterior para avanzar o retroceder. Esto nos permite incluso utilizar cosas como el visualizador de IA estatal para visualizar esto de manera gráfica o incluso basada en código. Como dije antes, podemos controlar las condiciones de cada navegación. Al observar una versión modificada de ese diagrama que vimos antes, podemos ver que el inicio recibe un evento siguiente y luego puede avanzar hacia Gandalf o Merlin en función de lo que se conoce como un guardia. Y este guardia analiza alguna lógica para ver si tenemos interés en Gandalf para progresar allí, o de lo contrario, retrocedemos a Merlin. Y cada uno de esos pasos avanzará al siguiente hasta completar. Aquí está nuevamente utilizando el visualizador de IA estatal para darnos otro punto de vista y vemos ese guardia declarado en el siguiente a Gandalf. Esto siempre me hace pensar en cómo Gandalf ayudará a proteger el camino para el viaje a donde sea que vayan. Podemos crear esto dentro de nuestra abstracción de asistente utilizando una función que tome los valores actuales del asistente y cualquier estado siguiente pasado para ir al siguiente paso. Al observar los valores en el estado siguiente, si tenemos interés en Gandalf, entonces devolverá verdadero. Podemos declarar la lista de siguientes pasos disponibles en nuestro componente de inicio, anulando el comportamiento predeterminado de avanzar en secuencia en el que se declaran. Y así, en esa matriz, también podemos declarar otra matriz como la tupla de lógica. Y así tenemos a Gandalf, cuando, y avanzaremos allí cuando estemos interesados en Gandalf. De lo contrario, retrocederemos al paso de Merlin. Y en los pasos individuales de Merlin y Gandalf, podemos anular ese comportamiento predeterminado de siguiente y anterior simplemente declarando a dónde queremos ir a continuación sin ninguna condición. Se puede ver un patrón similar utilizado por Cassidy Williams en su charla, eligiendo tus propias aventuras en Next.js, donde utiliza XState para hacer un viaje similar a través de Next.js. Pasamos por la construcción de nuestro asistente utilizando solo React y un conjunto de otras utilidades dentro de él, pero no vimos cómo podemos integrar una máquina de estado dentro de ese patrón.

7. Introducción a Robo Wizard

Short description:

Robo Wizard es una biblioteca para construir flujos de trabajo intuitivos de varios pasos respaldados por una máquina de estado. Se puede utilizar con cualquier interfaz de usuario y administrador de formularios, incluso HTML básico. Utiliza XState FSM para alimentar el flujo de trabajo y proporciona una API intuitiva. Hay tres paquetes oficiales para RoboWizard, que incluyen el paquete principal, la integración con React y la integración con React Router. Los ejemplos muestran cómo integrar RoboWizard en varios frameworks. La configuración de la máquina XState permite crear la máquina para RoboWizard. Se muestra un ejemplo práctico de RoboWizard utilizando la integración con React Router.

Bueno, para hacer todo eso más fácil, he creado una biblioteca llamada Robo Wizard. Y Robo Wizard se trata de construir flujos de trabajo intuitivos de varios pasos respaldados por una máquina de estado. Como acabamos de ver, no depende de nada relacionado con React o algún framework específico o formulario. Por lo tanto, puedes utilizar tu propia interfaz de usuario y administrador de formularios, incluso si es solo HTML. Y estamos utilizando XState FSM, que es un subconjunto del paquete XState más amplio, para alimentar todo esto debajo de una API intuitiva.

Esto fue inspirado originalmente por un paquete llamado Robot, que nos permitía alimentar todo esto utilizando composición funcional. Sin embargo, eventualmente lo cambié para utilizar XState FSM y así acceder a la comunidad más amplia de XState y al visualizador y todas las API que proporciona. RoboWizard, en su núcleo, se ve así. Tenemos una función createWizard, que recibe una lista de pasos y cualquier valor inicial que queramos recopilar a lo largo de la vida útil de ese asistente. Cuando iniciamos el asistente, podemos escuchar cualquier cambio en el paso y los valores actuales. Podemos llamar a goToNextStep, goToPreviousStep, todo familiar a lo que vimos antes. Y actualmente hay tres paquetes oficiales para RoboWizard, incluido este paquete principal que vemos aquí, la integración de RoboWizard con React y la integración de RoboWizard con React Router para esos pasos navegables enrutados. Sin embargo, hay varios proyectos de ejemplo dentro del repositorio que muestran cómo se puede integrar RoboWizard en Vue, Svelte, Alpine y nuevamente, en HTML básico.

Entonces, ¿por qué no echamos un vistazo a cómo se ve crear esta máquina utilizando la configuración de la máquina XState por ti mismo? Si quisieras recrear en su mayoría RoboWizard, así es como lo harías. Esa línea en el ejemplo de vista previa crea este objeto JSON completo. Tenemos nuestro objeto JavaScript, no solo JSON. Tenemos un paso inicial aquí. Tenemos nuestro contexto de los valores que estamos recopilando o los estados individuales, qué eventos desencadenarán el paso al siguiente estado o paso y las acciones que realizamos al recibir ese evento y transición. Podemos ver aquí que puedes ir al siguiente paso, que es 'about', y actualizaremos los valores a lo largo de eso. Anteriormente, desde 'about', volveremos al inicio, y así sucesivamente. Veamos un ejemplo práctico de RoboWizard en el navegador. Este es un ejemplo de integración de RoboWizard con React Router utilizando un demo en CodeSandbox. Vamos a recopilar algunos valores de registro para el correo electrónico, la contraseña, el nombre, el apellido, el número de teléfono y los acuerdos de términos. Estamos utilizando Chakra UI React para proporcionar una interfaz de usuario agradable a través de esta demostración. Y podemos ver nuestros componentes de paso y asistente que se extraen de nuestro paquete compartido. Y vamos a establecer algunos valores iniciales y declarar nuestra lista de pasos, todos en orden y sin anular ningún comportamiento inicial. Si observamos un paso individual como nuestro correo electrónico, podemos ver que estamos utilizando el gancho useWizardContext, muy familiar a lo que construimos antes. Y en ese asistente, podemos obtener los valores actuales para los valores iniciales y nuestro controlador de envío, vamos a llamar a goToNextStep con un campo de valores llamado 'values'. Y vemos que todavía estamos utilizando los componentes de campo regulares y un botón de envío, cualquier cosa que quiera retroceder.

8. Construyendo el Robo Wizard

Short description:

Podemos configurar un botón de retroceso. Podemos registrarnos y convertirnos en un Robo Wizard, completando valores. Si no estamos de acuerdo con el acuerdo del usuario, podemos enviarlos en una dirección diferente. Podemos visualizar el comportamiento del asistente utilizando herramientas como los diagramas de mermaid jest o el visualizador de stately AI. Podemos definir pasos de entrada y salida, crear flujos ramificados y activar transiciones impulsadas por el servidor. Se necesita ayuda para construir integraciones oficiales y explorar diferentes casos de uso para RoboWizard.

Y así, al enviar esto, creemos algunos valores iniciales aquí. Y así hemos avanzado en la presentación, puedo retroceder usando este botón de retroceso, puedo continuar hacia adelante, también puedo usar los botones de retroceso y avance del navegador para realizar un seguimiento de nuestro historial.

Y así, dentro de este asistente, podemos registrarnos y convertirnos en un Robo Wizard. Así que completando un par de valores aquí, quién sabe por qué un mago podría necesitar un número de teléfono, podemos ver nuestros largos términos, lorem ipsum para continuar, presionaremos continuar y avanzaremos. Y aquí vemos, nos detuvimos, estamos al final, estamos en éxito, ahora nos hemos convertido en un mago del foro, podemos recibir cartas y alertas. Y luego obtener más información sobre esta magia en robowizardjs.org.

Ahora, si retrocedemos, podemos ver que si no mantenemos nuestros valores de acuerdo con los términos, podemos seguir avanzando. Ahora, ¿qué pasa si quisiéramos enviarlos en una dirección completamente diferente si no están de acuerdo con el acuerdo del usuario? Bueno, hagámoslo sin tocar la lógica en los pasos individuales en sí. Así que voy a hacer aquí una demostración mágica. Voy a cambiar algunos de los pasos aquí para ahorrarnos tiempo. Y voy a utilizar componentes de borrador pre-creados y también tomar mi función de guardia. Y esta función de guardia examina si los siguientes valores se están pasando y luego busca. Si estamos de acuerdo con los términos, siendo muy explícitos al respecto, simplemente podemos devolver el matón y eso existe allí. Y luego vamos a utilizar nuestro ayudante when guard de Robo Wizard . Y así vamos a pasar por esto de nuevo sin cambiar ninguno de los pasos existentes, simplemente quedándonos en este nivel alto. Haz algo súper seguro. Y luego, si no estamos de acuerdo con nuestro lorem ipsum, continuamos hacia adelante y oh, no. Drat, el viaje termina aquí. ¿Deberíamos intentarlo de nuevo? Retroceder y continuar. Y ahora hemos enviado con éxito y nos hemos convertido en un mago del foro. Y entonces, ¿a dónde vamos desde aquí? Bueno, el viaje de un mago nunca termina. Entonces, ¿cómo podemos comunicarnos mejor sobre los magos o comunicarnos sobre los magos de una mejor manera? Podemos aprender a visualizar todo este comportamiento del mago utilizando herramientas como los diagramas de mermaid jest o incluso el visualizador de stately AI. Y podemos construir sobre eso para crear un lenguaje compartido que todas las personas que participen en la construcción de estas características exitosas puedan entender el diseño del producto y la ingeniería. Y podemos agregar cosas como pasos de entrada y salida, que nos permiten definir dónde podemos ingresar al flujo o al asistente y dónde, cómo podemos salir. Por lo tanto, cosas como redireccionamientos no existen dentro de los pasos individuales en sí. Pero nuevamente, en ese nivel superior, podemos definir pasos finales, que nos permiten pausar o evitar cualquier otra navegación desde ese paso, lo que significa que no puedes retroceder nuevamente, o nunca puedes avanzar en el caso de éxito o cuando no quieres volver a enviar alguna acción, o en el caso de errores irreparables donde necesitan reiniciar para intentarlo de nuevo. Podemos crear flujos ramificados o servicios anidados en el caso de algo como XState, que nos permite tomar un camino diferente y llegar a un final completamente diferente que en cualquier otra condición. Y también podemos activar transiciones impulsadas por el servidor. Entonces, antes vimos cómo se integra esto con la navegación del lado del cliente y la navegación del lado del cliente, ¿qué pasa con algo impulsado por Next.js o Remix o incluso algún otro servidor general backend? Incluso no tiene que ser hecho con JavaScript. Sin embargo, XState hace que todo esto sea mucho más fácil de hacer en conjunto. Y si todo esto te parece interesante, puedes venir a ayudar. Todavía necesitamos ayuda con RoboWizard para construir, ya sabes, integraciones oficiales para todos esos otros frameworks que la gente quiere hacer, probar todos los diferentes casos de uso para esta biblioteca y aprender todo lo que podemos hacer para construir una mejor experiencia de esta manera. Y así, gracias y feliz construcción. Puedes obtener más información en robowizard.js.org o en HapsAround en Twitter. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.

Workshops on related topic

React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.