El Futuro Visual de la Gestión de Estado

Rate this content
Bookmark

Aprende cómo el modelado de estado con máquinas de estado y statecharts puede mejorar la forma en que desarrollas la lógica de la aplicación, y obtén un adelanto de herramientas visuales nunca antes vistas que llevarán la gestión de estado al siguiente nivel.

FAQ

Un formalismo visual, según David Harold, es un lenguaje diagramático e intuitivo que es matemáticamente riguroso y preciso. Utiliza notaciones especiales como flechas, cajas y regiones para describir la lógica y el comportamiento de una entidad.

Los reductores ayudan al proporcionar una forma de contener toda la lógica de una aplicación en una ubicación centralizada. Permiten interactuar con la lógica mediante el envío de eventos o acciones, lo que simplifica el modelo mental de la aplicación y ayuda a prever cómo puede responder a diferentes eventos.

Las máquinas de estado, a diferencia de los reductores típicos, separan claramente los comportamientos en lo que se conocen como estados finitos. Esto evita estados y transiciones imposibles, haciendo más fácil entender y prever cómo un actor puede cambiar su comportamiento en respuesta a eventos.

XState es una biblioteca de máquinas de estado y diagramas de estado para JavaScript que es independiente del framework y de la plataforma. Su propósito es permitir que los desarrolladores representen máquinas de estado de manera codificada y visualizada automáticamente, facilitando la gestión de estado y la visualización del comportamiento de las aplicaciones.

La versión cinco de XState incluirá comodines parciales para capturar eventos, guardias de nivel superior para combinaciones de predicados, mejoras en la tipificación de TypeScript, y optimizaciones para mantener bajo el tamaño del paquete. También se enfocará en la integración con otros frameworks y bibliotecas.

Stately es una futura suite de modelado de software visual que permitirá crear, editar, simular, analizar, probar y colaborar en la lógica y los flujos de trabajo de la aplicación para cualquier lenguaje. Su objetivo es facilitar la colaboración entre personas técnicas y no técnicas y mejorar la comprensión de la lógica a todos los niveles del desarrollo.

David Khourshid
David Khourshid
32 min
09 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute el futuro visual de la gestión de estado y el uso de máquinas de estado y statecharts. XState se presenta como una biblioteca de máquinas de estado y statecharts para JavaScript, que proporciona una forma limpia y visualizable de representar máquinas de estado. La charla destaca las características de XState, como su enfoque en el estado y las utilidades para interpretar la máquina como un servicio. También menciona los objetivos futuros de XState, que incluyen visualización, pruebas, análisis y el desarrollo de una suite de modelado de software visual llamada Stately.

1. Introducción al Futuro Visual de la Gestión de Estado

Short description:

Hola, mi nombre es David Korshid. Quiero hablarles hoy sobre el futuro visual de la gestión de estado. Las visualizaciones sirven como una especificación exacta de algo que sería difícil de describir solo con texto. La forma en que típicamente codificamos la lógica de la aplicación no se presta bien a un formalismo visual. Aquí es donde entra el reductor, que proporciona una forma de contener toda esta lógica en una ubicación centralizada y conveniente. El envío de eventos es algo realmente bueno.

Soy David K. Piano, prácticamente en todas partes en línea. Y quiero hablarles hoy sobre el futuro visual de la gestión de estado.

Ahora, ¿qué queremos decir con visual? Probablemente sepas qué es un diagrama de Venn. Es una representación visual exacta de las similitudes entre dos o más cosas diferentes. Y es posible que también hayas oído hablar de un diagrama de secuencia. Este describe cómo diferentes partes de un sistema se comunican entre sí. Ahora, diagramas como estos son muy útiles para transmitir relaciones de una manera visualmente inequívoca, cada uno con sus propias notaciones especiales que significan cosas específicas. Y las máquinas de estado y los diagramas de estado, de los que hablo mucho, caen en la misma categoría de diagrama visualmente exacto en el sentido de que describen la lógica y el comportamiento de una entidad especial utilizando una notación especial como flechas, cajas y regiones.

Ahora, David Harold, el inventor de los diagramas de estado, llama a esto un formalismo visual. Describe que los formalismos visuales son lenguajes diagramáticos e intuitivos, pero rigurosos matemáticamente y precisos. Por lo tanto, a pesar de su apariencia visual clara, vienen completos con una sintaxis que te permite determinar qué está permitido y qué no está permitido. Y también vienen con una semántica que determina qué significan realmente las cosas permitidas. Estos tipos de visualizaciones sirven a un propósito más elevado que simplemente hacer que tu aburrida documentación se vea un poco mejor. Sirven como una especificación exacta de algo que sería difícil de describir solo con texto.

Entonces, la forma en que típicamente codificamos la lógica de la aplicación no se presta realmente bien a un formalismo visual o a cualquier otra cosa realmente. Tendemos a colocar datos y lógica cerca de la fuente donde se utiliza, como directamente en los controladores de eventos o en promesas o en devoluciones de llamada o cosas así. Si bien esto puede ser conveniente para codificar, el problema es que esta lógica es difícil de entender, especialmente a medida que cambia con el tiempo debido a eventos o cualquier otra cosa que pueda suceder. Y realmente no puedes discernir qué puede suceder exactamente o cómo puede responder una aplicación a un evento en cualquier momento. Esa lógica de conexión, reside principalmente en la cabeza del desarrollador que codificó esa lógica, lo cual no es realmente útil. Y peor aún, con lógica ad hoc, que tiende a repetirse en todo el código base. Incluso si intentas elevar esto, tienes esa misma lógica ad hoc viviendo en otro lugar en lugar de un lugar centralizado donde vive toda tu lógica.

Entonces entra el reductor. Por supuesto, el reductor se popularizó muy temprano por bloques y bibliotecas de gestión de estado como Redux. Y los reductores son los que se utilizaban para proporcionar una forma de contener toda esta lógica en una ubicación centralizada y conveniente. Por lo tanto, una restricción importante y enormemente beneficiosa del reductor es que te obliga a interactuar con la lógica mediante el envío de eventos o acciones, como se les llama en el mundo de React y Redux. Por cierto, el nombre de las acciones, no me gusta particularmente, creo que fue un error. Vamos a usar el término eventos en lugar de acciones en esta presentación. Pero aquí está por qué el envío de eventos es algo realmente bueno.

2. Introducción a las Máquinas de Estado y los Diagramas de Estado

Short description:

Te obliga a concretar lo que puede suceder en tu aplicación en cualquier momento. Los reductores típicamente contienen declaraciones switch o if para discernir qué debe suceder cuando se recibe un evento. Las máquinas de estado separan de manera clara los comportamientos en estados finitos, evitando estados y transiciones imposibles. Los diagramas de estado llevan el formalismo visual de las máquinas de estado aún más lejos al introducir jerarquía y permitir una representación más clara de la lógica compleja. XState fue creado para proporcionar un formalismo visual matemáticamente riguroso para los diagramas de estado.

Te obliga a concretar lo que puede suceder en tu aplicación en cualquier momento. Por ejemplo, el usuario puede hacer clic en un botón, una solicitud puede resolverse o rechazarse, o un temporizador puede activarse. Todos estos son eventos. Pensar en tu aplicación en términos de eventos simplifica realmente el modelo mental. Sin embargo, esto tampoco es fácil de visualizar. Los reductores típicamente contienen declaraciones switch o if para discernir qué debe suceder cuando se recibe un evento. Por lo tanto, comprender cómo puede cambiar el comportamiento de tu aplicación se vuelve mucho más difícil. Se mezcla en esas declaraciones switch y tienes que reconstruir toda esa lógica y navegar a través de un montón de declaraciones defensivas como ternarios e if para dar sentido a la lógica.

Es como si tu reductor fuera una única declaración en una máquina de estado con un único estado en un montón de transiciones condicionales y a veces innecesarias. Puede funcionar y puede hacer el trabajo que se supone que debe hacer, pero es difícil de entender y aún es propenso a estados y transiciones imposibles. Las máquinas de estado, por cierto, son como reductores y hablo de esto prácticamente en todas partes en línea, y las máquinas de estado también se pueden escribir como reductores, pero en lugar de mezclar toda la lógica, separan de manera clara los comportamientos en lo que se conocen como estados finitos. Un estado finito representa un comportamiento. Cuáles son los estados actuales de un actor y cómo podría responder a eventos. Puede responder a eventos realizando una acción o cambiando su comportamiento, lo cual está representado por las flechas de transición que ves aquí, que van de un estado a otro. O los eventos pueden no ser manejados, en cuyo caso el comportamiento predeterminado es ignorar los eventos. En los reductores, esto a menudo requiere mucho código defensivo como declaraciones if. En las máquinas de estado, esto está integrado en el modelo matemático. Y más prácticamente, este tipo de mecanismo evita estados imposibles, lo que garantiza que dos comportamientos no puedan ocurrir al mismo tiempo. También evita transiciones imposibles, ya que todas las transiciones entre estados finitos deben escribirse explícitamente. Y como puedes ver aquí, se presta bien a la visualización. Podemos entender cómo un actor puede cambiar su comportamiento reproduciendo los eventos en el diagrama, siguiendo las flechas y viendo cuáles deberían ser los siguientes estados finitos.

Ahora, los diagramas de estado llevan esta misma idea de un formalismo visual introducido por las máquinas de estado y la llevan un paso más allá. Introducen jerarquía, entre muchas otras cosas. Por lo tanto, aunque las máquinas de estado proporcionan una forma de organizar de manera clara la lógica, sufren de una explosión combinatoria de estados y transiciones, especialmente cuando diferentes estados finitos están relacionados. Al extender la noción de máquinas de estado para que sea un grafo jerárquico o un grafo alto, como lo llama David Harrell, podemos agrupar estados juntos para representar transiciones comunes de manera clara. También podemos aislar la lógica para ver el panorama general en lugar de tener que entender todos los pequeños detalles de implementación de una vez en una estructura plana grande. Al igual que las máquinas de estado, los diagramas de estado también son formalismos visuales matemáticamente rigurosos. Pueden expresar un grado mucho mayor de complejidad que las máquinas de estado y pueden representarlo de manera clara y visual. Por eso creé XState hace algunos años.

QnA

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
¿Puede useEffect afectar negativamente a tu base de código? Desde la obtención de datos hasta la lucha con las APIs imperativas, los efectos secundarios son una de las mayores fuentes de frustración en el desarrollo de aplicaciones web. Y seamos honestos, poner todo en ganchos useEffect no ayuda mucho. En esta charla, desmitificaremos el gancho useEffect y obtendremos una mejor comprensión de cuándo (y cuándo no) usarlo, así como descubriremos cómo los efectos declarativos pueden hacer que la gestión de efectos sea más mantenible incluso en las aplicaciones React más complejas.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
Pocos desarrolladores disfrutan depurando, y la depuración puede ser compleja para las aplicaciones web modernas debido a los múltiples marcos, lenguajes y bibliotecas utilizados. Pero, las herramientas de desarrollo han avanzado mucho en facilitar el proceso. En esta charla, Jecelyn profundizará en el estado moderno de la depuración, las mejoras en DevTools y cómo puedes usarlas para depurar tus aplicaciones de manera confiable.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Una cantidad creciente de datos en nuestras aplicaciones React proviene de fuentes remotas y asíncronas y, aún peor, continúa disfrazándose como "estado global". En esta charla, obtendrás información sobre por qué la mayoría de tu "estado global" en realidad no es un estado en absoluto y cómo React Query puede ayudarte a buscar, almacenar en caché y gestionar tus datos asíncronos con una fracción del esfuerzo y el código al que estás acostumbrado.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
WorkshopFree
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.