Video Summary and Transcription
Esta charla presenta la gestión de estados en Vue, centrándose en la biblioteca Xstate para gestionar máquinas de estado en componentes de UI. El enfoque de abajo hacia arriba en el desarrollo de componentes puede llevar a complejidad y desafíos a lo largo del tiempo. Xstate es una biblioteca de JavaScript y TypeScript diseñada específicamente para gestionar máquinas de estado y gráficos de estado para componentes de UI. La charla proporciona ejemplos de creación de un componente de alternancia utilizando Xstate y enfatiza las ventajas de usar Xstate, como la reutilización de código, pruebas precisas y fácil mantenimiento. El ponente anima a los desarrolladores a planificar con anticipación y considerar el diseño de estados, componentes y características para escribir un código mejor.
1. Introducción a la Gestión de Estado en Vue
¡Hola a todos! En esta parte, hablaré sobre la gestión de estado para la interfaz de usuario en Vue, centrándome específicamente en X state para Vue y UI. Vue 3, lanzado el año pasado, ha traído mejoras significativas, incluida la API de Composición, que permite más flexibilidad y control en el desarrollo de componentes. Con Vue 3 y la composición, podemos crear fácilmente componentes dinámicos, como renderizar una imagen al hacer clic en un botón. Sin embargo, debemos manejar escenarios como deshabilitar el botón durante la carga de la imagen, mostrar un estado de carga y manejar errores de carga de imágenes.
¡Hola a todos! Es muy agradable estar aquí, de vuelta en Vue.js London por segunda vez. ¿Cómo están hoy? Bueno, me alegra mucho, estoy muy feliz, y aún más feliz si esta conferencia se realiza en persona en Londres.
De todos modos, hoy hablaré sobre la gestión de estado para la interfaz de usuario en Vue. Y no se trata de Vuex o Redux o algo similar. En cambio, hablaremos sobre X state para Vue y para la interfaz de usuario.
Pero antes de eso, un poco sobre mí, mi nombre es Maya, como también vieron. Pueden encontrarme en Maya Charvin en Twitter o en GitHub, y también en mi sitio web, mayacharvin.com. He escrito artículos sobre JavaScript y desarrollo frontend en general, así que siéntanse libres de echar un vistazo. De acuerdo, como todos sabemos, Vue 3 fue lanzado el año pasado, y se ha convertido en una actualización muy prometedora desde Vue 2, y a todos nos gusta cómo funciona. Espero que a estas alturas ya hayan tenido la oportunidad de probarlo o incluso migrar su aplicación de Vue 2 a Vue 3, pero de cualquier manera, si no lo han hecho, definitivamente deberían probarlo. De todos modos, ¿cuál es la cosa principal sobre Vue 2? Vue 2 tiene muchas características nuevas y cambios importantes, como siempre, y una de las cosas buenas de Vue 3 es la API de Composición, ¿verdad? La API de Composición es una mejora significativa. Nos permite tener más opciones y más control sobre cómo queremos ver el componente en lugar de la opción predeterminada del template que es muy limitada en permitirnos escribir un componente en Vue. Ahora podemos escribir componentes más flexibles y dinámicos, como componentes funcionales más fácilmente. Y, por ejemplo, digamos que tenemos un componente que lo que hace es simplemente renderizar una imagen cuando se hace clic en un botón. Así es como lo escribiríamos en Vue 3 con composición. Primero que nada, tenemos un método de configuración en el template, y ahora podemos establecer un estado local usando REF. Entonces, podemos obtener un gatito con el REF con el valor predeterminado vacío, y luego podemos asignar una función para activar cuando el usuario hace clic en un botón para actualizar este estado local a la imagen que queremos una vez que obtengamos la imagen con éxito. Y luego, devolvemos una función de renderizado, que se escribirá en JSX si lo deseas. Es muy similar a React de alguna manera, por lo que los desarrolladores de React se adaptarán más fácilmente a la nueva vista, y los componentes de renderizado renderizarán el componente de imagen que queremos según el estado local y adjuntarán el controlador de eventos. Simple, ¿verdad? Muy sencillo. La salida será hacer clic. Obtener la imagen del gatito. Eso es todo. Nada muy complejo aquí.
Pero digamos que los gerentes de producto ahora deciden venir y decirte, `oye, cuando hacemos clic en la imagen, la imagen todavía se está cargando, pero el botón sigue ahí. El usuario puede hacer clic en él varias veces. ¿Qué vamos a hacer? Necesitamos manejarlo deshabilitando el botón mientras se carga la imagen. O si la imagen no se está cargando, está en proceso de carga, necesitamos mostrar el estado de carga porque, digamos, una imagen grande tomará mucho tiempo para cargarse, ¿verdad? ¿O qué pasa si la imagen no se pudo cargar por alguna razón, alguien eliminó la imagen del servidor, necesitamos mostrar el estado de error adecuado para la imagen.
2. Desafíos con el Enfoque de Abajo hacia Arriba
En algún momento, terminamos con un componente que se vuelve difícil de entender, mantener y probar. El enfoque de abajo hacia arriba, aunque común y inicialmente conveniente, conduce a complejidad y desafíos con el tiempo. A medida que agregamos más funcionalidad y correcciones de errores, el componente crece y se vuelve más difícil de comprender. Esto puede resultar en dificultades para probar y comprender los casos de uso. En última instancia, esto puede llevar a frustración para los clientes en el extremo receptor.
Y más y más. Entonces, en ese momento, probablemente terminaremos con un código simple como ese, con 20 líneas de código, a un componente con más, mucho más, como 10 más, 12 más, mucho código, como este. Solo para manejar dos casos de uso. Carga y mensaje de error. El más básico. Y luego, también, ¿qué sucede si quieres agregar más, digamos, en carga, 20%. En carga, 40%, mostrar un efecto de animación diferente, efecto de transición, mostrar un estado de error diferente cuando el mensaje de error, cuando el usuario, digamos, el servidor devuelve 500, 4, algo para el usuario, más y más casos de uso, agregando más y más problemas comenzarán a ocurrir. Y desafortunadamente, esto es muy, muy común. Comenzamos con algo muy pequeño y hemos agregado y agregado y agregado más y más sobre esto. Esto se llama, digamos, construimos un componente en el conjunto de acciones básicas, y cada vez que queremos algo, queremos agregar una nueva función. De acuerdo, genial, funciona. Solo necesitamos desarrollar algo que funcione de manera simple. No hay nada crítico aquí. Pero luego, cuando queremos agregar nuevas funciones, necesitamos agregar más, otra capa encima de lote, encima de él con nuevas acciones. Y porque no hay código perfecto, todavía tenemos correcciones de errores, lo corregimos encima del componente actual. Y luego las nuevas acciones también causarán algunos errores, todavía necesitamos corregir algunos errores. Y surge otra función, se deben manejar otras correcciones de errores, y así sucesivamente. Este enfoque se llama enfoque de abajo hacia arriba. Desafortunadamente, este enfoque es muy común, permítanme decirlo. Y no es tan malo, funciona la mayor parte del tiempo porque nos permite desarrollar algo rápido, rápido y tal vez sucio o tal vez limpio. Pero a lo largo del tiempo, se ha demostrado que es muy, muy complicado.
Por ejemplo, es difícil de mantener. Si tienes un componente central que crece y crece con más funcionalidad agregada, más funcionalidad agregada, más núcleo agregado, se vuelve difícil de entender, difícil de mantener. Y luego, debido a que es difícil de mantener, es difícil de probar cómo asegurarnos de que lo que probamos, lo que escribimos, no rompa algo en algún lugar que no conocemos, no entendemos. A veces dicen que tenemos un componente que es realmente largo, luego tenemos que leer. Pero si es demasiado largo, es posible que no podamos entender para qué casos de uso se está manejando. Y debido a eso, si algo sucede, no podremos entender si cubrimos la prueba o si ocurrió el paso. Eso es difícil de entender. Y en algún momento llegaremos a esto. Y esto no está de nuestro lado. En realidad, sucede en el lado del cliente y causa
3. Introducción a la Máquina de Estado Finalizada
Hoy, estamos discutiendo la máquina de estado finalizada, también conocida como autómata finito determinista. La definición formal de un autómata finito determinista puede ser compleja y difícil de entender. Incluso aquellos con conocimientos en ciencias de la computación pueden tener dificultades para comprenderlo. Entonces, simplifiquemos las cosas.
Los clientes se ponen muy, muy molestos. Y es por eso que estamos hablando de la máquina de estado finalizada. Ese es nuestro tema de hoy. O también podemos llamarlo autómata finito determinista. Entonces, ¿qué significa eso según la definición de una máquina de estado finito? Bueno, según Wiki, tenemos algo así. Un autómata finito determinista se define formalmente por cinco a blah, blah, blah, blah. Honestamente, al igual que el nombre, no te molestes. La definición definitivamente no es comprensible. Bueno, al menos para mí. No estoy seguro acerca de los demás. Tal vez alguien más sea más inteligente que yo y lo entienda. No es fácil de entender. Eso es una cosa. Incluso si has estudiado ciencias de la computación.
4. Introducción a las Máquinas de Estado en UI
El autómata finito determinista se representa mediante una secuencia de estados conectados por eventos en un mapa de transiciones. Un ejemplo es el evento de búsqueda, donde los estados pasan de inactivo a carga, éxito o fallo. La relación entre las máquinas de estado y la interfaz de usuario puede parecer no relacionada, pero en el desarrollo de UI, diseñamos transiciones entre componentes basadas en acciones del usuario, creando un flujo de usuario. Esta interdependencia de los componentes de UI forma un grafo, que es una máquina de estado.
que hice, todavía no es comprensible. Así que olvídalo. Simplifiquemos las cosas. En resumen, el autómata finito determinista se representa en realidad mediante una secuencia en la que tienes un estado inicial y un número finito de estados. Lo que significa que no tienes un número infinito. Tienes un número finito de estados. Y luego, debido a que tienes un número finito de estados, tienes un número finito de eventos que conectan estos estados y crean a partir de aquí un mapa de transiciones que se activa por el evento para moverse de un estado a otro. Y así, un ejemplo de máquina de estado finalizada que puedo pensar y que probablemente ya conozcas es el evento de búsqueda, secuencia de búsqueda, en la que tenemos un estado inactivo. Cuando hacemos clic en buscar, se moverá a carga. Y luego, cuando termine de cargar con el resultado, se moverá a éxito o se moverá a fallo y, dependiendo de la configuración, puede volver a intentarlo, volver al estado de carga y volver a intentarlo. Y esto es lo que llamamos máquina de estado. Así que te preguntarás en este momento qué es una máquina de estado. Entonces, ¿cuál es la relación entre la máquina de estado y la interfaz de usuario? Está hablando de búsqueda. No se trata de la interfaz de usuario, ¿verdad? El desarrollo de la interfaz de usuario se trata de la interfaz de usuario. No tiene nada que ver con buscardata en segundo plano. ¿Tengo razón? Bueno, para ser honesto, echemos un vistazo. Este es el flujo del usuario o puedes llamarlo un boceto. Cuando hablamos de diseño o desarrollo de la interfaz de usuario, siempre hablamos de un marco como este. Un boceto como este, una transición, una transición, lo siento, un mapa de transiciones de desde donde el diseñador escribirá desde qué página a qué página. Si haces clic en mi perfil, irás a la galería. Si haces clic en un elemento único en la galería, irás a mis publicaciones. Si haces clic en editar perfil, irás a una página llamada editar perfil y así sucesivamente. Bueno, resumamos esto en varias ideas. Como puedes ver, las caras de los componentes de la interfaz de usuario no son independientes en absoluto. Todas dependen unas de otras e interactúan entre sí de una manera muy cercana. Pasan de un componente o una cara a otra y lo hacen en función de una acción, una acción del usuario. Que, de hecho, es un evento desencadenante. Como hacer clic, es un evento de hacer clic. Y cambiar es un evento de cambio, y así sucesivamente. Y es por eso que cuando hablamos de construir una interfaz de usuario, estamos hablando de construir un flujo de usuario o estamos hablando de construir un diagrama de usuario o árboles de usuario, ¿y qué son los árboles? En realidad, son
5. Introducción a la biblioteca Xdate
Las máquinas de estado se utilizan en todas partes, incluyendo promesas, devoluciones de llamada y observables. Sin embargo, no todas están diseñadas para manejar interfaces de usuario. Xdate es una biblioteca de código abierto en JavaScript y TypeScript diseñada específicamente para gestionar máquinas de estado y gráficos de estado para componentes de interfaz de usuario. Proporciona un conjunto completo de APIs para crear, interpretar y gestionar máquinas de estado, simplificando el proceso para los desarrolladores.
construyendo gráficos. ¿Y qué son los gráficos? Una máquina de estado. Las máquinas de estado se utilizan en todas partes. ¿Por qué? Bueno, en primer lugar, puedes ver en estos ejemplos, las máquinas de estado. Promesa, como en nuestro camino, devolución de llamada, observable. Todas ellas. Pero no todas están diseñadas para manejar la interfaz de usuario. Por eso tenemos Xdate. Nuestro tema principal. Xdate es una biblioteca de código abierto en JavaScript y con soporte para TypeScript para manejar máquinas de estado y gráficos de estado para la interfaz de usuario. En resumen, máquinas de estado y gráficos de estado para la web moderna. Y para Vue, Svelte y React. Muchas. En resumen, es este tipo de gestión de estado para componentes de interfaz de usuario. Tienen un sitio web muy bueno. Muy detallado con todos los tutoriales y cada detalle de la API, paso a paso. Entonces, ¿qué nos ofrecen? La biblioteca proporciona un conjunto de APIs para crear una máquina, una máquina de estado, y luego obtener, interpretar o obtener, servir un servicio de máquina a partir de la máquina de estado que creamos y luego ejecutar la instancia según nuestra configuración y luego permitir al usuario gestionar todo un sistema de máquinas de estado, ya sea máquinas de estado anidadas o máquinas de estado paralelas, realmente no importa. Algunas otras APIs principales de las que estamos hablando son máquinas, transiciones, eventos, acciones y estados.
6. Introducción a las Máquinas de Estado en Vue
Los estados son los puntos en los que se encuentra tu aplicación, tu interfaz de usuario. Una máquina es el conjunto de estados que pueden elegir transiciones o comunicarse entre sí, pueden moverse de uno a otro debido a un mapa de transiciones. Y el mapa de transiciones define dónde está el siguiente estado y el siguiente estado se activa mediante un evento. Y, por supuesto, un evento es lo que realmente hace que la máquina de estados se mueva. Técnicamente, podemos construir nuestras propias máquinas para manejar la recuperación con cuatro estados. Para crear una máquina de estados en Vue, podemos usar el paquete XJ o el paquete XJ Slack Vue, que proporcionan ganchos adicionales y permiten el uso de APIs de composición. Veamos un ejemplo simple de un componente de alternancia con dos estados, inactivo y activo. Para escribirlo en Xstate, solo necesitamos importar la máquina de estados de Xstate, definir el estado inicial, inactivo, y los dos estados, inactivo y activo.
Los estados son los puntos en los que se encuentra tu aplicación, tu interfaz de usuario. Una máquina es el conjunto de estados que pueden elegir transiciones o comunicarse entre sí, pueden moverse de uno a otro debido a un mapa de transiciones. Y el mapa de transiciones define dónde está el siguiente estado y el siguiente estado se activa mediante un evento. Y, por supuesto, un evento es lo que realmente hace que la máquina de estados se mueva. Y también puede incluir una acción que es una acción única que se activa cuando se dispara el evento.
Entonces, nuestro ejemplo anterior de la recuperación sería algo como en el siguiente estado, será algo como esto. Ahora definiremos la máquina. Uno es el estado inactivo, que es el estado inicial. Y luego definimos el estado, definimos el estado inactivo, en el que tenemos un evento llamado 'fetch'. Y al hacer 'fetch', pasaremos al estado de carga. En el estado de carga, tenemos dos eventos, 'resultado' o 'rechazar'. En el caso de 'resultado', pasamos al estado de éxito, que es el estado final. En caso de 'fallo', pasamos a 'reintentar'. Lo siento, volvemos al estado de carga en el evento 'reintentar' y luego podemos agregar algún contexto para calcular o gestionar el número de intentos de recuperación si queremos. Hasta ahora todo bien. Entonces, técnicamente, ya podemos construir nuestras propias máquinas para manejar la recuperación con cuatro estados. Ahora, la siguiente pregunta es, ¿cómo lo hacemos en Vue, cómo creamos una máquina de estados en Vue? Bueno, podemos usar el paquete XJ normal o podemos usar el paquete XJ Slack Vue, este es un paquete dedicado por Vue, que proporciona ganchos adicionales, similares a los ganchos de React, y permite el uso de APIs de composición. Entonces, te permitirá comenzar a escribir aplicaciones de manera más sencilla. Pero no te preocupes, si estás usando Vue 2, aún funciona con Vue 2, lo cual es genial. Veamos un ejemplo, un ejemplo muy simple. Tenemos un componente de alternancia, que solo tiene dos estados, inactivo o activo. Inicialmente, tendrá el estado inactivo, y luego, al activar el evento de alternancia, pasaremos al estado activo, y en nuestro estado activo, al activar el evento, volveremos al estado inactivo. Simple, ¿verdad? Para escribirlo en Xstate, solo necesitamos importar la máquina de estados de Xstate, escribir una máquina, darle un estado inicial, inactivo, definir los dos estados, inactivo con alternancia, ir a activo, y omitir. Y eso es todo. Tenemos el estado. Pero sí, seguramente estás aburrido en este momento, porque no tenemos, solo hemos visto ese código. No hay nada divertido allí.
7. Real Coding with Toggle Button
Ver código no es divertido. Así que hagamos una codificación real, ¿de acuerdo? Tenemos un componente de imagen y un botón de alternancia. El botón de alternancia cambia el fondo y el indicador. Estamos utilizando la API de composición, con un estado y un botón de alternancia que actualiza el valor. Creamos un nuevo estado, definimos la alternancia en la máquina con objetivos y acciones específicas, y creamos un servicio a partir de ella. Finalmente, asignamos la alternancia a la máquina.
Ver código no es divertido. Así que hagamos una codificación real, ¿de acuerdo? OK. Espero no arruinarlo. OK. Aquí vamos.
Así que solo envolvamos. Tengo un componente de imagen. Tengo un botón de alternancia. Lo siento, no te preocupes por la imagen. Así que tenemos un botón de alternancia. Y en el botón de alternancia, solo tenemos un span que toma el estado para tener este estado. Y simplemente cambiamos el fondo y el indicador. ¿Y cómo se ve? Digamos que así se ve. Es muy simple. Puede subir, bajar, y eso es todo.
Estamos utilizando la API de composición, lo que significa que tenemos un estado aquí que estamos utilizando la ref para poner con el valor de espacio fallido al principio. Y luego tendremos un botón de alternancia, que lo que hace es simplemente cambiar un valor y actualizar el valor. Y eso es todo. Y, por supuesto, tenemos el valor de cálculo para cambiar el estilo CSS. ¿Cómo lo vamos a cambiar? OK, vamos.
Así que no necesitamos esto. Oh, así que movamos esto. OK, ahora no lo necesitamos. No. Ya no necesitamos esto, así que todo lo que necesitamos hacer es crear un nuevo estado. Oh, primero que nada, lo siento. Primero que nada, necesitamos definir la alternancia, que vamos a definir en la máquina con el código de alternancia y la máquina de alternancia con el código del que acabamos de hablar, pero con un pequeño cambio porque aquí quiero definir específicamente el objetivo y luego definir las acciones además cuando se activa el evento, lo que significa que en realidad cuando se activa el evento, quiero cambiar el fondo al fondo diferente y quiero cambiar el indicador con los nuevos estilos CSS, estilizando y así sucesivamente, lo mismo con las acciones. Y cómo usar esto, solo voy aquí y comienzo a escribir, lo que quiero hacer, quiero crear un servicio a partir de eso, lo que significa que necesito interpretar la máquina para obtener un servicio, así que máquina de alternancia y así sucesivamente. Y ahora necesito asignar la alternancia, lo que significa que necesito asegurarme de que cuando la cree, haga toggle en la máquina de envío. Alternancia.
8. Updating the Local State and Testing Functionality
Cuando hago clic en alternar, quiero que envíe el evento alternar. Necesitamos asegurarnos de que la máquina esté actualizada. Después de obtener el servicio, necesito establecer el estado inicial del componente. Al actualizar el estado local, asegúrese de que el estado se actualice en la transición. Registre en la consola el nuevo estado para ver cómo funciona. Elimine el código innecesario y use el contexto para acceder al estado. Pruebe la funcionalidad para asegurarse de que funcione correctamente.
Cuando hago clic en alternar, quiero que envíe el evento alternar. ¿De acuerdo? Pero eso no está encendido, aún no está terminado. Necesitamos asegurarnos de que la máquina esté actualizada porque, lo siento, no así. Sí, después de obtener el servicio, necesito establecer el estado inicial, el estado local, del componente. Estoy usando esto y estoy usando la ref y pongo el estado inicial del servicio. ¿Bien, verdad? Pero para poder, esto es solo crear el primer valor inicial del estado local con el estado inicial, cuando quiero actualizar el estado local aquí, necesito asegurarme de que el estado se actualice en la transición, lo que significa que necesitamos en la transición. Y en la transición recibir un nuevo estado y luego podemos decir que podemos poner el valor del estado, actualizar el valor del estado al nuevo estado. Increíble. También puedes registrar en la consola el nuevo estado solo para ver cómo funciona. Y eso es todo, y aquí no necesito el estado de fondo y ya no necesito esto porque ya tengo el contexto. Ahora solo puedo hacer estado y luego contexto y luego fondo. De manera similar, hago estado, contexto, indicador de contexto y debería estar funcionando. Asegurémonos de que funcione. Oh, ahora. ToggleMachine envía otra función. OK, veamos ToggleMachine. Oh, no, no puedo simplemente escribir ToggleMachine. Necesito usar el servicio, no ToggleMachine. Así que estoy haciendo el servicio y simplemente reinicio. Ahora hagámoslo. OK, no funciona. Así que supongo que olvidé. Creo que debería ser estado. Probablemente? No. Así que vayamos a X day y vayamos a X day. Y quiero ver cómo lo voy a actualizar. Así que vamos a la actualización y vamos al Tutorial. Sin la última palabra. Y estado. Y tipo de transiciones, tipo, tipo.
9. Transition and Toggle Functionality
En la transición, supongo. Permítanme elegir hacer una receta o un tutorial. Echemos un vistazo al interruptor para asegurarme de que todo esté listo. Debería funcionar así. Tenemos un historial, que incluye el estado anterior y otra información.
En la transición, supongo. Así que es en la transición, y luego podemos hacer. Vale, no tengo idea. Pero permítanme elegir hacer una receta o un tutorial. Sí, así que digamos que si tengo esto y reciente y el actual es, sí, entonces permanecerá, así que debería estar bien. Así que simplemente detén el valor, que es el estado. Así que retrocedamos aquí y hagámoslo de nuevo. Y veamos cómo funciona. Sí, está funcionando.
Vale. Y echemos un vistazo al interruptor para asegurarme de que todo esté listo, debería ser el indicador de fondo. Así que el contexto de fondo, el estado del indicador de contexto. Sin problema. Y con el valor del estado. Vale, digamos primero que tengo esto. Digamos que el nuevo estado en la transición. Servicio. Hubo un envío de alternancia. Así que sabía que tenía razón. ¿Por qué no funcionó? Estado de valor, guardar. Vale. Así que copiemos este código solo por si acaso. Puede que haya. Sí. Pero entiendes la idea. Debería funcionar así. Y ahora lo haré de nuevo. Puedes ver aquí en el estado, tenemos un historial. Además, si cambiamos de uno a otro, entonces tenemos el valor del historial del estado anterior y también toda la otra información. Genial.
10. Implementando XDAView e Imprimiendo el Estado del Interruptor
Ahora, veamos cómo implementarlo con XDAView. Definimos un servicio usando el gancho de servicio de XDAView, al que se puede acceder desde otros componentes. La función useToggleMachine devuelve un servicio que interpreta el servicio ToggleMachine y lo inicia. Eliminamos el código innecesario y usamos el interruptor de useToggleMachine. La función toggle actualiza el estado. Limpiamos el código e imprimimos el estado del interruptor en un componente de la aplicación.
Ahora, veamos cómo implementarlo con XDAView. Primero, vamos a tener un servicio que podemos definir de manera local, que podemos reutilizar y otros componentes pueden acceder a él, utilizando el gancho de servicio. Es el gancho de XDAView. Eso escribirá una función llamada useToggleMachine que devuelve el nuevo servicio, donde podemos interpretar el servicio de ToggleMachine y también iniciarlo.
Entonces, ahora aquí, todo lo que necesito hacer es simplemente eliminar, asegurarme de que no necesito esto. Todo lo que necesito es obtener esto de useToggleMachine de esta manera. Y useToggleMachine devuelve el servicio, devuelve dos cosas, estado y enviar. Es un concepto similar a actualizar el estado en React, useState en React, donde obtienes un estado y obtienes la función para actualizar el estado. Entonces aquí, ya no necesitamos esto. Y solo necesitamos asegurarnos de que la constante toggle sea igual a enviar. Y luego pondremos toggle. Bien, eso debería ser todo. Bien, lo siento, necesito eliminarlo. Lo sé. Ahora debería funcionar. Y ahora puedes ver, ahora funcionó. Y ahora pensemos cuántas cosas tenemos que limpiar. Limpiamos uno de estos y limpiamos uno de estos. Genial, así que ahora solo codificaré esto. Y también podemos intentar sacarlo de todos los componentes, digamos que en una aplicación quiero imprimirlo. Estoy usando el interruptor aquí. Y luego tengo que colocar el modo de interruptor y luego puedo ver el interruptor activo y activo. Y eso es todo, genial, bien.
11. Ventajas de Xstate y Comunidad
Xstate proporciona una vista clara del flujo de código, permite reutilizar código, realizar pruebas precisas, detectar errores y facilitar el mantenimiento. El mapa de transiciones permite un mejor diseño y planificación del código. Echa un vistazo al visualizador XDAY dark side para una gran experiencia. Modifica y visualiza estados, acciones y eventos de forma interactiva. Únete a la activa comunidad de AppState y explora la documentación sobre la construcción de bibliotecas de componentes de interfaz de usuario.
Ok, hasta ahora todo bien, ¿verdad? Fue solo un ejemplo donde podemos ver cómo funciona Xstate y cómo configurarlo. Entonces, ¿cuál es la ventaja de Xstate? Bueno, en primer lugar, tienes una vista muy clara, una vista visual clara del flujo de código. Y luego, puedes, porque todo está diseñado en gráficos y todo es estado y evento, y un componente se conecta a otro a través de estado y eventos. Entonces, en realidad, podemos reutilizar el código y asegurarnos de tener suficiente cobertura de pruebas. Porque cada vez que agregamos otro estado, solo necesitamos probar ese estado y la conexión con cualquier otro estado que se conecte directamente a este estado, no necesitamos probar nada más. Por lo tanto, podemos asegurarnos de que nuestras pruebas sean muy precisas, no rompamos nada y también podemos detectar fácilmente errores y depurar. Y, por supuesto, la escalabilidad y el mantenimiento son impresionantes porque es fácil de ver, fácil de entender, fácil de mantener. Y debido a que es el mapa, es el mapa de transiciones, son los gráficos, realmente puedes ver cómo puedes diseñar y planificar este diseño y planificar tu código con anticipación. Por lo tanto, es un mejor diseño de código para nosotros.
Entonces, si realmente quieres echarle un vistazo, lo recomiendo totalmente, porque me encanta XDAY. Sugeriría, en primer lugar, intentar ver el lado oscuro porque tienen un visualizador muy agradable. Como puedes ver aquí, incluso tienen un visualizador y algunos ejemplos de la definición, el estado. Y aquí copié el estado, la máquina de interruptor que creamos antes. Entonces digamos, máquina de interruptor. Máquina de interruptor. Interruptor. Luego tenemos el interruptor en este, es del código que pusimos antes. Uno, lo tenemos y puedes ver aquí, tienes un activo, haces clic en el interruptor, queremos cargarlo. Haces clic en cargar, queremos activarlo. Oh, esto es porque agregué en otro archivo, pero si lo eliminamos y actualizamos, iremos a activo. Activo, ok. Luego solo tenemos dos estados. Inactivo, cambiamos a activo cuando cambiamos el interruptor. Cuando apagamos el interruptor, cambiamos a inactivo. Y también podemos modificar el estado, puedes agregar más estados, puedes eliminar estados y se mostrará para que sepas exactamente dónde estás haciendo algo mal. Y no solo eso, también puedes ver el estado aquí, la acción aquí en los hijos. Y luego el evento, puedes hacer un interruptor, puedes hacer un evento de interruptor, enviarlo y ver automáticamente qué está sucediendo. Es muy interactivo y te recomiendo encarecidamente que lo pruebes.
Además de eso, tenemos una comunidad de vista, una comunidad de AppState, muy activa, muy buena. Y también puedes leer la documentación o algunos artículos sobre cómo construir toda la biblioteca de componentes de interfaz de usuario con AppState, muy agradable de ver.
12. Conclusion and Contact Information
O algún otro documento específicamente sobre Vue. Requiere cambiar tus hábitos de codificación y planificar con anticipación para escribir un código mejor. Soy Maya, una ingeniera de software senior, co-mantenedora de Storefront UI, embajadora de Knox y organizadora de Vue.js. No comiences a codificar de inmediato. Planifica tu estado, componente y características para ahorrar tiempo más adelante. Echa un vistazo a mi código de muestra en GitHub. ¡Gracias por unirte a mi charla!
O algún otro documento específicamente sobre Vue. Y totalmente recomendado, me encanta. Realmente, realmente, simplemente me encanta. Requiere una curva de aprendizaje bastante pronunciada porque realmente necesitas cambiar los hábitos de cómo decides trabajar, cómo decides cómo se ve tu código, en lugar de saltar y escribir código. Necesitas sentarte, planificar con anticipación qué estado tienes y trabajar desde allí, pero es realmente bueno. Te ayuda a escribir un código mejor.
Justo antes de terminar, mi nombre es Maya y soy una ingeniera de software senior. Soy co-mantenedora de Storefront UI, una biblioteca de componentes de interfaz de usuario. También soy embajadora de Knox, soy una experta en desarrollo web de Google en rendimiento y también soy organizadora de Vue.js. Me gusta escribir y hablar sobre desarrollo front-end y desarrollo web en general. Siéntete libre de seguirme o ponerte en contacto conmigo en GitHub o en Twitter en mayachavin y mi sitio web mayachavin.com. Y eso es todo.
Lo último es no comenzar a codificar. Planifica el modelado, tu estado, tu componente, tus características y luego desarrolla a partir de ahí. Eso te ahorrará un montón de tiempo más adelante si lo consideras al intentar solucionar errores, intentar encontrar un error. Y puedes ver mi código de muestra en el enlace de GitHub aquí. Y nuevamente, gracias por unirte a mi charla. Espero que lo hayas disfrutado. Gracias.
Comments