Estado Local y Caché del Servidor: Encontrando un Equilibrio

Rate this content
Bookmark

¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.

Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.

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

FAQ

Natalia Tepluchina es miembro del equipo central de Vue.js, especializada principalmente en la documentación de Vue. Si estás leyendo la documentación de Vue 3, es probable que estés leyendo algo autorizado por ella.

En la conferencia, Natalia Tepluchina habla sobre el manejo del estado local en las aplicaciones, en particular en escenarios que involucran comportamientos asíncronos y solicitudes de API.

En GitLab, se utilizan Vuex y el Cliente Apollo para la gestión del estado en el stack frontend.

El estado global en una aplicación incluye datos que se quieren compartir entre diferentes componentes, vistas o rutas, y que necesitan estar disponibles en toda la aplicación.

Vuex es una herramienta de gestión de estado para Vue.js. Permite almacenar y manejar el estado de la aplicación de manera centralizada y realizar mutaciones o cambios en el estado a través de acciones para manejar comportamientos asíncronos.

Vuex puede ser desafiante cuando se trata de datos de servidor, especialmente debido a la necesidad de manejar estados de carga, errores y la sincronización de datos asíncronos que pueden no estar instantáneamente disponibles o ser actualizados desde el servidor.

Natalia menciona el uso de Apollo Client, ideal para trabajar con GraphQL y Vue 3, y Vue Query, que es útil para manejar el estado de API en Vue con mecanismos avanzados para manejar solicitudes y caché.

Natalia Tepluhina
Natalia Tepluhina
24 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute el manejo del estado local en el desarrollo de software, particularmente cuando se trata de comportamiento asincrónico y solicitudes de API. Explora los desafíos de gestionar el estado global y la necesidad de acciones al manejar datos del servidor. La charla también destaca el problema de obtener datos no en Vuex y los desafíos de mantener los datos actualizados en Vuex. Menciona herramientas alternativas como Apollo Client y React Query para manejar el estado local. La charla concluye con una discusión sobre GitLab haciéndose público y la celebración que siguió.

1. Introducción al Manejo del Estado Local

Short description:

¡Hola a todos! Hoy vamos a hablar sobre cómo manejar el estado local de nuestra aplicación al lidiar con comportamientos asíncronos y solicitudes de API. Soy Natalia Tepluchina, miembro del equipo central de Vue.js y Stack Frontend Engineer en GitLab. ¡Vamos a sumergirnos en ello!

¡Hola a todos! Me alegra verlos a todos hoy en este evento, y aunque realmente espero que esta conferencia sea presencial este año, desafortunadamente para todos nosotros, estoy hablando con ustedes de forma remota. nuevamente desde Ámsterdam. ¿Quizás el próximo año? ¡Esperemos que sí!

Y hoy vamos a hablar sobre un tema que es una fuente interminable de frustración para todos los desarrolladores, que es manejar un estado local de nuestra aplicación, en los casos en que necesita lidiar con comportamientos asíncronos, solicitudes de API, y todo lo demás.

Permítanme presentarme rápidamente. Mi nombre es Natalia Tepluchina. Soy miembro del equipo central de Vue.js. Trabajo principalmente en la documentación de Vue, por lo que si estás leyendo la documentación de Vue 3, hay altas probabilidades de que estés leyendo algo que yo autoricé. Trabajo como Stack Frontend Engineer en GitLab. Y allí en GitLab, por supuesto tenemos Vue en nuestro stack frontend. Pero para los gestores de estado, trabajamos tanto con Vuex, que se mencionará brevemente en esta charla, como con el Cliente Apollo, que también se mencionará brevemente en esta charla. Así que conozco los dolores de cada solución, y tengo una idea de lo que estoy hablando en esta charla en particular, y también soy experta en Tecnologías Web de Google.Net.

2. Entendiendo el Estado Global

Short description:

El estado global es datos que se comparten entre componentes, vistas y rutas en nuestra aplicación. Tomemos un ejemplo rápido usando Vuex 4. Tenemos un estado local con una propiedad llamada count, que puede incrementarse usando mutaciones. Algunas empresas prefieren envolver las mutaciones en acciones para un mejor factorización al lidiar con comportamientos asíncronos.

Entonces, comencemos a profundizar en nuestro estado global. ¿Qué es el estado global en nuestra aplicación? Estos son algunos data que queremos compartir entre diferentes componentes, diferentes vistas, diferentes rutas, y por alguna razón lo necesitamos disponible en todas partes en nuestra aplicación.

Veamos un ejemplo muy corto, breve y rápido para aquellos que nunca trabajaron con Vuex o se olvidaron de cómo se ve, y esto será Vuex 4. Así que si la sintaxis te resulta un poco desconocida, no tengas miedo. Es muy similar a Vuex 3 que usamos con Vue 2.

Así que imagina que tenemos un estado local que devuelve una sola propiedad llamada count, y esto es 0. Y necesitamos cambiar esta propiedad de alguna manera, así que añadimos una mutación. Porque todas las propiedades del estado sólo deben ser cambiadas con mutaciones. Así que tenemos una mutación para incrementar el count. Eso simplemente incrementa el count, como sugiere el nombre. Y esto ya es suficiente para usar esto en nuestro componente, pero algunas empresas como la mía tienen una convención que dice que no podemos hacer commit de mutaciones desde los componentes. Si alguna vez has oído que esto es un anti-patrón, esto es incorrecto. Puedes llamar a las mutaciones, hacer commit de las mutaciones, desde los componentes, pero puede hacer que tu factorización sea más difícil cuando necesitas un comportamiento asíncrono, por eso a veces las envolvemos en acciones. Así que esto es un boilerplate suficiente para incrementar el count.

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.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

Workshops on related topic

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
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
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced 2022React Advanced 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.