6 Niveles de Reutilización

Rate this content
Bookmark

Domina el arte de hacer tus componentes altamente reutilizables. Los 6 Niveles de Reutilización nos muestran cómo podemos hacer progresivamente nuestros componentes cada vez más reutilizables, según sea necesario, e incluir patrones y herramientas poderosas para ayudarnos a reutilizar nuestro código más fácilmente.

Michael Thiessen
Michael Thiessen
23 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy explora el concepto de componentes reutilizables, centrándose en niveles de reutilización como inversión, extensión y anidamiento. Se discuten las props como un medio para lograr flexibilidad y configuración en los componentes. Se introducen la inversión de control y los slots con ámbito para dar adaptabilidad a los componentes. Los puntos de extensión proporcionan la capacidad de anular partes específicas de una aplicación dentro de un solo componente. La charla también cubre el uso de slots y anidamiento para la flexibilidad y reutilización de componentes.

Available in English

1. Introducción a los Componentes Reutilizables

Short description:

Hoy hablaremos de los componentes reutilizables y cómo nos ayudan a escribir menos código siendo más efectivos y eficientes. La diferencia entre componentes reutilizables y limpios radica en la mantenibilidad versus la reusabilidad. He desarrollado un marco de trabajo para determinar el nivel apropiado de reusabilidad para nuestros componentes. Nos enfocaremos en los últimos tres niveles de reusabilidad: inversión, extensión y anidamiento. El nivel uno es la plantilla, donde reutilizamos diferentes partes de nuestra plantilla. El siguiente nivel es la configuración, donde creamos diferentes variaciones de un solo componente.

Hola, mi nombre es Michael Thiessen y hoy les hablaré sobre los componentes reutilizables. Si no saben quién soy, les daré un poco de información sobre mí antes de adentrarnos en esto. Soy un educador a tiempo completo de Vue, lo que significa que paso todo mi tiempo escribiendo artículos, enviando mi boletín semanal, creando cursos y, por supuesto, dando charlas como esta.

Hoy hablaremos sobre los componentes reutilizables. Y la razón principal por la que queremos hacer esto es para poder escribir menos código pero lograr más. Queremos que nuestro código sea más efectivo. Queremos utilizar nuestro tiempo de manera más eficiente. No queremos pasar todo este tiempo reescribiendo funciones una y otra vez. Por lo tanto, esta charla se enfoca más en ese aspecto. La reusabilidad de nuestro código.

A menudo, algunas personas me preguntan sobre la diferencia entre componentes reutilizables y componentes limpios porque tengo otro curso llamado Clean Components Toolkit. Y a menudo preguntan cuál es la diferencia entre estas dos cosas. Y la diferencia radica realmente en la mantenibilidad versus la reusabilidad. Los componentes limpios se centran más en la mantenibilidad a largo plazo, mientras que los componentes reutilizables se centran más en ser más efectivos, ser más eficientes con nuestro tiempo, escribir menos código y lograr más. En los últimos años, he desarrollado este framework para pensar en la reusabilidad de manera que podamos determinar mejor la cantidad de reusabilidad que debemos agregar a nuestros componentes. Porque no queremos agregar toneladas y toneladas de reusabilidad a componentes muy simples. Y también queremos asegurarnos de agregar el nivel apropiado de reusabilidad a aquellos componentes que sabemos que vamos a utilizar una y otra vez.

El primer nivel es la plantilla. Aquí queremos reutilizar las diferentes partes de nuestra plantilla. Esto es exactamente lo que están acostumbrados a hacer al construir componentes y encapsular diferentes partes de UI y marcas y lógica dentro de sus componentes para poder colocarlos en diferentes lugares de nuestra aplicación y reutilizarlos. Esto es bastante sencillo y no hay mucho más que decir sobre esto. Aunque, por supuesto, hay muchos matices en cómo dividimos estos diferentes componentes ¿Dónde ponemos los límites? ¿Deberíamos crear un nuevo componente o no? Y no tenemos tiempo para profundizar en esos matices en esta charla, pero están ahí. El siguiente nivel es la configuración. Y en este nivel vamos a crear diferentes variaciones de un solo componente, diferentes variaciones en el comportamiento de ese componente.

2. Props: Configuración y Datos

Short description:

Utilizaremos props para lograr reutilización y flexibilidad. Las props de configuración nos permiten alternar comportamientos y configurar componentes. Pueden ser de tipo booleano o enumerado con múltiples valores aceptables. Las props de datos o estado implican pasar datos de la aplicación, que pueden variar entre usuarios y ejecuciones de la aplicación.

Lo haremos utilizando props. Y con esto hay una distinción entre los tres tipos diferentes de props que tenemos. Así que tenemos props de configuración, tenemos props de datos o estado, también tenemos props de plantilla. Las props de configuración son las protagonistas aquí, como probablemente puedas adivinar por el nombre. Estas props de configuración son las que impulsan este nivel de reutilización. Son las que nos permiten alternar entre diferentes tipos de comportamiento y obtener mucha más reutilización y flexibilidad de cada componente.

Por lo general, son de tipo booleano, donde estamos alternando algo activado o desactivado. Buenos ejemplos de esto podrían ser un is primary en un botón. Así que puedes tener un botón primario, puedes tener un botón secundario. Además de cosas que van a cambiar, como la interfaz de usuario de un componente. Así que es posible que desees tener una vista más compacta. Tal vez tengas un reproductor de video y quieras mostrar u ocultar los controles del reproductor. Diferentes cosas como esas. Estas son props de configuración, porque nos permiten configurar y cambiar ese comportamiento. El otro tipo de prop de configuración son los tipos enumerados o tipos de enumeración. Estos son aquellos en los que tienes una lista de valores aceptables. No es solo una alternancia de verdadero o falso, sino que tenemos cualquier número de valores que podemos pasar a esto. Un ejemplo es el software que estoy usando para presentar esta presentación de diapositivas es Slidev. Y viene con un componente incorporado para mostrar una tabla de contenido. Y eso tiene una prop llamada modo, que tiene tres valores diferentes que puedes pasarle. No se admiten otros valores. Así que solo puede ser todo, solo el árbol actual o solo los hermanos. Ese es un buen ejemplo de una prop de configuración.

A continuación están las props de datos o estado. Y esto es probablemente exactamente lo que piensas que es. Así que estamos tomando los datos de nuestra aplicación. Por lo general, los estamos obteniendo de algún otro lugar, tal vez una API, tal vez tu propia API. Tal vez sea ingresado por el usuario. Y estamos pasando esos datos. Estos datos suelen ser diferentes cuando diferentes usuarios acceden a esta aplicación o en diferentes ejecuciones de la aplicación.

3. Props: Estado y Plantilla

Short description:

Tu feed de noticias de Twitter puede variar cada vez que lo veas, utilizando las mismas props de configuración. Las props de estado incluyen datos de usuario, tweets, publicaciones y películas obtenidas de una base de datos. Las props de plantilla hacen que los componentes sean más flexibles mediante el uso de slots. Ahora los componentes de botón pueden aceptar iconos y texto, lo que los hace adaptables sin necesidad de editar el componente.

Entonces, tu feed de noticias de Twitter será diferente cada vez que lo veas, aunque las props de configuración utilizadas en esos componentes serán las mismas. Una pregunta útil para evaluar si esto es una prop de estado o no es si se podría almacenar en una database, porque típicamente los datos de la aplicación como este pueden almacenarse en una database. Aquí tengo algunos ejemplos más.

Tenemos datos de usuario, tweets o publicaciones, dependiendo de cómo lo llames, y películas. Entonces, si tienes una aplicación que muestra una lista de películas, todas las películas se obtienen de tu database. Eso cambia con el tiempo. Y esos son datos que pasarías como props.

El tercer y último tipo de prop es la prop de plantilla. Pero para eso, primero necesitamos cubrir y entrar en el nivel tres, que es la adaptabilidad. Así que solo para recapitular rápidamente dónde estamos ahora, tenemos estos seis niveles de reutilización. Hemos pasado por el nivel uno, que es la plantilla, y el nivel dos, que es la configuración. Y ahora estamos en el nivel tres, que es la adaptabilidad. El objetivo principal de este nivel es usar slots para hacer que nuestros componentes sean más flexibles. Los haremos más flexibles y adaptables a casos de uso futuros. Y esto nos permite no estar tan limitados por las props, que son muy limitadas en lo que permiten, sino expandir lo que se puede hacer en un componente mediante la inclusión de un slot.

Permíteme darte un ejemplo aquí. Aquí tenemos un botón, y este es un ejemplo de una prop de plantilla, porque prometí que lo cubriríamos, y lo haremos. Este ejemplo de prop de plantilla muestra un botón, y tenemos esta prop de texto. Ahora, esta es una prop de plantilla, y la razón por la que es una prop de plantilla es que solo se utiliza en nuestra plantilla. No la pasamos a ningún componente como prop. No la usamos en una referencia computada o en un observador ni en ninguna lógica similar. Simplemente la incluimos en esa plantilla, y eso la convierte en una prop de plantilla.

Lo interesante de una prop de plantilla es que podemos convertirla directamente en un slot uno a uno. Y esto nos permite hacer algo más que solo pasar texto, una cadena, ahora podemos pasar un icono y un poco de texto a este componente de botón. Podemos pasar lo que queramos. Esto hace que nuestro componente de botón sea mucho más flexible porque ahora tratamos a HTML, y a los componentes como un tipo de data de primera clase, mientras que antes no podíamos hacer eso solo con props. Estábamos limitados con las props, y los slots nos permiten abrir eso. Y lo más importante aquí, por qué lo llamo adaptabilidad, es que cuando creas un componente como este, es posible que no esperes agregar iconos a tus botones. Pero ahora, debido a que tenemos este slot, no tenemos que volver atrás y editar nuestro componente. Simplemente podemos agregar un icono a ese slot, y listo.

4. Inversion of Control and Scoped Slots

Short description:

El componente es adaptable a casos de uso futuros. Las props de plantilla pueden usar la prop original como valor de respaldo predeterminado para los slots. La inversión de control se introduce en el nivel cuatro, donde la aplicación cede el control a otro código. Los componentes utilizan slots con ámbito para lograr la inversión de control.

El componente es adaptable a casos de uso futuros que ni siquiera has pensado. Un buen truco que puedes hacer con estas props de plantilla es usar la prop original como valor de respaldo predeterminado para este slot. Y esto nos permite agregar este slot sin romper la funcionalidad existente, y también nos permite hacer una transición ordenada y agradable a este uso de slot. Pero veremos más sobre esto un poco más adelante en esta charla.

Entonces, nivel cuatro. Nivel cuatro es donde las cosas comienzan a ponerse realmente interesantes con la inversión. Aquí vamos a invertir el control de nuestra aplicación. ¿Y qué significa esto realmente? En el desarrollo de software, tenemos este concepto llamado inversión de control, y puedes buscar en Wikipedia o en cualquier número de libros de ingeniería de software, seguramente tienen esto descrito. Y es esta idea donde en lugar de controlar el flujo de nuestro code y seguir línea por línea, en realidad cedemos el control de la aplicación a otro code. Permíteme mostrarte lo que quiero decir. Aquí en esta línea, estamos llamando al método read sync para leer este archivo. Aquí estamos en control.

5. Extension Points and Component Flexibility

Short description:

Renunciamos al control del framework y utilizamos slots con ámbito en los componentes. Los componentes de lista proporcionan flexibilidad al manejar la clasificación, filtrado y otras operaciones internamente. Los puntos de extensión nos permiten anular partes específicas de nuestra aplicación dentro de un solo componente.

Estamos utilizando este método y le estamos diciendo exactamente qué hacer, cuándo hacerlo, cómo hacerlo y lo estamos leyendo. Tenemos el control de este programa. Este programa de una sola línea. Pero si usamos un watch desde la vista, ya no tenemos el control de lo que sucede aquí. No decidimos cuándo se llama este console.log. Estamos cediendo eso a la vista. La vista determina cuándo se llama y en qué circunstancias.

Entonces, en este primer caso, tenemos un control regular, pero con este watcher, hemos invertido el control. Hemos renunciado al control del framework, a la vista. Ahora hacemos esto en los componentes utilizando slots con ámbito. Aquí tienes un ejemplo de un componente de lista. Vamos a pasarle una matriz que contiene todos los data de nuestra lista. En realidad, esto es una prop de estado, una prop de data. Luego vamos a tomar ese elemento del slot con ámbito y lo renderizamos aquí dentro. Lo interesante de esto es que no sabemos qué está haciendo este componente de lista con nuestra lista de elementos aquí. Podría estar ordenándolos, podría estar filtrándolos. Podría estar haciendo cualquier cantidad de cosas. No tenemos conocimiento del orden en el que vamos a recibir estos elementos. Y ahí radica la belleza de esto. Estamos dando control a este componente de lista en lugar de dictar completamente todas las diferentes cosas que este componente debería hacer y cómo funcionará este slot. Renunciamos a todo ese control y solo retenemos este pequeño control. Pero ahí es exactamente donde entra toda esa flexibilidad. Porque luego podemos crear fácilmente variaciones en esto simplemente cambiando algunas cosas pequeñas. No tenemos que conocer todo lo demás que está sucediendo dentro de este componente.

Entonces, el nivel cinco es la extensión. Y aquí vamos a tomar todo lo que hemos aprendido y lo vamos a hacer tanto como sea posible dentro de un solo componente. Y la forma en que lo hacemos es a través del uso de puntos de extensión. Y estos nos permiten anular partes específicas de nuestra aplicación de la manera que consideremos adecuada. Aquí tengo un ejemplo de un componente de diseño muy básico. Y renderiza esta página realmente, realmente simple.

6. Slots and Nesting

Short description:

Podemos envolver contenido en slots, lo que hace que el componente de diseño sea más flexible. La anidación de slots con ámbito y slots regulares maximiza la funcionalidad del árbol de componentes.

Podemos envolver esta primera sección aquí en un slot con nombre y establecer el contenido predeterminado como lo que era antes. Luego también vamos a envolver esta parte del medio en un slot, pero lo mantendremos como el slot predeterminado. Y de manera similar, vamos a tomar esta parte del pie aquí y convertirla en un slot de pie.

Entonces, ahora nuestro componente de diseño hace exactamente lo que hacía antes porque no hemos establecido ningún contenido de slot. Por lo tanto, utilizará ese contenido de respaldo. Por lo tanto, el componente hace lo que hacía antes. Sin embargo, ahora es mucho más flexible y reutilizable porque podemos anular selectivamente diferentes aspectos de este componente. Te mostraré a qué me refiero. Podemos cambiar el encabezado si queremos, simplemente agregando este slot con nombre aquí. Y, por supuesto, podemos poner este pie si no nos gusta.

7. Nested Slots and Component Reusability

Short description:

Podemos personalizar el componente de diseño utilizando el slot predeterminado. Navegar a través de slots anidados permite una mayor reutilización de componentes. Los seis niveles de reutilización se explican en el curso actualizado de Componentes Reutilizables.

Y también el slot predeterminado, podemos agregar contenido allí. Lo interesante de esto es que no tenemos que establecer todo o ninguno de estos. Podemos establecer las diferentes piezas que queramos. Depende completamente de nosotros cómo queremos personalizar cómo funciona este componente de diseño.

El último y nivel final es la anidación. Entonces, aquí estamos tomando todo lo que hemos aprendido y maximizándolo, no dentro de un solo componente, sino en todo nuestro árbol de componentes. Y para hacer eso, vamos a anidar nuestros slots con ámbito y slots regulares también.

Entonces, si tenemos esta estructura, tenemos un abuelo, tenemos un padre y un componente hijo. Queremos pasar un slot desde el abuelo hasta el hijo. Así que primero echemos un vistazo a este componente hijo. Vamos a hacerlo muy simple, vamos a tener un div y vamos a tener un slot. Eso es todo. Y sabemos que nuestro abuelo, queremos que renderice el componente padre y queremos poner algún contenido en ese slot predeterminado. Pero, ¿qué hacemos exactamente para obtener este contenido en ese slot inferior? ¿Cómo pasamos desde ese componente abuelo hasta ese componente hijo?

Bueno, sabemos que este componente padre vamos a necesitar renderizar este componente hijo de alguna manera. Y también sabemos que queremos poner algún contenido en ese slot predeterminado, pero, ¿qué exactamente ponemos allí? Bueno, resulta que podemos tomar ese punto de salida del slot para el componente padre y simplemente ponerlo en ese slot. Y esto es similar a un bloque try-catch donde capturas el error, haces algo con él y luego puedes volver a lanzar ese error. Así que es algo muy similar. Capturamos el slot de alguna manera y luego lo renderizamos nuevamente y lo pasamos hacia abajo en la cadena.

Y también podemos simplificar esta sintaxis si lo hacemos de esta manera. Entonces, ¿por qué querríamos hacer esto? ¿Por qué querríamos tener que anidar estos slots y complicar la estructura de nuestros componentes? Y la razón es la misma por la que querríamos tomar nuestras funciones y dividirlas en funciones más pequeñas y es que podemos reutilizar estos componentes intermedios. Entonces, tenemos componentes abuelo, padre, hijo. Si tenemos alguna funcionalidad en el componente padre que queremos reutilizar por sí sola, podemos hacerlo. No tenemos que usar este componente abuelo todo el tiempo. Y esos son los seis niveles de reutilización.

Recientemente actualicé este curso de Componentes Reutilizables, que habla sobre estos seis niveles con mucho, mucho más detalle, mucho más detalle de lo que puedo cubrir en una charla de 20 minutos. Y este curso lo creé originalmente hace cuatro años, pero recientemente hice esta enorme actualización para él. Y voy a tomar un momento para mostrarte cómo se ve esta actualización. Así que tenemos un conjunto completo de ideas y conceptos, algunos de los cuales ya hemos cubierto en esta charla. Y están organizados por el diferente nivel de reutilización. Y cada herramienta diferente que obtienes tiene un video, una explicación de qué es esto, cuál es el patrón de componente base, por ejemplo.

8. Refactoring Example and Other Courses

Short description:

Proporcionamos un ejemplo de refactorización paso a paso, junto con un cuestionario y un video detallado. Componentes Reutilizables es nuestro curso más reciente, pero también tenemos Dominando Nuxt 3, el curso oficial sobre Nuxt.

Pero luego también entramos en un ejemplo de refactorización. Vamos a mostrarte exactamente paso a paso cómo aplicar esto a un ejemplo del mundo real. Lo hacemos a través de esta interfaz de pasos de refactorización aquí, donde puedes ver exactamente con diferencias cómo funciona esto. Así que vamos paso a paso para ver todas las cosas diferentes en esta refactorización.

Y luego hay un cuestionario que puedes usar para evaluar tu comprensión del material. Y por último, terminamos con un video donde profundizo en estos conceptos. Aún más a fondo de lo que hice anteriormente.

Así que ese es el curso de componentes reutilizables. Es el más reciente, pero también tengo Dominando Nuxt 3, que creé en colaboración con Vue School y Nuxt Labs. Así que este es el curso oficial sobre Nuxt, y si quieres aprender Nuxt, es la mejor manera de hacerlo.

Así que gracias a todos por escuchar mi charla. Espero que hayan obtenido mucho valor de ella. Y aquí hay algunos enlaces a diferentes cursos y cosas que tengo, así como algunos enlaces si quieres encontrarme en línea en cualquier otro lugar. Y revisa las diapositivas nuevamente si quieres. Así que gracias, y espero que tengas un buen día.

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.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
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!
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
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.

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
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
React Summit 2023React Summit 2023
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&A
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
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.