Gestión moderna del estado con Vue 3

Rate this content
Bookmark

La Reactividad y la API de Composición de Vue 3 ofrecen a los desarrolladores técnicas flexibles para trabajar con datos reactivos. Permiten un enfoque nuevo y moderno para manejar la gestión del estado. Ahora los desarrolladores pueden implementar fácilmente almacenes locales y globales. Vuex ha sido uno de los complementos de primera parte más utilizados para Vue 2. Veamos las ventajas y desventajas de usar Composables en lugar de Vuex.

22 min
21 Oct, 2021

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 la agrupación de unidades lógicas utilizando la API de Composición. La API de Composición se utiliza para la gestión del estado y la refactorización de componentes. El orador comparte su experiencia inicial con la gestión del estado usando Vuex. Se exploran los Composables como una alternativa para la gestión del estado en Vue 3.

Available in English

1. Introducción a Vue Free y la API de Composición

Short description:

En esta parte, Vanessa presenta Vue Free, una solución poderosa de gestión de estado para aplicaciones Vue. Comparte su experiencia de usar Vue Free sin la API de opciones y Vuex, aprovechando en su lugar la API de Composición. Vanessa explica los beneficios de la API de Composición y cómo se puede utilizar en aplicaciones pequeñas. También discute las tres API en Vue: API de opciones, API de reactividad y API de Composición, resaltando las ventajas de la API de Composición. Por último, proporciona un resumen de cómo escribir un componente en Vue 2 o Vue 3 utilizando la API de opciones.

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 en el front-end y Working Draft, un podcast alemán sobre desarrollo web. Y hace aproximadamente un año, en septiembre de 2020, recuerdo que estaba sentada allí viendo Avenu en la conferencia de Vue JS, diciendo finalmente, hey, Vue Free está disponible, y ahora quiero que me acompañes en el viaje, cómo instalé Vue Free y utilicé conceptos alternativos para usar Vue Free completamente sin la API de opciones y también sin Vuex. No sugiero que uses Vue Free sin la API de opciones o reemplaces Vuex. Quiero decirte que la API de Composición es tan poderosa que en realidad podemos usar Vue sin ninguna de esas herramientas, y tuvo 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 código que mostraré en los próximos minutos, utilizaré la función de configuración y prefiero usar ref en lugar de reactive. Pero todo lo que mostraré ahora, por supuesto, se puede utilizar la sintaxis de configuración de script en su lugar y puedes elegir usar reactive en lugar de ref si lo prefieres.

A medida que los componentes de mi pequeña aplicación Vue Free aproximadamente hace un año comenzaron a crecer porque tenía algunos problemas más complejos que necesitaban soluciones más complejas, yo y, por lo tanto, también esta charla, nos inspiramos principalmente en estos tres artículos. Group, extract share pattern, gestión de estado con API de Composición, y deberías usar la API de composición como reemplazo de Vuex.

Enfoquémonos en tres de las API de Vue por ahora, la API de opciones, la API de reactividad y la API de Composición. La API de opciones, podemos pensar en esta estructura de objeto que conocemos de tus aplicaciones de un solo archivo de Vue, componentes de archivo único, donde tenemos nuestros datos, computados, métodos, watch, montado y muchos más. Y la API de reactividad no es tan diferente de eso. Tenemos refReactive para datos reactivos, computados, watch, watch effect, desmontado y muchos más. Pero la clave es que ahora puedo importar esas funciones directamente desde Vue. No tengo que usar un componente de archivo único de Vue o un Mixin para usar esas herramientas. Puedo importarlas en cualquier archivo de JavaScript o TypeScript. Y luego la API de Composición nos proporciona una función de configuración donde puedo reunir toda la magia y usar todas esas poderosas herramientas de la API de Reactividad en mi componente Vue.

Así que hagamos un resumen de cómo escribir un componente en Vue 2 o en Vue 3 utilizando la API de opciones. Aquí tengo una plantilla con un párrafo de saludo y nombre completo. Si me desplazo hacia abajo a mi bloque de script, puedo ver aquí que tengo una función de datos, que devuelve un objeto con saludo y hola. Tengo propiedades para el nombre y apellido. Y tengo una propiedad computada para el nombre completo, que me devuelve un nombre con un espacio y el apellido. Entonces este es un componente con un solo propósito, que hace su trabajo bastante bien. Una especie de nota divertida es que inicialicé este saludo aquí como un atributo de datos reactivo, aunque en realidad nunca lo cambio y no necesitaré observadores en él de todos modos. Pero nunca estuve seguro de dónde poner estas constantes usando la API de opciones. El problema en el que quiero enfocarme ahora es que las unidades lógicas, si el componente está creciendo y creciendo, se distribuyen por todo el bloque de script. ¿Entonces, qué quiero decir con esto? He preparado este código sandbox 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 ocurren las cosas en el bloque de script. Explica cómo la API de Composición permite a los desarrolladores agrupar unidades lógicas juntas 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. Proporciona un ejemplo de una reimplementación del saludo utilizando la API de Composición, resaltando la simplicidad y el poder de usar JavaScript directamente.

Pero luego también mostramos los elementos del usuario donde iteramos y también proporcionamos una función de eliminar elemento para eliminar algo. Si me desplazo hacia abajo al bloque de script, ahora quiero que te enfoques en el orden en que ocurren las cosas. Tengo la función data que ejecuta un objeto con el saludo y los elementos. Las propiedades tienen cosas del saludo. Una propiedad computada con el nombre completo del saludo. Luego, un método con la función eliminar elemento de los elementos. Las categorías se vinculan a la forma en que se estructura la vista del esqueleto, el objeto de vista aquí.

Todo en data está en data. Cada propiedad computada está en la propiedad computada. Cada función está en el bloque de métodos. Ahora tenemos un punto en el que tenemos saludo elementos, saludo, saludo elementos. Están dispersos por todo el archivo. Esto es algo así, crece y crece y crece, luciendo así. Por supuesto, puede ser una solución dividir el componente, pero centrémonos en que no funciona más, no podemos dividir más y aún tenemos estas líneas de código que no están realmente vinculadas juntas y lo que la API de Composición nos proporciona es la posibilidad de agrupar unidades lógicas juntas nuevamente, para que todo esté relacionado con el saludo, podemos imaginar que está en este cuadro azul claro en la parte superior y todo lo relacionado con los elementos podemos imaginar que está vinculado en este cuadro azul oscuro, casi negro aquí. Entonces, la API de Composición permite a los desarrolladores encapsular unidades lógicas en un solo archivo o compartirlo con otros.

Lo que quiero decir con eso es que cuando aprendí sobre la API de Composición hace un año, siempre se me presentó como la opción preferida en lugar de mezclar. Usa la API de Composición para compartir funcionalidad. Es realmente poderoso. Pero luego empecé con U3, pensé, pero ¿realmente necesitamos compartir lógica para usar la API de Composición? Porque realmente me gusta cómo funciona la API de Composición, 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 playground de componentes de archivo único de vista. Y el primero es una reimplementación de solo la parte del saludo que vimos anteriormente en la API de Composición U3. Entonces aquí tenemos una plantilla con el saludo y el nombre completo. E importamos computed de view. Si me desplazo hacia abajo a las propiedades, veo el primer nombre y el apellido. Y aquí abajo tengo la función de configuración, que me da una constante saludo con Hola, y un nombre completo como propiedad computada, y luego devuelvo todo para pasarlo a mi plantilla. Lo que es genial es que es solo JavaScript, ¿verdad? Se siente bien para mí. En realidad, se sintió un poco emocionante como la primera vez que lo vi, la primera vez que lo vi. Entonces aquí tenemos la constante saludo. Es solo una constante pura sin envolverla en un objeto data, sin usar un ciclo de vida creado vinculado a constantes inicializadas.

3. API de Composición y Gestión de 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 destructuració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 de composables preescritos. Luego pasa a discutir la gestión de estado, destacando las desventajas de la propagació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 computada. Pero por supuesto, también aquí la funcionalidad puede crecer un poco. Cambiemos a nuestro componente Hola Mundo 2, donde también tengo mis elementos, que también puedo eliminar. Los recorro en la plantilla y tengo mi método para eliminarlos. Ahora importo computed y ref de you, y si ahora me desplazo hacia abajo al 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 U3, todo el tiempo mi memoria muscular era como, oh sí, tengo que poner todo lo relacionado con los datos al principio, y luego en todas las propiedades computadas y luego en todos los métodos y luego en todos los hooks del ciclo de vida hasta que recordé, no, no, no tengo que usar esto más. Ahora puedo vincular las unidades lógicas. Puedo simplemente ponerlas juntas. Pero luego, por supuesto, mi componente estaba creciendo un poco y pensé, sí, ¿cómo digo en realidad que estas cosas pertenecen juntas? ¿Tenemos un comentario como bloque de inicio de elementos y bloque de elementos? ¿Cómo logro esto? Así que comencé a refactorizar un poco este componente, la misma plantilla que vimos antes, pero ahora en la parte superior tenemos dos funciones diferentes, useGreeting y useItems, que encapsulan toda la funcionalidad en esas funciones donde tengo todo lo relacionado aquí y devuelvo las propiedades necesarias al exterior. Y si me desplazo hacia abajo al bloque de configuración, ahora puedo ver que se está volviendo un poco más limpio si se estaba volviendo un poco desagradable y puedo externalizar toda esta lógica en otro lugar. Y aquí puedo ver claramente el saludo y los elementos del nombre completo y eliminar elementos que provienen de esos dos composables.

Pero ahora el siguiente paso es, hey, sería increíble si también puedo usar los elementos de uso en otro lugar, porque realmente necesito esta funcionalidad también en otro componente, lo que nos lleva a Hola Mundo 4, que también se está refactorizando un poco más. Solo importo computed de you nuevamente y no ref, pero ahora también importo useItems de useItems. Cambiando a este archivo, puedo ver que importo ref de you en la parte superior en un archivo JavaScript plano y la misma función con los elementos de uso que están justo antes ahora es una función exportada, brindándonos toda la funcionalidad como un composable en nuestro componente de archivo único de vista. Si me desplazo hacia abajo al bloque de configuración, aquí puedo ver nuevamente que tengo mi saludo de uso y el uso de elementos. Quiero darte una pequeña pista de lo que estoy haciendo aquí. Lo que puedes ver aquí es que al principio pensé que era súper genial usar la destructuración de ECMAScript para obtener todo lo relacionado con los elementos de uso directamente en la plantilla. Una línea de código, esto se ve súper genial, pero luego un problema que se me presentó es que no tengo ningún soporte de IDE aquí en este playground y si intento buscar el elemento de eliminación, estoy perdido. No sé de dónde viene y por lo tanto, tiendo a seguir el camino explícito de no usar la magia proporcionada por un lenguaje por mí, sino decir explícitamente, vale, importo esas cosas de allí y ahora puedo ver, vale, el elemento de eliminación proviene de los elementos de uso y los elementos de uso provienen de este archivo. Ya hemos escrito nuestros primeros composables. Si buscas un poco más de inspiración, echa un vistazo a este repositorio Vue Use Git donde puedes encontrar muchos composables preescritos en TypeScript que puedes usar, funciones Axios, etc. Creo que también es tiempo de Hektoberfest, así que si también quieres participar en el código abierto, este podría ser un punto de partida para ti. Pero ahora centrémonos en la gestión de estado. ¿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 propagación de props. Así que usé props emit event handling para obtener algo del componente raíz, es realmente como alquilar alquilar alquilar alquilar alquilar alquilar a los hijos solo para emitir, emitir, emitir, emitir todo de nuevo. Esto no era realmente mantenible. Luego pensé que era inteligente y usé el objeto raíz global, el dollar root, para adjuntar variables a esta cosa 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 de Estado y Vuex

Short description:

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

Tampoco se discutió realmente. Simplemente estaba realmente oculto en la documentación de la API que hay algo como una raíz global. Y luego me senté y pensé, vale, la gestión de estado suena importante, suena difícil. Store suena difícil, observables, Vuex, no estoy seguro, pero ahora instalaré Vuex. Y realmente me sorprendió lo simple que esto hizo para mí crear la gestión de estado solo creando este archivo index.js. Y ya tenía algo de estado. Fue una herramienta realmente poderosa porque era tan simple de usar para luego centrarme en las partes complejas de escribir código o encontrar soluciones para problemas más grandes.

5. Usando Composables para la Gestión de Estado

Short description:

Cuando comencé con Vue 3, me di cuenta de que podía lograr la gestión de estado con composables. Quería explorar más las posibilidades. En un ejemplo de código sandbox, me enfoqué en los elementos del carrito con un estado de carga y utilicé el gancho unmounted para obtener datos. La función de configuración contenía el estado, la función de carga de elementos y los métodos para eliminar elementos. Luego cambié a una alternativa diferente de la aplicación, importando el composable use items en la alternativa de elementos del carrito. Este enfoque proporcionó una gestión de estado local.

Pero cuando estaba comenzando con Vue 3, pensé, espera un segundo. Creo que puedo lograr la gestión de estado en realidad con composables. No fue porque Vue no estuviera listo para Vue 3 todavía. Fueron bastante rápidos y había una guía de migración. Pero estaba interesado en todo lo que realmente puedo lograr con composables. Quiero dar un paso más aquí. Y aquí tengo otro código sandbox, que probablemente se cargará pronto. Pero creo que también lo tengo precargado aquí. Sí, lo tengo.

Entonces aquí quiero enfocarme primero en los elementos del carrito, que vemos aquí. Y ahora tengo un ejemplo un poco más realista. Entonces, si recargo esto, puedes ver que habrá como tres segundos de tiempo de carga porque generalmente obtengo los elementos de un servidor. Así que tengo tres segundos de carga y luego veo los elementos. Y aquí tengo un primer elemento. Entonces lo que tengo que comprar a continuación son los huevos y luego tengo mi lista de elementos y aquí realmente uso ahora un estado con un flotante donde puedo establecer un estado de carga si todavía se está cargando. Y en la parte del script, ahora también uso el gancho unmounted donde puedo obtener los datos. Entonces, yendo a la función de configuración, ahora podemos ver el estado con los elementos y la carga. Y luego tengo la función importante aquí, que es la función de carga de elementos donde establezco isLoading en verdadero. Como en realidad no tengo un punto final real con el que pueda comunicarme, uso una función useSleep durante tres segundos. Y luego establezco algunos elementos ficticios, mis huevos y mi leche. Y si todo funciona bien, puedo volver a establecer isLoading en falso. También tengo mi método para eliminar el elemento y tengo una propiedad computada para el primer elemento y uso el gancho de ciclo de vida unmounted para cargar los elementos tan pronto como se haya montado mi componente.

Ok, hasta ahora todo bien, tenemos algo que se parece a un estado pero no se siente realmente como una gestión de estado de inmediato. 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 elementos. Entonces, si guardo esto y recargo, mientras tanto iré a la alternativa de elementos del carrito que se ve bastante similar a los favoritos. Así que ambos solo muestran nuestros elementos. Entonces, en la alternativa de elementos del carrito, me desplazo hacia abajo y en lugar de toda la lógica que vimos anteriormente, ahora puedo ver que importo el composable use items y obtengo todos los datos necesarios del estado, carga de elementos, primer elemento, eliminar elemento y unmounted, llamo a la función de carga de elementos. Ahora puedo ver aquí mi carga de tres segundos y puedo ver dos veces mi lista de elementos. Y aquí quiero que te enfoques en la gestión de estado local, si abro el archivo, que pensé que ya 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 de 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 similar a la de una tienda. El estado se puede colocar dentro de la función exportada, lo que permite la gestión de estado local. Sin embargo, si se desea una gestión de estado global, el estado se puede mover encima 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, se puede eliminar la X dos veces, demostrando tanto la carga como la gestión de estado global.

Y el resto de la implementación es la misma que antes. Simplemente se copia con una diferencia importante. Aquí importo adicionalmente la palabra clave de solo lectura de Vue para tener esta sensación de tienda, para tener una única fuente de verdad como esperamos que se comporte nuestra tienda. Ahora quiero colocar el estado dentro de esta función exportada. Y si hago 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 de estado local, ya que tanto la alternativa de elementos del carrito como los favoritos están utilizando este use items, que tiene el estado inicializado dentro de esta función. Pero si piensas, hey, esto es un poco extraño. Esto no es lo que espero de la gestión de estado. Espero que sea global. Esto se logra simplemente moviendo el estado encima de la exportación. Volveré a cargar esto de nuevo. Y luego puedes ver que, por lo tanto, acabo de crear el estado ahora una vez. No es global. No cambia. No lo inicializamos varias veces. Simplemente exportamos esta función varias veces. Después de instalar todas esas dependencias, verás que ahora puedo eliminar la X y se eliminarán dos veces. Así que tenemos carga y gestión de estado global. El siguiente punto, si piensas, hey, esto no se parece a lo que esperaría que se pareciera una tienda, también puedes usar una alternativa a esta alternativa. Puedes usar el patrón provide e inject, que ya se nos dio en Vue 2. Este es el código sandbox donde comienzo con el componente raíz app.view. Y puedes ver aquí que importo una tienda y un hello world y registro el componente hello world. Y proporciono la tienda. ¿Qué es la tienda? Echemos un vistazo a la tienda en el archivo index.js aquí. Y aquí tengo computed, ref y readonly donde tengo mi estado, un primer elemento, una propiedad computada que se parece a un getter. Luego tengo funciones que se parecen a un setter. Y solo por diversión, las llamé set items en esta sintaxis en mayúsculas. Y luego exporto por defecto el estado, que es de solo lectura, mis getters y mis setters. Esto debería parecerse más a la forma de hacer las cosas en VueX, la forma de la tienda. Y si reviso mis componentes, puedo ir a Hello World 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 la tienda de Vue. Desplázate hacia abajo aquí e inyecto la tienda y puedo usar la tienda en este componente hijo utilizando el patrón provide e inject y eliminar mis datos y mis elementos aquí porque finalmente los compré. Y esto también es una gestión de estado global. Así que si inspeccionara la tienda en algún otro componente, seguiría funcionando. Eso es todo sobre la gestión de estado en Vue 3 utilizando composables. Muchas gracias. Nos vemos más tarde.

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

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.
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.
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 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.
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

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
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
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
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.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
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.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
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.
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
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.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
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.