Vuex? No, es X(state)Vue para UI

Rate this content
Bookmark

Los componentes de UI se construyen en base a flujos de usuario o gráficos de estado. Para gestionar estos estados, normalmente recurrimos a un sistema de variables booleanas como isLoading. Pero esto resulta ser propenso a errores y difícil de mantener a medida que el código crece. Existe una mejor solución. En mi charla, exploraremos cómo podemos tener un control total sobre los estados de nuestra aplicación y desarrollar un sistema de UI más adaptable al comportamiento de los usuarios, manteniendo al mismo tiempo la escalabilidad del código con máquinas de estado, en tiempo real.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

X state 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, incluyendo integraciones para Vue, Svelte y React. Se utiliza para crear máquinas de estado más robustas y gestionar el flujo de la interfaz de usuario de manera eficiente.

Vue 3 incluye la API de Composición que es una mejora significativa sobre Vue 2, permitiendo mayor flexibilidad y control en la creación de componentes, y facilita la escritura de componentes dinámicos y funcionales.

Se puede manejar el estado de un componente en Vue utilizando X state para definir máquinas de estado que gestionan los estados y transiciones del componente en función de eventos específicos, lo que ayuda a organizar y simplificar la gestión del estado.

Las máquinas de estado ofrecen una estructura clara para manejar cambios y estados de la interfaz de usuario, facilitando el mantenimiento, la reutilización de código y la detección de errores, además de mejorar la escalabilidad y la capacidad de prueba del código.

Maya recomienda no iniciar codificando directamente, sino planificar primero el modelado del estado, los componentes y las características para ahorrar tiempo en la solución de errores y mejorar la calidad del código.

Para implementar una máquina de estados en Vue con X state, se define una máquina de estados indicando los estados posibles y las transiciones entre ellos en función de eventos. Luego, se utiliza esta definición para manejar los estados del componente de Vue.

El uso de máquinas de estado busca resolver problemas de complejidad creciente en componentes que manejan múltiples estados y transiciones, simplificando la gestión del estado y reduciendo la probabilidad de errores.

Maya Shavin
Maya Shavin
33 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

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

Short description:

¡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

Short description:

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

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
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.