API de Composición: una rápida visión general de Vue

Rate this content
Bookmark

La API de Composición es una de las mayores características nuevas en Vue 3. En esta charla, explicaré qué es y cómo utilizar la API de Composición para la abstracción y reutilización de código.

28 min
18 Jun, 2021

Video Summary and Transcription

La charla presenta la API de Composición en Vue 3 como una mejor opción para componer características reutilizables en comparación con mixins y slots de ámbito. Explica cómo abstraer la funcionalidad de búsqueda utilizando la API de Composición y demuestra la creación de los objetos searchQuery y searchResultsQuery. La charla también cubre la ejecución de la búsqueda de razas en el hook mounted, la clasificación de los resultados utilizando propiedades computadas y los beneficios de la API de Composición en términos de organización y reutilización de código. Concluye mencionando el próximo lanzamiento de Vue 3 y las ventajas de la API de Composición.

Available in English

1. Introducción a la API de Composición de Vue 3

Short description:

Hoy vamos a hablar sobre una característica importante de Vue 3, que es la API de composición. La nueva API de composición es puramente aditiva, por lo que no necesitarás reescribir todos tus componentes escritos con la API de opciones.

¡Hola a todos! Hoy vamos a hablar sobre una característica importante que Vue 3 traerá, que es la API de composición. Pero antes de comenzar a hablar sobre ello, quiero darles una advertencia importante. Cuando introdujimos por primera vez esta nueva API, cometimos un gran error. Estábamos hablando de deprecar algunas opciones de la antigua API y la gente lo entendió ligeramente diferente a lo que queríamos. Pueden ver algunas citas de Reddit diciendo cosas como, ¿necesito reescribir todos mis componentes en la nueva sintaxis? Y quiero decirles, no, por favor no hagan eso. La nueva API de composición es puramente aditiva. No necesitarás reescribir todos tus buenos componentes escritos con la API de opciones a esta nueva sintaxis.

2. La necesidad de una nueva API de Vue.js

Short description:

Después de presentarme como Natalia, miembro del equipo central de Vue.js y ingeniera front-end en GitLab, expliqué la necesidad de una nueva API en Vue.js versión 3. Usando el ejemplo de CatSplorer, una aplicación para buscar y ordenar razas de gatos, mostré cómo el código actual está fragmentado y difícil de mantener. Luego presenté los mixins como una forma de componer características reutilizables, pero resalté sus limitaciones en términos de reutilización y personalización.

Y después de esta advertencia, ahora estoy segura y puedo presentarme. Mi nombre es Natalia y soy miembro del equipo central de Vue.js. Me ocupo principalmente de la documentación de Vue. Trabajo como ingeniera front-end en GitLab y también soy una experta en tecnologías web certificada por Google.

Entonces, ¿por qué necesitamos esta nueva API? ¿Hay algo que realmente nos faltaba en la versión 2 de Vue.js? Echemos un vistazo a esta pequeña aplicación. Les presento a CatSplorer, una aplicación para buscar y ordenar razas de gatos. Como pueden ver, aquí tenemos dos características. La primera es la búsqueda. La segunda es la ordenación con diferentes parámetros.

En el código de la aplicación, esto se verá así. Entonces, este código pertenece a la búsqueda. Tenemos una parte del estado reactivo responsable de la búsqueda y tenemos un método para ejecutar esta búsqueda. Y, por supuesto, tenemos algo para la ordenación. Nuevamente, tenemos algunos datos reactivos y tenemos algunas propiedades calculadas para calcular estos resultados ordenados.

Si echamos un vistazo al código del componente, veremos cómo estas dos características están divididas en él. Aquí está el código que pertenece a la búsqueda y aquí está el código para la ordenación. Y como pueden ver, la lógica está bastante fragmentada aquí. Imaginen que soy un desarrollador que necesita arreglar la búsqueda y necesito seguir esta lógica y estaré saltando de los datos al método y viceversa. ¿Entonces tenemos alguna forma de componer estas características reutilizables y abstraerlas de alguna manera?

Entonces, la primera opción en la API actual son los mixins. Un mixin es un objeto que puede contener cualquier conjunto de propiedades del componente como datos, métodos, ganchos de ciclo de vida calculados. Y cuando se incluye el mixin en el componente, estas propiedades se mezclan con las propiedades del componente. A veces, el componente puede anular las propiedades del mixin si hay una colisión de nombres. A veces se fusionan juntas, como en el caso de los ganchos de ciclo de vida. Pero básicamente, necesitas entender que solo hay una mezcla de propiedades del mixin a los componentes. Aquí hay un mixin para la búsqueda y aquí hay un mixin para la ordenación que incluye solo las propiedades que necesitamos para la ordenación. Y si echamos un vistazo a esto, está mucho menos fragmentado, ¿verdad? Y luego simplemente incluimos este mixin como un componente en la parte inferior. Pero hay algunos problemas con los mixins. En primer lugar, no son realmente reutilizables. Si prestaste atención al mixin de búsqueda, viste esta llamada de acceso. Entonces no podemos personalizar nuestra búsqueda.

3. Abstrayendo la Búsqueda a la API de Composición

Short description:

No podemos pasar el endpoint al mixin y reemplazar Axios con llamadas a CraftQL es propenso a conflictos. Las propiedades del mixin pueden ser sobrescritas por las del componente, lo que dificulta rastrear su origen. Otra opción son los scope slots, que permiten a los componentes hijos exponer su ámbito al contenido en el slot. Sin embargo, los datos y métodos expuestos al scope slot solo pueden ser utilizados dentro de él, lo que lo hace menos flexible y eficiente. Vue 3 introduce la API de composición como una mejor opción, y demostraremos cómo abstraer estas características en ella.

Siempre usaremos el mismo endpoint porque esto está definido en el mixin. No podemos pasar ni siquiera el endpoint allí, sin mencionar reemplazar Axios con algún tipo de llamadas a CraftQL. Propenso a conflictos.

Como mencioné, las propiedades del mixin pueden ser sobrescritas por las del componente. En este caso, no podemos estar seguros de que todo lo que expusimos desde el mixin haya llegado de manera segura al componente y su origen es incierto. Si alguna vez has usado mixins, sabes lo difícil que es rastrear qué método proviene de qué mixin, especialmente si tienes múltiples enjambres, múltiples en el componente.

Tenemos otra opción, que son los scope slots. No entraré en detalles profundos, pero básicamente en Vue, un componente puede tener slots, y podemos colocar cualquier cosa en este slot, como texto, HTML, otros componentes, y todo este contenido pertenecerá al ámbito padre. Cuando hablamos de scope slots, nos referimos a que el componente hijo, en este caso, la búsqueda genérica, puede exponer una parte de su ámbito como datos, métodos, lo que queramos, al contenido en el slot. Entonces puedes pensar en un componente con un scope slot como un componente que contiene cierta lógica, no una plantilla en este caso, como un envoltorio que realiza algunas operaciones y expone datos y métodos a su contenido.

Se ve mucho mejor porque, como puedes ver, podemos pasar la búsqueda de razas allí. Entonces no lo estamos configurando como una llamada de acceso estática, pero esto no es flexible. En primer lugar, los datos y métodos expuestos al scope slot solo están expuestos al scope slot. No podemos reutilizar ningún tipo de datos expuestos en otros lugares de la plantilla o en la API de opciones o cualquier otra cosa fuera del slot, y esto es menos eficiente porque en este caso la búsqueda genérica sigue siendo un componente de Vue. Esta es una instancia de Vue y necesitas montar esta instancia de Vue para que funcione. Entonces, ¿tenemos alguna otra opción en Vue 3? Sí. Esta es una nueva API de composición, y quiero mostrarte cómo funciona y cómo podemos abstraer estas dos características en la API de composición. Por eso estamos pasando a la demostración en vivo. Deséame suerte.

Aquí está el código para la búsqueda y ordenación, y comencemos con abstraer la búsqueda en su propio composable. Vamos a la carpeta de composables y creamos un nuevo archivo llamado search.js. Y queremos exportar una función desde aquí. Llamémosla useSearch. Y veamos. ¿Qué tenemos para la búsqueda? En primer lugar, tenemos dos de estas propiedades reactivas, que son query y results. Y queremos abstraerlas completamente de este componente. Así que creemos nuestra primera propiedad reactiva llamada searchQuery. Y esto será una ref de una cadena vacía. La cadena vacía es el valor inicial de esta búsqueda aquí, y lo que hace ref internamente. De hecho, estamos creando una búsqueda que será igual a un objeto con un valor de una cadena vacía.

4. Creando SearchQuery y SearchResultsQuery

Short description:

Esta parte explica cómo se crean los objetos searchQuery y searchResultsQuery utilizando la función ref. Se introduce el método runBreedSearch como una forma de abstraer la lógica de la llamada a la API. Acepta una función como parámetro y la llama con el valor de la consulta. Luego, se utiliza la respuesta para establecer el valor de los resultados de búsqueda.

Y este objeto es reactivo, gracias a ref. Por lo tanto, cualquier cambio en searchQuery.value será reactivo. También necesitamos crear un searchResultsQuery, que es una ref de un array vacío. Y, por supuesto, necesitamos algún método. Llamémoslo runBreedSearch. Y esto, lo siento, mi escritura es realmente mala hoy. Y esto es una función. ¿Y qué queremos hacer aquí? Queremos pasar algo a run porque no queremos hacer esta llamada de acceso estática, queremos abstraer la lógica. Entonces, este código aceptará alguna función, digamos getResults. Y llamará a getResults. Y queremos tener nuestra consulta como parámetro aquí. Pero recuerda, esto es una ref. Entonces, cuando nos referimos a la ref dentro de la función de composición , debemos recordar sobre el valor. Y luego tenemos alguna respuesta y queremos establecer el valor de los resultados de búsqueda en esta respuesta.

5. Ejecutando la búsqueda de razas en el gancho montado

Short description:

Queremos ejecutar la búsqueda de razas en el gancho montado. Devolvemos la consulta de búsqueda, los resultados de búsqueda y ejecutamos la búsqueda de razas desde la función de composición. Se introduce la opción de configuración, que permite acceder a los valores devueltos de la configuración tanto en las plantillas como en la API de opciones. Sin embargo, las propiedades de datos y los cálculos no se pueden referir en la configuración. Se utiliza el método useSearch, pasando un callback y recalculando el punto final en función de la consulta. Por último, se eliminan la búsqueda de razas, el punto final de razas y los métodos y la sección montada.

¿Qué más tenemos para la búsqueda? Abstraímos la búsqueda de razas. Oh, tenemos el montado. Así que queremos ejecutar la búsqueda de razas en el gancho montado. Esto también se puede abstraer aquí. Y queremos ejecutar, ejecutar la búsqueda de razas. Eso es básicamente todo. Eso es básicamente todo.

Ahora necesitamos devolver lo que queremos usar en el componente desde la función de composición. Así que estamos devolviendo la consulta de búsqueda y los resultados de búsqueda en este caso. Y por supuesto, necesitamos devolver la ejecución de la búsqueda de razas. Ahora podemos empezar a usar esto en el componente. Primero, obviamente necesitamos importar nuestro useSearch. De los componibles.

Y ahora estamos introduciendo una nueva opción en el componente que es la configuración. En cuanto a los ganchos del ciclo de vida, la configuración se ejecutará antes del gancho creado. Y podemos acceder a las cosas devueltas desde la configuración tanto en las plantillas como en la API de opciones. Así que aquí, pero no podemos referirnos a las propiedades de data o calcularlo en la configuración porque cuando se ejecuta la configuración, no tenemos data o cálculos. Así que vamos a usar nuestro método useSearch aquí. Quiero tener la consulta de búsqueda, los resultados de búsqueda, y ejecutar la búsqueda de razas aquí. Y necesito pasar un método aquí como un callback. Así que este callback aceptará un parámetro de consulta, lo estamos pasando aquí desde el valor de la consulta de búsqueda. Y necesitamos recalcular el punto final. No podemos referirnos a este cálculo porque la configuración se ejecuta antes de que exista el cálculo. Así que simplemente lo calcularé en función de la consulta. Y luego quiero ejecutar mi llamada de acceso. Aquí simplemente usaré un punto final que acabo de definir. Aquí deberíamos usar nuestra mejor consulta del valor de la consulta de búsqueda. Y en una respuesta solo quiero filtrar data porque la lógica de guardado irá al componible. Ahora puedo deshacerme de la búsqueda de razas, el punto final de razas, y toda la sección de métodos y montada. Y necesito arreglar ligeramente mis plantillas.

6. Trabajando en la clasificación y el índice de opción seleccionada

Short description:

Así que esto debería estar bien. Tenemos nuestros gatos. Probemos la búsqueda. Genial, la búsqueda está abstraída. Ahora, trabajemos en la clasificación. Necesitamos opciones, propiedad activa, resultados, elementos, índice de opción seleccionada y resultados clasificados.

Así que esto debería estar bien. Y también tenemos estos resultados de búsqueda de razas. Esto se reemplazará por los resultados de búsqueda. Momento importante. Puedes ver que no estoy usando el valor de los resultados de búsqueda aquí así como tampoco estoy usando el valor de la consulta de búsqueda aquí porque cuando usas algo devuelto de la configuración en la plantilla o en la API de opciones, la referencia se desempaquetará automáticamente para ti. No necesitas preocuparte por el valor en la plantilla.

Así que echemos un vistazo a nuestra aplicación. Y todo esto sucedió porque simplemente olvidé devolver todo desde la configuración. Y créeme, hago esto cada vez. Y creo que este es uno de los inconvenientes de la nueva API porque necesitas devolver explícitamente todo desde la opción de configuración. Aquí vamos. Y ahora, como puedes ver, tenemos nuestros gatos. Veamos si la búsqueda funciona. Lo hace. No rompimos la clasificación. No, no lo hicimos. Así que genial, la búsqueda está abstraída.

Ahora, intentemos trabajar en la clasificación. Crearé otro archivo. De hecho, puedes almacenar todos tus componibles en un solo archivo, pero solo quiero hacerlo más visible. Y quiero exportar la función, usar clasificación aquí. Entonces, ¿qué necesitamos para la clasificación? Intentemos echar un vistazo. En primer lugar, tenemos opciones, y no quiero codificarlas en la clasificación, solo quiero pasarlas allí. Tenemos nuestra propiedad activa para la opción seleccionada, y tiene sentido abstraer esto porque es una lógica interna de la clasificación. Y tenemos resultados. Obviamente, los resultados también deberían estar en la clasificación. Pero como puedes ver, estamos clasificando algunos elementos, y no quiero que estos elementos estén codificados, nuevamente, solo quiero pasarlos a la clasificación. Entonces queremos tener nuestras opciones y elementos. Y necesitamos crear el índice de opción seleccionada, que es una propiedad reactiva con un valor predeterminado de cero. Y necesitamos nuestros resultados clasificados.

7. Ordenando resultados con Computed

Short description:

Como puedes ver, los resultados ordenados son una propiedad calculada y se recalcularán si cambia su dependencia reactiva. Podemos usar computed en la API de composición importándolos desde la vista. La lógica se copia y se corrige ligeramente. No tenemos clasificación de resultados, solo opciones, seleccionadas y valores de índice de opción seleccionada. Usamos items como un truco pasando una propiedad calculada, y devolvemos el índice de opción seleccionada y los resultados ordenados desde la opción de configuración.

Como puedes ver, los resultados ordenados son una propiedad calculada, lo que significa que se recalcularán si cambia su dependencia reactiva. También podemos usar computed en la API de composición. Solo necesitamos importarlos desde la vista. Y en este caso, computed aceptará un callback. Copiaré y pegaré la lógica desde aquí y la corregiré ligeramente.

No tenemos clasificación de resultados, solo tenemos opciones. Tenemos nuestra opción seleccionada, tenemos nuestro valor de índice de opción seleccionada. No olvides que esto es una ref. Y aquí usaremos nuestros items. Aquí hay un truco. Sé que pasaré una propiedad calculada como items aquí y computed es una ref internamente. Así que aquí necesitaré usar el valor de items. Y necesito devolver todo lo que quiero de la clasificación de datos. Entonces, el índice de opción seleccionada y los resultados ordenados. Oh Dios. Resultados ordenados.

Ahora volvamos y tratemos de cambiar nuestro componente también. En primer lugar, quiero abstraer las opciones en una pequeña constante, llamémosla opciones de clasificación. Y también necesito devolver estas opciones desde la opción de configuración, porque las usaré en la plantilla. Ahora importemos nuestra clasificación utilizada desde nuestros Composables. Y creemos más constantes aquí. Entonces tendremos el índice de opción seleccionada y los resultados ordenados de use search. Y solo moveré una declaración de constante un poco más arriba porque la necesitaré en mi use sorting. Entonces, el primer parámetro es opciones de clasificación. Y el segundo, como ya mencioné, es computed porque necesito rastrear cualquier cambio en mis resultados de búsqueda. Y cuando cambien, quiero recalcular este computed. En este caso, devolveré el valor de los resultados de búsqueda. Recuerda, los resultados de búsqueda son una ref en sí mismos. Y también quiero devolver el índice de opción seleccionada así como los resultados ordenados desde mi opción de configuración. Ahora puedo eliminar data así como computed, y también necesito cambiar mi plantilla.

8. Ordenando y Índice de Opción Seleccionada

Short description:

Aquí tendremos ordenamiento y el índice de opción seleccionada. El ordenamiento y la búsqueda funcionan. La API de composición se puede utilizar de forma independiente o en combinación con la API de opciones. Sigue el enlace o busca en Google la RFC de la API de composición para obtener más información. Echa un vistazo al repositorio con el código inicial y finalizado. Gracias por unirte a nosotros y por los comentarios positivos.

Así que aquí tendremos el ordenamiento, oh dios. Lo siento, soy realmente malo cuando estoy escribiendo algo durante la codificación en vivo. Y aquí tendremos el índice de opción seleccionada.

Echemos un vistazo a la aplicación nuevamente. Oh, por supuesto, order by no está definido porque olvidé mover esta parte de la lógica de la plantilla al componible. Y ahora lo hemos solucionado, el ordenamiento funciona. La búsqueda funciona. Genial, solo unos pocos errores durante la codificación en vivo y aquí estamos.

Básicamente, acabamos de aprender que podemos usar la API de composición de forma independiente. Puedo leer en todo el componente o en combinación con la buena y antigua API de opciones también. Si quieres aprender un poco más sobre la API de composición, sigue este enlace o simplemente busca en Google la RFC de la API de composición. Ahí encontrarás la fuente de información más completa sobre la API de composición hasta ahora. También he creado este pequeño repositorio con el que puedes jugar. Por favor, dirígete a las ramas de la versión 3 de Vue. Hay una rama con el código inicial y otra con el código finalizado también. Y gracias.

Hola Natalia. Gracias por unirte a nosotros y por esta charla realmente clara. Primeros comentarios. De hecho, recibí un mensaje mientras hablabas de un colega mío. Hola Dean, ¿cómo estás? Él pensó que tenías una voz relajada y eso realmente le ayudó a seguirte. Así que estaba en el momento contigo. Así que esto es algo innato. No sé si puedes agradecerle por eso, pero sí, le gustó. Y a mí también, por cierto.

Quiero recordarles a todos que si no tengo tiempo para responder sus preguntas o hacer preguntas a Natalia. Natalia irá a una sala de Zoom donde pueden continuar la discusión sobre la API de composición o cualquier otro tema relacionado con Natalia. El enlace está debajo del reproductor en el sitio web en la línea de tiempo. Solo tienes que hacer clic en su sala de Zoom. Pasemos a la primera pregunta y es fácil.

9. Benefits of Composition API

Short description:

La API de composición no se recomienda si no tienes características para abstraer y reutilizar, o si tu equipo ya está familiarizado con la API de opciones. Sin embargo, puedes evaluar las características que necesitan ser reutilizadas y agregarlas gradualmente con la API de composición. La nueva API de composición en Vue 3 te permite combinar código lógico en un solo lugar, similar a los hooks de React, y crear hooks personalizados para la reutilización. También simplifica el desarrollo de plugins de Vue al permitirte exportar funciones y usar provide/inject dentro de la instancia de Vue.

Es de Amir Kubal. Por cierto, ¿qué fuente estás usando? Me parece muy bonita. Es la fuente Dank Mono. La uso junto con el tema Night Owls para VS code. Ah, genial. Dank Mono, ¿es del chico de Formidable, verdad? Es una fuente gratuita. Sí, es genial. No, desafortunadamente no lo es. Oh, bueno. A veces tienes que pagar dinero para usar cosas bonitas. Es extraño.

La siguiente pregunta es de Jan. ¿Cuándo no recomendarías usar la composición? No, como parte del equipo que desarrolló la API de composición, es muy tentador decir que la uses en todas partes. Pero de hecho, si, en primer lugar, no tienes características para abstraer y reutilizar, y en segundo lugar, si tienes un equipo que ya está acostumbrado a la API de opciones, no hay razón para saltar inmediatamente y reescribir todo a la API de composición. Puedes evaluar las características que necesitan ser reutilizadas, y luego puedes agregarlas de forma iterativa con la API de composición. Así que no hay una ley sobre cuándo hacerlo. Siempre puedes hacerlo, pero depende del proyecto, básicamente, sí. De acuerdo. La siguiente pregunta es de Ibrahim Beklieff. ¿Qué problemas resuelve exactamente la nueva API de composición? Si lo entendí bien, ayuda a combinar una sola cosa lógica y colocarla en un solo lugar, como lo hizo el equipo de React cuando introdujeron los hooks de React y brinda la oportunidad de crear hooks personalizados como useSearch, useSort, etc. Sí. Lo entendiste correctamente. Desafortunadamente, en Vue 2, carecíamos de una herramienta para reutilizar la lógica, no los componentes. Como mencioné, podíamos tener mixins o slots de ámbito, pero aún así era algo muy sintético. Y también la API de composición es muy útil en el caso de escribir plugins de Vue para Vue 3. Porque actualmente, si eres el autor de la biblioteca, necesitarías trabajar con una instancia de Vue y extender el prototipo de Vue. Con la API de composición, es mucho más fácil hacerlo porque simplemente puedes exportar las funciones que creaste en el plugin y usar provide/inject dentro de la instancia de Vue. Básicamente, se trata de reutilización de características y desarrollo de plugins.

De acuerdo, espero que eso le dé a Ibrahim la respuesta completa que está buscando.

10. Vue 3 Release and Composition API Advantages

Short description:

La versión candidata de Vue 3 estará disponible muy pronto. La API de composición en Vue ofrece ventajas similares a los hooks de React, pero es personalizada y no está integrada. Al decidir qué argumentos usar como refs o valores simples en funciones de composición personalizadas, considera la necesidad de reactividad.

De lo contrario, él puede encontrarte en la sala de Zoom. La siguiente pregunta es de O. Beresford. ¿Hay alguna suposición sobre cuándo la versión beta de Vue 3 estará disponible? Uso Vue 2, y he estado eliminando código adicional de Vue a través de medios tradicionales a través de SRP para SRP. Como probablemente entiendas, no tengo permitido decir una fecha específica, aunque lo tenemos en mente. Pero la versión candidata estará disponible muy pronto, muy, muy pronto. Te sorprenderá lo pronto que será. ¿Puedo configurar una alarma ahora? ¿Será durante el fin de semana? Danos un vistazo, Natali. De ninguna manera, de ninguna manera. Oh, maldición. Bueno, es bueno que seas exigente con nosotros.

La siguiente pregunta es de Poltermouth30. ¿Qué ventajas ofrece la API de composición frente a los hooks de React? Honestamente, es un poco complejo responder porque la pregunta es como, ¿qué ventajas ofrece Vue sobre React, básicamente? Porque resuelven tareas similares pero en diferentes frameworks. Básicamente, si trabajas con React por su simplicidad, puedes considerar la API de composición como una especie de hooks para Vue. Pero la única diferencia es que alguien mencionó los hooks personalizados. Todas las APIs de composición son personalizadas, no tenemos APIs de composición integradas. Sí, está bien. Así que es como comparar peras con manzanas. Luego, están más cerca uno del otro incluso.

Ok, otra pregunta de Andrew Green H. ¿Cómo decides qué argumentos para tus funciones de composición personalizadas deben ser refs y cuáles deben ser valores simples? Básicamente, si necesitas un valor reactivo, siempre deben ser refs. Probablemente hayas notado que estoy pasando opciones que son estáticas porque no planeo cambiar estas opciones en mi aplicación. Esto es solo una constante. Y esto no debería ser un ref o reactivo. Si planeas react ante el cambio de este parámetro, siempre debe ser un ref o computado como hice al pasar un parámetro a la opción de ordenamiento. Si hablamos de la comparación con Vue 2, puedes pensar que los valores no reactivos si los pasas como no reactivos, es alguna función como opciones de signo de dólar. Si quieres algo reactivo, como de data o computado, siempre deben ser refs o computados.

Ok, creo que eso es todo el tiempo que tenemos para la sesión de preguntas y respuestas en vivo, pero mencionaré una vez más, si quieres saber más sobre la API de composición, por favor ve a la sala de Zoom. Está en el enlace. El enlace está en el horario debajo de nosotros en el reproductor. Hay una línea de tiempo debajo. Así que hay una nueva pregunta que llega ahora mismo y no la vamos a responder. Así que Suwy, tendrá que ir a la sala de Zoom desafortunadamente, y vamos a pasar al siguiente ponente. Natalia, muchas gracias por unirte a nosotros desde Ucrania aquí en Ámsterdam, más o menos. Gracias. Y muchas gracias por estar aquí. ♪ Hey, hey, hey, hey, hey, hey, hey, hey, hey, hey ♪

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.
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!
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.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

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
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
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.
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 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- 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
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.