Gestión de Estado Moderna con Vue 3

Rate this content
Bookmark

La Reactividad de Vue 3 y la API de Composición ofrecen a los desarrolladores técnicas flexibles para trabajar con datos reactivos. Permiten un nuevo y moderno enfoque para manejar la Gestión de Estado. Los desarrolladores ahora pueden implementar tiendas locales y globales sin esfuerzo. Vuex ha sido uno de los plugins de primera parte más utilizados para Vue 2. Echemos un vistazo a las ventajas y desventajas de usar Composables en lugar de Vuex.

Vanessa Otto
Vanessa Otto
22 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Vanessa presenta Vue Free y discute los beneficios de usar la API de Composición. Se explica el orden de ejecución y agrupación de unidades lógicas utilizando la API de Composición. La API de Composición se utiliza para la gestión de estado y refactorización de componentes. El orador comparte su experiencia inicial con la gestión de estado usando Vuex. Los Composables se exploran como una alternativa para la gestión de estado en Vue 3.

Available in English

1. Introducción a Vue Free y la Composition API

Short description:

En esta parte, Vanessa presenta Vue Free, una potente solución de gestión de estado para aplicaciones Vue. Comparte su experiencia de usar Vue Free sin Options API y Vuex, aprovechando en su lugar la Composition API. Vanessa explica los beneficios de la Composition API y cómo se puede utilizar en aplicaciones pequeñas. También discute las tres API en Vue: options API, reactivity API y composition API, destacando las ventajas de la composition API. Finalmente, proporciona un resumen de cómo escribir un componente en Vue 2 o Vue 3 utilizando la options API.

Hola, ahora vamos a hablar sobre la gestión de estado moderna con Vue Free.

Hola, soy Vanessa. Puedes encontrarme en línea como Vanze. Soy responsable del front end en Cevy. Soy coanfitriona de dos podcasts diferentes, Expect Exception, donde hablamos sobre pruebas de front-end testing y Working Draft, un podcast alemán sobre web development. Y hace aproximadamente un año, en septiembre de 2020, recuerdo que estaba allí viendo a Avenu en la conferencia de Vue JS, finalmente diciendo, hey, Vue Free está ahí fuera, y ahora quiero que vayas conmigo en el viaje, cómo instalé Vue Free y usé conceptos alternativos para usar Vue Free completamente sin Options API y también sin VueX. No sugiero que debas usar Vue Free sin Options API o reemplazar VueX. Quiero decirte que la Composition API es tan poderosa que realmente podemos usar Vue sin ambas herramientas, y tenía sentido para mí en un estado en el que tenía una aplicación realmente pequeña que comencé con Vue Free desde cero y no tuve que migrar desde mi aplicación Vue2.

En los ejemplos de code que mostraré en los próximos minutos, usaré la función de configuración y prefiero use ref sobre reactive. Pero todo lo que mostraré ahora, por supuesto, puedes usar el azúcar sintáctico de configuración de script en su lugar y puedes elegir usar reactive en lugar de ref si lo prefieres.

Como mis componentes de mi muy pequeña aplicación Vue Free hace aproximadamente un año comenzaron a crecer porque tenía algunos problemas más complejos que necesitaban algunas soluciones más complejas, yo y por lo tanto también esta charla fueron inspirados principalmente por estos tres artículos. Agrupar, extraer patrón compartido, state management con composition API, y ¿deberías usar composition API como un reemplazo para Vuex.

Enfoquémonos en tres de las API de Vue por ahora, la options API, reactivity API, y composition API. La options API, podemos pensar en esta estructura de objeto que conocemos de nuestras aplicaciones de un solo archivo en Vue2, donde tenemos nuestros data computed, methods, watch mounted, y muchos más. Y la reactivity API no es tan diferente de eso. Tenemos refReactive para data reactive computed, watch, watch effect, unmounted, y muchos más. Pero la clave es que ahora puedo importar esas funciones directamente de Vue. No tengo que usar un componente de archivo único de Vue o un Mixon para usar esas herramientas. Puedo importarlas en cualquier archivo de JavaScript o TypeScript. Y luego la composition API nos proporciona una función de configuración donde puedo reunir toda la magia y usar todas esas poderosas herramientas de la Reactivity API en mi componente de Vue.

Así que hagamos un resumen de cómo escribir un componente en Vue 2 o en Vue 3 usando las opciones. Aquí tengo una plantilla con un párrafo con saludo y nombre completo. Si desplazo hacia abajo hasta mi bloque de script, puedo ver aquí que tengo una función de data, que está devolviendo un objeto con saludo y hola. Tengo propiedades para el primer nombre y el apellido. Y tengo una propiedad computada para el nombre completo, que me devuelve un primer nombre con un espacio y el apellido. Así que este es un componente con un solo propósito, que hace su trabajo bastante bien. Una nota lateral bastante divertida es que inicialicé este saludo aquí como un atributo de data reactivo, aunque en realidad nunca lo cambio y no necesito estos observadores en él de todos modos. Pero nunca estuve seguro de dónde poner estas constantes usando la options API. El problema en el que ahora quiero centrarme es que las unidades lógicas, si el componente está creciendo y creciendo, se dispersan por todo el bloque de script. Entonces, ¿qué quiero decir con esto? He preparado esta caja de arena de code aquí, y aquí también podemos ver que tenemos nuestro saludo y nombre completo para saludar al usuario.

2. Orden de Ejecución y Agrupación de Unidades Lógicas

Short description:

Esta parte se centra en el orden en que las cosas ocurren en el bloque de script. Explica cómo la API de composición permite a los desarrolladores agrupar unidades lógicas en un solo archivo o compartirlas con otros. El orador comparte su experiencia con la API de composición y cómo se puede utilizar sin compartir funcionalidad. Proporcionan un ejemplo de una reimplantación del saludo utilizando la API de composición, destacando la simplicidad y el poder de usar JavaScript directamente.

Pero luego también mostramos los elementos del usuario donde hacemos un bucle y también proporcionamos una función de eliminar elemento para eliminar algo. Si desplazo hacia abajo hasta el bloque de script, ahora quiero que te centres en el orden de cómo las cosas están sucediendo. Tengo la función data que está ejecutando un objeto con el saludo y los elementos. Las propiedades tienen cosas del saludo. Una propiedad calculada con un nombre completo del saludo. Luego un método con la función de eliminar elemento de los elementos. Las categorías se vinculan a la forma en que el esqueleto de la vista, el objeto de la vista aquí está estructurado.

Todo en data está en data. Cada propiedad calculada está en propiedad calculada. Cada función está en el bloque de métodos. Ahora tenemos un punto donde tenemos ahora elementos de saludo, saludo, elementos de saludo. Están dispersos por todo el archivo. Esto es algo así como, crece y crece y crece, pareciéndose a esto. Por supuesto, puede ser una solución dividir el componente, pero centrémonos en que ya no funciona más, no podemos dividir más, y todavía tenemos estas líneas de code no realmente unidas y lo que la composition API nos proporciona es una posibilidad de agrupar unidades lógicas de nuevo, de modo que todo lo que está relacionado con el saludo, podemos imaginar que está en esta caja azul claro en la parte superior y todo lo que está relacionado con los elementos podemos imaginar que está unido en esta caja azul oscuro, casi negra aquí. Así que la composition API permite a los desarrolladores encapsular unidades lógicas en un solo archivo o compartirlas con otros.

Lo que quiero decir con eso es que cuando aprendí sobre la composition API hace un año, siempre se me vendió como esto es lo que debes hacer en lugar de mezclar. Usa la composition API para compartir funcionalidad. Es realmente poderoso. Pero luego empecé con U3, pensé, pero ¿realmente necesitamos compartir lógica para usar la composition API? Porque realmente me gusta cómo funciona la composition API, y en realidad me gusta usarla también sin compartir funcionalidad. Y esto es exactamente lo que haremos ahora. Así que he creado algunos archivos de Hola Mundo en este patio de recreo de componentes de archivo único de vista. Y el primero es una reimplantación de solo las cosas de saludo que vimos antes en U3 composition API. Así que aquí tenemos una plantilla con el saludo y el nombre completo. E importamos calculado de la vista. Si desplazo hacia abajo hasta las propiedades, veo el primer nombre y el apellido. Y aquí abajo tengo la función de configuración, que me está dando un saludo constante con Hola, y un nombre completo con una propiedad calculada, y luego devuelvo todo para pasarlo a mi plantilla. Lo que es bastante genial es que es solo JavaScript, ¿verdad? Me siento bien. En realidad, me sentí un poco sudoroso la primera vez que lo veo, la primera vez que lo vi. Así que aquí tenemos el saludo cons. Es solo un puro cons sin envolverlo en un objeto data, sin usar un ciclo de vida creado para inicializar constantes.

3. API de Composición y Gestión del Estado

Short description:

En esta parte, el orador discute el uso de la API de composición para agrupar unidades lógicas y refactorizar componentes. Demuestran cómo encapsular la funcionalidad en funciones separadas y devolver las propiedades necesarias. Se explora el uso de la desestructuración de ECMAScript, junto con la importancia de las importaciones explícitas para un mejor soporte de IDE. El orador también menciona el repositorio Vue Use Git como un recurso para composables preescritos. Luego hacen la transición a discutir la gestión del estado, destacando los inconvenientes de la perforación de props y el uso del objeto raíz global en Vue 2.

Solo una constante, y cuando tienen un nombre completo como propiedad calculada. Pero, por supuesto, también aquí la funcionalidad puede crecer un poco. Estamos cambiando a nuestro componente Hello World 2, y donde también tengo mis elementos, que también puedo eliminar. Hago un bucle sobre ellos en la plantilla y tengo mi método para eliminarlos. Importo computed y ref ahora de Vue, y si ahora me desplazo hasta el bloque de configuración, lo que podemos ver es la misma implementación para el saludo con un saludo y un nombre completo, y luego una unidad lógica de los elementos y un método para eliminar los elementos.

Y cuando comencé con Vue 3, todo el tiempo mi memoria muscular era como, oh sí, tengo que poner todo lo relacionado con data al principio, y luego todas las propiedades calculadas y luego todos los métodos y luego todos los hooks del ciclo de vida hasta que recordé, no, no, no, ya no tengo que usar esto. Ahora puedo vincular las unidades lógicas. Puedo simplemente juntarlas. Pero luego, por supuesto, mi componente fue creciendo un poco y me preguntaba, sí, ¿cómo realmente digo que estas cosas pertenecen juntas? ¿Tenemos un comentario como inicio del bloque de elementos y bloque de elementos? ¿Cómo logro esto? Así que comencé a refactorizar este componente un poco, la misma plantilla que vimos antes, pero ahora en la parte superior tenemos dos funciones diferentes, el uso de saludo y el uso de elementos, que encapsulan toda la funcionalidad en esas funciones donde tengo todo relacionado aquí y devuelvo las propiedades necesarias al exterior. Y si me desplazo hasta el bloque de configuración, ahora puedo ver que se está volviendo un poco más limpio si se estaba volviendo un poco desordenado y puedo externalizar toda esta lógica a algún otro lugar. Y aquí puedo ver claramente el saludo y los elementos de nombre completo y eliminar los elementos que provienen de esos dos composables.

Pero ahora el siguiente paso es, Hey, sería súper increíble si puedo usar los elementos de uso también en otro lugar, porque realmente necesito esta funcionalidad también en otro componente, lo que nos lleva a hello world cuatro, que también está refactorizando un poco más. Solo importo computed ahora de nuevo de Vue y no ref más, pero ahora también importo use items de use items. Cambiando a este archivo puedo ver import ref de Vue en la parte superior en un archivo JavaScript plano y la misma función con los use items que acabo de ver es ahora una función exportada archivo, que nos brinda toda la funcionalidad como un composable en nuestro componente de archivo único de Vue. Si me desplazo hasta el bloque de configuración puedo ver aquí de nuevo que tengo mi use greeting y el use item. Quiero darles una pequeña pista de lo que estoy haciendo aquí. Entonces, lo que puedes ver aquí es que al principio pensé que es súper genial usar la desestructuración de ECMAScript para obtener todo lo relacionado con los use items directamente en la plantilla. Una línea de code, esto se ve súper genial, pero luego un problema que me ocurrió es que No tengo ningún soporte de IDE aquí en este patio de juegos y si intento buscar el eliminar item, estoy perdido. No sé de dónde viene y por eso lo que tiendo a hacer es realmente ir al explícito camino para no usar la magia proporcionada por un lenguaje por mí, pero realmente diciendo explícitamente bien, importo esas cosas de allí y ahora puedo ver bien, el eliminar item viene de los use items y los use items vienen de este archivo. Así que ya escribimos nuestros primeros composables. Si buscas un poco más de inspiration, echa un vistazo a este repositorio de Git de Vue Use donde puedes encontrar muchos composables preescritos en typescript que puedes usar, funciones de Axios y así sucesivamente. Creo que también ya es tiempo de Hektoberfest, así que también si quieres involucrarte en el open source, este podría ser un punto de partida para ti. Bueno, pero ahora centrémonos en la state management. Entonces, ¿cómo pensé que funcionaba el estado cuando comencé con Vue 2 en 2017 o algo así. Primero hice el anti-patrón de la perforación de props. Así que usé props emit event handling para obtener algo del componente raíz a, es realmente como alquilar alquilar alquilar alquilar alquilar alquilar alquilar niños para simplemente emitir, emitir, emitir, emitir todo de nuevo. Esto no era realmente mantenible. Luego pensé que era inteligente y usé la raíz global, el dólar raíz para adjuntar variables a esta cosa de raíz global hasta que me di cuenta de que esto no funciona. Esto no es realmente reactivo. Creo que realmente no debería usar esto.

4. Experiencia Inicial con la Gestión del Estado y Vuex

Short description:

El orador discute su experiencia inicial con la gestión del estado y Vuex. Explican cómo la instalación de Vuex simplificó el proceso de creación de la gestión del estado y les permitió centrarse en aspectos más complejos del desarrollo.

Tampoco se discutió realmente. Estaba realmente escondido en la API documentation que existe algo como una raíz global. Y luego me senté y pensé, bueno, la state management suena importante, suena difícil. Store suena difícil, observables, Vuex, no estoy seguro, pero voy a instalar Vuex ahora. Y realmente me sorprendió cómo esto me facilitó la creación de state management solo creando este archivo index.js. Y ya tenía algún estado. Fue una herramienta realmente poderosa porque era tan simple de usar que luego me permitió centrarme en las partes complejas de escribir code o encontrar soluciones para problemas más grandes.

5. Uso de Composables para la Gestión del Estado

Short description:

Al comenzar con Vue 3, me di cuenta de que podía lograr la gestión del estado con composables. Quería explorar las posibilidades aún más. En un ejemplo de code sandbox, me centré en los artículos del carrito con un estado de carga y utilicé el hook desmontado para obtener datos. La función de configuración contenía el estado, la función de carga de artículos y los métodos para eliminar artículos. Luego cambié a una alternativa diferente de la aplicación, importando el composable de uso de artículos en la alternativa de artículos del carrito. Este enfoque proporcionó la gestión del estado local.

Pero cuando estaba comenzando con Vue 3, pensé, hey, dame un segundo. Creo que puedo lograr la state management en realidad con composable. Y no fue porque Vue aún no estaba listo para Vue 3. Fueron bastante rápidos y había una guía de migración. Pero estaba interesado en lo que realmente podía lograr con composables. Quiero dar un paso más aquí. Y aquí tengo otro code sandbox, que probablemente se cargará pronto. Pero creo que también lo tengo precargado aquí. Sí, lo tengo.

Así que aquí quiero centrarme primero en los artículos del carrito, que vemos aquí. Y ahora tengo un ejemplo un poco más realista. Así que si recargo esto, puedes ver que habrá como tres segundos de carga porque normalmente obtengo los artículos de un servidor. Así que tengo tres segundos de carga y luego veo los artículos. Y aquí tengo un primer artículo. Así que lo que tengo que comprar a continuación son los huevos y luego tengo mi lista de artículos y aquí realmente uso ahora un estado con un flotante donde puedo establecer un estado de carga si todavía está cargando. Y en la parte del script ahora uso el hook desmontado donde puedo obtener los data. Así que yendo a la función de configuración ahora podemos ver el estado con los artículos y la carga. Y luego tengo la función importante aquí son los artículos de carga donde establezco isLoading en true. Como no tengo realmente un endpoint real al que pueda hablar, uso una función useSleep durante tres segundos. Y luego establezco algunos artículos ficticios, mis huevos y mi leche. Y si todo funciona bien, puedo establecer isLoading en false de nuevo. También tengo mi método para eliminar el artículo y tengo una propiedad calculada para el primer artículo y uso el hook del ciclo de vida desmontado para cargar los artículos tan pronto como se haya montado mi componente.

Ok, hasta ahora todo bien, tenemos algo que parece un estado pero no se siente realmente como state management de inmediato. Así que ahora quiero ir al componente raíz de la aplicación y cambiar a una alternativa diferente de esta aplicación y usar ahora dos componentes diferentes que nos proporcionan nuestros artículos. Así que si guardo esto y recargo, mientras tanto iré a la alternativa de artículos del carrito que se parece bastante a los favoritos. Así que ambos solo muestran nuestros artículos. Así que en la alternativa de artículos del carrito, me desplazo hacia abajo y en lugar de toda la lógica que vimos antes, ahora puedo ver que importo el composable de uso de artículos y obtengo todos los data necesarios del estado de carga de artículos, primer artículo, eliminar artículo y desmontado, llamo a la función de carga de artículos. Ahora puedo ver aquí mis tres segundos de carga y puedo ver dos veces mi lista de mis artículos. Y aquí quiero que te centres en la gestión del estado local, si abro el archivo, que pensé que había abierto antes, pero lo hago de nuevo para el composable. Ahora puedo ver que el estado aquí está fuera del componente de esta función de exportación.

6. Implementación y Gestión del Estado

Short description:

La implementación es la misma que antes, con la adición de la palabra clave de solo lectura para crear una sensación de tienda. El estado se puede colocar dentro de la función exportada, lo que permite la gestión del estado local. Sin embargo, si se desea una gestión del estado global, el estado se puede mover en la parte superior de la exportación. Al exportar la función varias veces, el estado se crea solo una vez y permanece global. Después de instalar las dependencias, la X se puede eliminar dos veces, demostrando tanto la carga como la gestión del estado global.

Y el resto de la implementación es el mismo que antes. Simplemente se copió con una diferencia importante. Así que aquí importo adicionalmente la palabra clave de solo lectura de Vue para tener esta sensación de tienda de este composable, para tener la única fuente de verdad de lo que esperamos que se comporte nuestra tienda. Y ahora quiero poner el estado dentro de esta función exportada. Y si estoy haciendo esto y espero a que se recargue aquí. Ah, vamos. Están cargando durante tres segundos. Y tengo mi x, que puedo eliminar en ese estado local. Y aquí abajo puedo eliminar la leche fresca en esa gestión del estado local ya que tanto la alternativa de los artículos del carrito como los favoritos están utilizando estos artículos de uso, que tiene el estado inicializado dentro de esta función. Pero si piensas, hey, esto es un poco raro. Esto no es lo que espero de la gestión del estado. Espero que sea global. Esto se logra simplemente moviendo el estado en la parte superior de la exportación. Y volveré a recargar esto de nuevo. Y entonces puedes ver que, por lo tanto, acabo de crear el estado ahora una vez. Es global. No cambia. No lo inicializamos varias veces. Simplemente exportamos esta función varias veces. Entonces, después de instalar todas esas dependencias, verás que ahora puedo eliminar la X y se eliminarán dos veces. Así que están cargando y la gestión del estado global. El siguiente punto, si piensas, hey, esto no parece como esperaría que se viera una tienda realmente, también puedes usar una alternativa a esta alternativa. Puedes usar el patrón de proporcionar y verificar, que ya nos fue dado en Vue 2. Y este es este sandbox de código donde comienzo con el componente raíz app.view. Y puedes ver aquí que importo una tienda e importo un hola mundo y registro el componente hola mundo. Y proporciono la tienda. ¿Qué es la tienda? Echemos un vistazo a la tienda en el archivo index JS aquí. Así que aquí tengo ref calculado y solo lectura donde tengo mi estado, un primer artículo, una propiedad calculada que parece un getter. Luego tengo funciones que parecen un setter. Y solo por diversión, los llamé establecer artículos en esta sintaxis en mayúsculas. Y luego exporto por defecto el estado, que es de solo lectura, mis getters y mis setters. Así que esto debería sentirse más como la forma de hacer las cosas de Vue x-ray, la forma de la tienda. Y si reviso mis componentes, puedo ir a Hola Mundo donde en realidad no tengo ningún conocimiento de la tienda en absoluto. Pero registro el hijo uno y en el hijo uno, importo e inyecto de Vue. Desplázate hacia abajo aquí y yo inyecto la tienda y puedo usar la tienda en este componente hijo utilizando el patrón de proporcionar e inyectar y eliminar mis datos y mis artículos aquí porque finalmente los compré. Y esto también es una gestión del estado global. Así que si inspeccionara la tienda en algún otro componente, todavía funcionaría. Así que eso es todo sobre la gestión del estado en Vue 3 usando composables. Muchas gracias. Nos vemos luego.

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

Everything Beyond State Management in Stores with Pinia
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.
Using useEffect Effectively
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.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
React Query: It’s Time to Break up with your "Global State”!
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.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Jotai Atoms Are Just Functions
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

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
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.
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
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.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.