Vue3: Desarrollo de Aplicaciones Modernas Frontend

Rate this content
Bookmark

Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo utilizar eficientemente la API de Composición.

Además de las características principales de Vue3, explicaremos ejemplos de cómo utilizar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema de Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM

169 min
26 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El Masterclass se centró en las características de Vue 3, específicamente la API de Composición. Vue 3 introdujo mejoras significativas y la API de Composición permite modularidad y un mejor soporte para TypeScript. La adopción de la API de Composición en Vue 3 está creciendo, especialmente en proyectos más grandes. La API de Composición de Vue se puede utilizar con bibliotecas principales como Vuex y Vue Router, y la biblioteca VueUse proporciona hooks y comportamientos para mejorar los componentes de Vue. El masterclass mostró cómo utilizar la API de Composición con Vue CLI, almacenar datos, extraer lógica, trabajar con props, emitir eventos e implementar funcionalidad de búsqueda.

Available in English

1. Introducción y Descripción General del Masterclass

Short description:

Soy Mikhail y estaré dirigiendo el masterclass de hoy sobre las características de Vue 3. Nos enfocaremos en la API de composición y mostraré sus beneficios en una demostración. He estado usando Vue desde la versión 1 y me convertí en un gran fanático. Síganme en Twitter para obtener más contenido sobre Vue y desarrollo front-end. Hagamos una rápida ronda de presentaciones para entender la pila técnica de la audiencia.

Soy Mikhail y estaré dirigiendo el masterclass de hoy sobre las características de Vue 3. Estoy muy contento de ver muchos mensajes en el chat. Genial, genial, chicos. Veo que definitivamente pueden escucharme y espero que puedan ver la imagen claramente. Si en algún momento hay alguna interrupción con el video o la calidad del sonido, por favor avísenme. Eso no debería suceder normalmente, pero veremos. Genial.

Entonces, vamos a... Creo que ya es suficiente tiempo para que la gente se una, sigamos adelante. Entonces, ¿de qué vamos a hablar hoy? Principalmente nos enfocaremos en Vue 3, la tercera versión. Comenzaré con una introducción básica y luego profundizaré más en las características de Vue 3, principalmente la API de composición, y luego entraremos en modo de demostración, donde mostraré la mayoría de los elementos que la API de composición ofrece. Permítanme presentarme rápidamente, Mikhail. Llevo más de una década desarrollando para la web. Actualmente trabajo como líder de equipo en ING Bank en Ámsterdam. Comencé a usar Vue por primera vez alrededor de 2016, cuando todavía era la versión 1, y en realidad, cuando Geiss lanzó la versión 2, me fascinó lo fácil y componible que es para construir interfaces de usuario web complejas. Y también el ecosistema y la documentación de Vue, todo era realmente bueno, así que me convertí en un gran fanático de este framework. Desde entonces, lo he estado usando en muchos proyectos comerciales y proyectos secundarios también.

Pueden seguirme en Twitter. Es un conjunto de caracteres difícil de pronunciar. Entonces, por favor, si no pueden anotarlo, lo escribiré en el chat. Estaré encantado de responder sus preguntas en el chat, aquí durante la sesión, pero también síganme en Twitter. Trataré de publicar algunas cosas relacionadas con Vue y el desarrollo front-end de vez en cuando.

Sí. También hagamos una rápida ronda de presentación. Eso también me ayudará a entender mejor el nivel de la audiencia y también servirá como una introducción para que sepamos la composición de los participantes de hoy. Entonces, por favor, escriban en una oración corta su pila técnica, qué otros frameworks o bibliotecas, lenguajes usan a diario. Si todavía están estudiando, está bien también. Puede ser tanto de backend como de frontend y no sé, diseño web, ciencia de datos, lo que sea, solo en una línea, algo como PHP, tres años, eso debería funcionar. Así que por favor compartan su pila actual o la pila en la que están interesados. Si están usando vue, por supuesto, sería bueno saber qué versión están usando principalmente. Así que por favor, les daré aproximadamente un minuto para esto y luego continuaremos.

2. Introducción a Vue y Descripción General del Masterclass

Short description:

Sí, espero que les haya gustado. Estoy muy feliz de presentar un masterclass en esta comunidad. Vue es un proyecto de código abierto impulsado por la comunidad, muy exitoso, con casi 200,000 estrellas en Github. Tiene un ecosistema brillante de herramientas y se utiliza mucho en la industria. Vue está ganando popularidad de manera constante y es una excelente opción para proyectos de cualquier tamaño. Pruébenlo y es posible que también les guste. Un componente típico de Vue tiene lógica y plantillas, donde pueden mostrar datos, vincular eventos y reutilizar partes u otros componentes. La parte principal está en el lado de JavaScript, donde se definen propiedades, variables de estado y se utilizan métodos para modificar datos. Esto se llama la API de opciones.

Sí, vi algunos mensajes al principio. Gracias Robert. Cambiando desde Angular. Oh, esa es una historia muy conocida para mí. Sí, tuve el mismo desafío hace algunos años. Sí, creo que encontrarás muchos conceptos similares y sí, definitivamente te gustará la forma en que puedes componer componentes y reutilizar la lógica. Así que espero que disfrutes el viaje, Robert. Ricardo Vue 2.0, barra tres. Genial, genial. Andrei, Laravel, PHP. Genial. Clement, gracias, gracias. Adam, Lucas. Bueno, muchas cosas que ustedes están usando aquí. Oh, bien, bien. Veo que mencionan Vue con frecuencia, lo cual es bueno porque estamos en una conferencia de Vue. Y sí, también veo que la versión 2.0 todavía se usa con frecuencia, lo cual es completamente comprensible. Es una versión estable que nos ha acompañado durante casi cuatro años. Y sí, aunque soy experto en la tercera versión, a veces simplemente inicio un nuevo proyecto y lo hago rápidamente en la versión dos porque es como una memoria muscular y no necesitas pensar en conceptos complejos, pero sí, nos centraremos principalmente en la versión tres, que creo que será beneficioso para la mayoría de ustedes que aún están usando la versión dos. Genial, genial, veo a Carloi, Barthek. Sí, gracias chicos. Gracias por todos los detalles. Muy bien. C Sharp desde la API de posición, Dave, jefe. Gracias, muy bien. Genial, y también, ahora estamos haciendo el masterclass, que es parte de la conferencia. Y, por supuesto, los días en que se llevaron a cabo las actividades principales de la conferencia ya pasaron, pero sí, espero que les haya gustado. Escuché que hubo muchas presentaciones interesantes y charlas de los miembros del equipo principal, así que estoy muy feliz de presentar un masterclass en esta comunidad. Sigamos adelante, gracias por todas las aportaciones. En realidad, para aquellos que mencionaron React, tengo un par de diapositivas que comparan los hooks de React con la API de composición de Vue, así que eso también podría ser de ayuda para ustedes. Oh, veo que Sergio también mencionó el masterclass de Vue School. Genial, sí, hice algo de contenido para Vue School, específicamente sobre la versión 3. Vue School es una buena fuente de aprendizaje. Es genial saber que lo están utilizando.

De acuerdo, una breve introducción sobre Vue, porque creo que la mayoría de nosotros sabemos qué es, pero solo para recapitular. Se llama Progressive JavaScript Framework. Comenzó alrededor de 2015 por un tipo llamado Ivan Yeo, quien anteriormente desarrollaba AngularJS en Google. Y hoy en día, es un proyecto de código abierto impulsado por la comunidad, muy exitoso, que tiene, como veremos, casi 200,000 estrellas en Github. Tiene ciertas opciones de diseño, como lógica de plantillas y composición de datos para la lógica del componente, observadores, funciones computadas, que las personas que usan Angular encontrarán familiares. Se basa en el concepto común llamado virtual DOM, que también se utiliza ampliamente en React, y tiene un ecosistema brillante de herramientas. Hoy veremos algunas de ellas, como Vue CLI, para iniciar un proyecto, enrutador, para cambiar básicamente las páginas y diferentes partes de su vista en el lado del cliente, gestor de estado, que es un paquete separado llamado Vuex. También veremos esto hoy. También tiene soluciones de representación en el lado del servidor como Nuxt. Entonces, si han asistido a charlas de conferencias, probablemente hayan aprendido mucho sobre ellas. Hablaremos de algunas de ellas también. Se utiliza mucho en la industria, no solo por pequeños equipos, sino también por empresas de nivel empresarial que necesitan reutilizar código y funcionalidad a gran escala. Entonces, sí, creo que es una excelente opción para proyectos de cualquier tamaño. Solo una breve recapitulación sobre el estado actual de las cosas. Sí, tengo este gráfico importado de npm compare. Y aquí pueden ver varias métricas, como la cantidad de descargas de paquetes por día, supongo, o por semana, para tres de los principales frameworks. Entonces pueden ver que Vue está ganando constantemente el segundo lugar, que es tal vez tres o cuatro veces menos que React. Sin embargo, en cuanto al número de estrellas, es significativamente mayor que React. Creo que es un gran logro para un proyecto que es completamente impulsado por la comunidad y que Becca fundó. No tiene ninguna gran corporación detrás. Así que creo que es realmente emocionante usar una herramienta así. Yo mismo escribí varios complementos. No tuvieron tanto éxito, pero fue una buena experiencia, en realidad. Creo que la forma en que se alinea la documentación desde la versión dos y para la versión tres, también, la hace realmente accesible y fácil para que todos construyan cosas personalizadas sobre Vue. Entonces, si no han intentado crear algún código reutilizable, código de código abierto para Vue, pruébenlo. Tal vez también les guste.

De acuerdo. Permítanme verificar. De acuerdo. Sí, un vistazo breve al campo. ¿Cómo se ve típicamente un componente de Vue? Tiene, como dije, lógica y plantillas, pueden mostrar datos desde su modelo y pueden vincular eventos y reutilizar algunas partes de la plantilla o reutilizar otros componentes en la plantilla. Y la parte principal está en el lado de JavaScript, donde pueden definir sus propiedades, sus variables de estado utilizando una función de datos o un objeto de datos. Y pueden utilizar métodos para modificar estos datos y pueden tener muchas otras cosas como observadores, funciones computadas y otros tipos de variables. Así que toda esta parte se llama API de opciones.

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

Short description:

Vue 2 es famoso por su API principal, donde defines todas las propiedades necesarias e interactúas con ellas utilizando la referencia 'this'. La API de opciones, aún compatible con Vue 3, será obsoleta en el futuro. En Vue 2, el código y la lógica se pueden reutilizar a través de slots, directivas, complementos y mixins. Sin embargo, los mixins no serán compatibles en Vue 3. Vue 3 introdujo la API de composición, que permite el uso de hooks o comportamientos. El lanzamiento de Vue 3 trajo mejoras significativas, como la modularidad, características incorporadas como portales, plantillas de múltiples raíces y mejor soporte de TypeScript. La API de composición es el tema principal de este masterclass, y hay una herramienta de migración disponible para actualizar de Vue 2 a Vue 3.

Eso es por lo que Vue 2 es famoso. Está en el núcleo de su API, digamos que defines todas las cosas que necesitas en el componente en esas propiedades del objeto. Y luego interactúas con esta lógica utilizando esta referencia que básicamente ayuda a acceder a cualquier parte de la variable o método dentro del componente. Como veremos más adelante, sí, como probablemente todos ustedes saben, la API de opciones es algo que actualmente aún es compatible en la versión tres, pero se va a descontinuar en el futuro y nos estamos deshaciendo de ella gradualmente.

Así que una nota importante antes de continuar, nos centraremos en cómo reutilizar ciertas partes de código, cierta funcionalidad dentro de Vue 3 real. Y antes de mostrar cómo se puede reutilizar el código en Vue 3, quería resumir rápidamente las formas existentes de reutilizar código y lógica en la versión dos, la mayoría de las cuales aún están disponibles en la versión intermedia. Así que tenemos slots, básicamente como en los componentes web, dejas ciertos espacios o varios espacios en la marca del componente, y luego puedes insertar ciertos bloques en eso. Tenemos directivas, que nuevamente es muy familiar para los usuarios de Angular. Básicamente es un atributo personalizado que modifica el comportamiento de una etiqueta. Tenemos complementos, es una forma mucho más amplia de aplicar cierta funcionalidad. Los complementos pueden tener sus propios componentes, directivas y cosas así. Entonces, si quieres escribir algo más grande que solo un componente o una directiva, probablemente necesites un complemento. Por ejemplo, Vue Router o Vuex son complementos al final. Y eso es como el fragmento más grande que puedes usar, el concepto más grande que puedes usar si quieres crear piezas de código y funcionalidad reutilizables. También tenemos mixins en la versión dos. Los marqué como tachados porque en la versión tres, esto es algo que ya no se admitirá. Los mixins eran agradables, con ellos podías básicamente agregar comportamiento a otros componentes agregando una propiedad especial de mixins. Sin embargo, ahora ya no confiamos en los mixins en la versión tres. Entonces, si aún tienes mixins en tu código de V2, tendrás que reescribirlos en algún otro formato. Probablemente los hooks o comportamientos sean la mejor solución para eso. También veremos esto. Así que tendremos bastantes opciones, diría yo, y sí, en la versión tres tendremos la API de composición que nos permite usar los llamados hooks o comportamientos. Utilizaré esos términos indistintamente, porque sí, esa es una terminología que se hereda en parte de los hooks de React. Así que sí, así es como lo haremos en nuestro masterclass actual. Una breve recapitulación de lo que tenemos en la versión tres. Fue lanzado, sí, hace casi un año en realidad. Creo que fue en una de las conferencias de Vue donde finalmente se anunció y trajo bastantes mejoras. Diría que además de la reescritura completa que dio más modularidad al código, incluyó varias características creadas por la comunidad, como portales y otros elementos que se incorporaron al núcleo, por lo que ahora están disponibles sin usar ningún complemento separado. Sí, también hay adiciones interesantes como las plantillas de múltiples raíces, cuando no necesitas envolver todos los elementos en un elemento raíz, los llamados fragmentos. Y el soporte de TypeScript se volvió increíblemente mejor. Si has estado usando Vue con TypeScript, Vue 2 con TypeScript, probablemente sabes de qué estoy hablando porque hay varias soluciones interesantes, sin embargo, necesitas conocer el camino para aprovecharlo correctamente. Ahora es mucho más directo y fácil. La mayoría de mis ejemplos estarán en JavaScript, sin embargo, tengo algunos enlaces en la parte adicional donde se muestran algunas demostraciones de TypeScript. Y, por supuesto, el cambio más importante es la API de composición que será el tema principal del día. Sí, actualmente ya es la versión 3.2 y también tenemos una herramienta de migración, una herramienta especial que ayuda a migrar la base de código de la versión dos a la versión tres. Así que para aquellos que aún están usando la versión dos y están pensando en actualizar, hay un buen tutorial en la documentación oficial que explica cómo hacerlo. Haré una explicación rápida al respecto. Así que sí, también tendremos tiempo para esto.

De acuerdo, ahora comencemos con el contenido real de la API de composición. Será, digamos, una parte teórica durante unos 20 minutos más o menos. Y luego nos sumergiremos en ejemplos de código, ¿de acuerdo? Hasta ahora, si hay alguna pregunta o cosas que necesiten aclarar, no duden en usar el chat. También pueden usar la función de preguntas y respuestas. Pero sí, en las preguntas y respuestas, estamos seguros de que todas las preguntas están ordenadas y visibles para mí. En el chat es más para sugerencias o comentarios en curso, o tal vez si en algún momento me quedo atascado y ustedes saben cuál es el problema, por favor, siéntanse libres, ¿de acuerdo? Porque es bastante común en esas demostraciones que después de una hora y media algo sale mal y no se puede ver algún corchete o algo así. Así que cuento con ustedes aquí. ¿Bien? Así que comencemos con la parte de composición. ¿Cuál es la idea principal de la API de composición? La idea es que creamos, agregamos una función especial en el nivel superior del objeto que describe un componente, esa función se llama setup. Y la función es un lugar donde puedes crear o instanciar piezas de código reutilizables que serán rastreadas de forma reactiva por el núcleo del framework. Y eso permitirá vincular la lógica que luego se puede usar en las plantillas o en bloques heredados como métodos o un watcher, por ejemplo. Veremos más adelante que puedes mover toda la forma de manejar la lógica de la versión dos a esta función de configuración, y lo bueno de esta función de configuración es que nunca verás 'this' en ella. Esto significa la referencia a una instancia de un componente. Y eso facilita mucho extraerlo fuera del componente. Pero lo veremos mejor en las diapositivas futuras. Por ahora, solo recuerda que tenemos una función de configuración que tiene toda la magia en ella, y debe devolver todas las cosas que se utilizarán en otras partes del componente, en las plantillas, especialmente fuera de ella. Si no las devuelves, entonces no serán visibles ni estarán disponibles en... ¿Puedes ver el puntero ahora? Porque estaba usando una aplicación separada y probablemente ahora es mejor. Así que genial. Así que dos cosas para recordar de esta diapositiva, la función de configuración que acepta props como primer argumento y no olvides devolver cosas desde la función de configuración porque si olvidas devolverlas, no podrás usarlas en ningún otro lugar. Eso es importante recordarlo.

4. Explorando la Función de Configuración y la Lógica Reactiva

Short description:

En la función de configuración, podemos construir lógica para trabajar con variables y objetos. Las utilidades incorporadas manejan esta lógica, pero también puedes crear tus propias funciones y objetos reactivos. Los watchers y las propiedades computadas solo deben usarse dentro de la función de configuración. La función de configuración se llama una vez cuando se inicializa el componente y declara la lógica del componente. Las variables y métodos declarados dentro de la función de configuración están disponibles durante todo el ciclo de vida del componente. Se recomienda utilizar estructuras de datos separadas para cada característica de un componente para facilitar la reutilización y mantener la claridad. Las utilidades ref y reactive se utilizan para crear variables y objetos reactivos. Las propiedades computadas son similares a la versión 2 y permiten valores derivados. La sintaxis .value se utiliza para manejar el valor real de una variable reactiva.

De acuerdo, hablando sobre el contenido de esta función de configuración, ¿qué podemos hacer allí? Podemos hacer muchas cosas, específicamente construir cierta lógica que funcionará con nuestras variables, nuestros objetos. Y comenzaremos aquí con primitivas incorporadas, utilidades incorporadas para manejar esa lógica. Pero como veremos más adelante, también puedes crear tus propias funciones y objetos que serán inherentemente reactivos y te ayudarán a aplicar tu modelo de datos o tu lógica a este enfoque reactivo.

Entonces, aquí podemos ver que todos esos elementos como watcher o una propiedad computada deben usarse dentro de una función de configuración. Si los usas fuera, si los usas en un método o en un gancho del ciclo de vida, por ejemplo, no funcionarán, porque solo están dentro de una función de configuración. Piénsalo como algo así como utilidades que solo son visibles dentro del ámbito de una función de configuración, pero incluso si intentas hacerlo fuera, verás rápidamente la advertencia. Es un proceso de aprendizaje fácil, diría yo.

Veo una pregunta de Rainey que pregunta sobre, ¿qué es una función de configuración? Entonces, la función de configuración es básicamente el lugar donde el componente, es un método que se llama una vez, es importante saber solo una vez, cuando se inicializa el componente. Y ese método declara todas las partes internas, toda la lógica de este componente. Y a lo largo de nuestro ciclo de vida, del ciclo de vida del componente, las variables y métodos que se declaran solo dentro de la función de configuración estarán disponibles si no olvidaste devolverlas. Como mencioné aquí, no olvides devolverlas. A veces puede ser molesto cuando tienes muchos elementos, pero esa es la forma actual de hacerlo. Tienes que devolver todo. Así que creo que será más claro cuando veamos más durante la demostración, los ejemplos de lo que realmente puedes hacer. Por ahora, míralo como una introducción más teórica.

Y veo una pregunta en la sección de preguntas y respuestas. Dice, ¿es la configuración de script la forma recomendada de usar la API de composición? Y esa es una gran pregunta. Lo veremos más en el resumen, ¿de acuerdo? Pero gracias por la pregunta. Desafortunadamente, no es visible quién la hizo, pero sí, veo otra pregunta de TFO. ¿Cuál de estas dos formas de crear datos reactivos se sugiere? ¿Todo el estado del componente en un solo dato reactivo o crear para cada objeto un dato reactivo para los primitivos? Intentaré compartirlo de alguna manera porque es bastante largo. Déjame compartir la pantalla. Así, creo que sí. Sí, solo algunas manipulaciones. Lo siento por eso. Bien, bien. Sí, recomendaría tener una estructura de datos separada para cada característica que tenga tu componente. Digamos que si tu componente trabaja con, no sé, usuarios y productos, entonces deberías crear estructuras de datos separadas para cada uno de ellos y manejarlos por separado. ¿Por qué? Porque en el futuro, si quieres reutilizar parte de esta lógica, puedes extraerla de allí, ¿verdad? Es lo mismo que si tienes, digamos, algún módulo, un módulo de JavaScript, lo que sea, PHP, Python, no importa el lenguaje. Mantener las cosas separadas puede ayudar a refactorizarlo más adelante. Abogaría por este enfoque. E incluso si no lo reutilizas, o no lo extraes en este momento, sigue siendo mucho más claro cuando el nombre del componente de la estructura de datos corresponde específicamente a una cierta lógica empresarial, ¿de acuerdo? Así que abogaría por la opción dos en tu pregunta, Tefla. Ah, no ves la pregunta. Está bien. ¿Puedes ver la pregunta ahora? Si puedes, oh. Es, está bien, está bien. Es extraño. Solo copiaré para asegurarme. Bien, creo que sí. Sí, solo algunas manipulaciones. Lo siento por eso. Bien, bien. Sí, abogaría por el enfoque número dos. Bien. Entonces, lo que podemos ver aquí, solo para recapitular rápidamente los elementos básicos de la lógica reactiva. Podemos usar ref y reactive. Esas son utilidades que pueden ayudarte a crear una variable reactiva o un objeto reactivo. Bueno, la variable es para valores individuales. Puede ser un booleano, un número o una cadena, algo así. Reactive se utiliza principalmente para formas más complejas como objetos completos, matrices y cosas así. Y luego puedes hacer cosas con esas variables reactivas que se devuelven de esas utilidades. Por ejemplo, puedes observar el valor como aquí y si el valor cambia, puedes hacer cierta lógica. O puedes crear, digamos, un siguiente nivel de elementos reactivos, derivados que se derivarán del valor del objeto inicialmente creado. Así que tenemos el elemento de cuenta aquí, que tiene un valor predeterminado de cero. Y luego tenemos un elemento más uno aquí, que cada vez que cambia el recuento, volverá a calcular el más uno y lo convertirá en un valor de cuenta más uno, ¿verdad? Entonces, cuando el recuento se convierte en dos, más uno se convierte en tres, cuando el recuento se convierte en 29, se convierte en 20, 30 y así sucesivamente, ¿verdad? Y no solo tiene que lidiar con matemáticas o números. Puede ser cualquier tipo de transformación. Así que la idea de las propiedades computadas es muy similar a la versión dos, ¿verdad? Que estás revisando los elementos que se mencionan en el callback. No quiero decir que los estés revisando, sino que Vue lo hace por nosotros, ¿verdad? Simplemente escribes declarativamente lo que quieres derivar y Vue rastreará todas las dependencias y lo recalculará por ti, ¿de acuerdo? Ese es el juego. Si estás usando la versión dos, conoces las propiedades computadas, ¿verdad? Así que eso es muy similar a eso. Nuevamente, este ejemplo es bastante simple. Solo para darte una idea, intentaremos hacer cosas más complejas en la sesión de demostración. Lo que también es interesante aquí es que no hay referencia a this, a la instancia del componente. Lo que creamos son algunas propiedades de estado como estos dos, como cuenta y estado, pero no decimos this.cuenta o this.estado. No es así como debes hacerlo. Por lo tanto, no se utiliza this dentro de las funciones de configuración, ¿verdad? Y en segundo lugar, lo que puedes notar es que, en algunos lugares, usamos .value, y este .value es un truco que en realidad se necesita para manejar correctamente el valor real. Mostraré rápidamente la siguiente diapositiva, que he construido específicamente con mis habilidades de Photoshop para explicarte qué está sucediendo.

5. Reactividad y Acceso a Valores

Short description:

Cuando creas un objeto ref o reactivo, lo marca y lo rastrea en busca de cambios. La vista es notificada cuando el objeto cambia y puedes realizar acciones basadas en el nuevo valor. La sintaxis .value se utiliza para acceder al valor real de un objeto reactivo.

Entonces, cuando tienes objetos o variables simples, la vista no los rastrea, ¿verdad? Simplemente no le importan. Cuando creas un objeto ref o reactivo, lo marca y lo rastrea, lo observa cuidadosamente hasta que cambie. Y si cambia de alguna manera debido a la entrada del usuario o por un temporizador o cualquier otra cosa, entonces la vista, como un sistema de reactividad del framework, es notificada al respecto. Bajo el capó, utiliza lo que se llama proxies, que agregan una capa adicional sobre tus objetos que deseas rastrear. Y luego, cuando este objeto cambia, recibes una notificación de que este objeto ha cambiado. Si quieres hacer algo, por favor, continúa, este es el nuevo valor, ¿de acuerdo? Esa es la idea de por qué esto es importante, para que la vista sepa que quieres usar cierto valor o un objeto como reactivo. Y una vez que lo hayas hecho, cuando lo hayas declarado en la función de configuración, entonces estás listo, se encargará de cualquier tipo de recálculo por ti. Pero por eso entra en juego este punto, lo siento, ¿dónde está mi puntero de mouse? Por eso entra en juego este .value. Porque el resultado de esta creación de un objeto reactivo es un objeto, no es un valor simple. Por eso, para acceder a él, para obtener el valor real, debes llamar a .value. Por eso debe ser así.

6. Observable, Watch Effect, Ref vs Reactive

Short description:

En Vue2, hay un elemento llamado observable que puede rastrear cambios en un objeto o variable. La diferencia entre Watch Effect y watch es que Watch Effect tiene un flush colocado en una opción de sincronización. Ref se utiliza para datos primitivos, mientras que reactive se utiliza para objetos. También puedes incluir propiedades computadas dentro del objeto reactivo.

Vale, en realidad eso no es un comportamiento nuevo en comparación con View2. En View2 también tenemos un elemento llamado observable, como un método estático que puede hacer cosas similares. Así que simplemente puedes llamar, puedes llamar a view.observable y luego poner algún objeto o variable allí. Y luego le dirá al framework que por favor rastree el sitio y luego notifícame si algo cambia. Así que eso ya estaba empezando a entrar en la API, pero no era común en la versión dos, ¿de acuerdo?

Sí, veo una pregunta de, de Martin, y se trataba de la diferencia entre Watch Effect y su diferencia con watch. Sí, vamos a mirar más de cerca esto, pero en resumen, es lo mismo que un watch normal, pero con el flush colocado en una opción de sincronización. Así que básicamente significa que cuando estamos actualizando variables en comparación con el ciclo de redibujo virtual DOOM, eso es todo. Así que tu sistema de actividad de vista, invalida los efectos, esos cambios, y luego los envía de forma asíncrona para evitar llamadas de retorno duplicadas innecesarias. Y cuando tienes múltiples cambios que ocurren al mismo tiempo, digamos, en la misma actualización, es por eso que hay diferentes etapas de este proceso. Y puedes manipular en qué estado de este proceso quieres ejecutar este efecto. Vale, eso es, digamos, un poco en profundidad, pero para muchas cosas básicas, watch será suficiente, pero para watch effect tienes una opción adicional cuando quieras hacer eso, ¿de acuerdo?

Bien, entonces sí, hay otra pregunta sobre esto, fue de Robert, sobre ref versus reactive. Esa es una pregunta muy, muy común. De hecho, tenemos dos formas de crear elementos. Sin embargo, para el uso común, usas ref para datos primitivos, como dije, como números, símbolos, booleanos, cadenas, etc., y reactive, puedes usarlo cuando estás tratando con todo un conjunto de objetos, ¿de acuerdo? Entonces, reactive no podrá tomar un valor primitivo como entrada. Puedes poner un objeto aquí, pero no puedes poner un valor primitivo aquí. Y se usa comúnmente de esta manera, que usarás refs para primitivos y reactive para objetos más avanzados. En resumen, también veremos, quiero decir, nuevamente, más ejemplos, pero esa es la principal diferencia. Así que sigamos adelante.

7. Lifecycle Hooks and Data Loading

Short description:

Los hooks del ciclo de vida en Vue 3 se pueden utilizar dentro de la función de configuración para ejecutar cierta lógica durante el ciclo de vida del componente. Puedes utilizar los callbacks unmounted, unupdated y unmounted disponibles en la función de configuración. Un ejemplo típico es cargar datos cuando el componente está abierto, hacer llamadas a API y asignar los datos cargados a un objeto reactivo. Este código se puede reutilizar fuera del componente creando un hook o comportamiento personalizado.

Sí, quiero decir, sí, puedes hacer eso, sí. Sí, cierto, cierto. Buen punto, todos heredamos de un objeto al final. Así que aún puedes poner eso, sí, claro. Bien, sigamos adelante.

La siguiente parte de la lógica que puede residir en la función de configuración son los hooks del ciclo de vida. Todos sabemos qué es el ciclo de vida de un componente, ¿verdad? Los componentes se crean, se renderizan, luego ciertas propiedades pueden o no actualizarse y luego un componente puede ser desmontado, eliminado del DOM. Y durante este ciclo de vida, tenemos un conjunto útil de callbacks que podemos utilizar para ejecutar cierta lógica como iniciar alguna biblioteca de terceros o iniciar la carga de datos o, sí, rastrear ciertos valores, cosas así, o tal vez iniciar un contador y todas esas cosas. Y anteriormente solíamos tener los hooks del ciclo de vida en el nivel superior de la API del componente para la API de opciones del componente. Así que usarías, por ejemplo, mounted para llamar a la lógica que se ejecutará cuando el componente se monte y cosas así, o destroyed cuando quieras, tal vez antes de destruir, cuando quieras cerrar alguna, no sé, conexión de web socket o eliminar algunos event listeners y cosas así. Quiero decir, event listeners que están fuera del control de la vista, si tienes alguno, por ejemplo, ¿verdad? Así que esos hooks del ciclo de vida aún existen y están disponibles dentro de la función de configuración. Hay callbacks unmounted, unupdated y unmounted que puedes importar desde el framework, desde Vue y luego hacer uso de ellos dentro de una función de configuración, ¿verdad? Así que este es un ejemplo breve que muestra la solución típica cuando quieres cargar datos cuando el componente está abierto, hacer llamadas a API y luego cuando los datos están cargados, simplemente los asignas a tu variable de estado. En este caso, es un objeto reactivo y luego lo devuelves desde la función de configuración, el objeto de estado y puedes usar el objeto de estado para mostrar cosas dentro de tu plantilla, ¿verdad? Así que este es un ejemplo simplificado de cómo puedes manejar la carga asíncrona de datos dentro de un componente de Vue 3. Y, por supuesto, nuevamente, ves que no hay nada específico de este componente que nos impida reutilizar este código fuera de este componente, lo cual es una parte agradable de esto que podemos juntar todo esto en un hook o comportamiento personalizado. Y esto puede ser importante en cualquier otro componente donde necesitemos esta carga de datos.

8. Cambios en Vue 3 y Configuración de Script

Short description:

En Vue 3, las convenciones de nomenclatura para los eventos han cambiado para comenzar con 'on' y usar kebab case. El primer argumento en la función de configuración es para las propiedades, mientras que otras características como emitir eventos y acceder a slots están disponibles en el segundo argumento, a menudo llamado contexto. En el ejemplo, vemos los componentes de la API de opciones comúnmente utilizados y cómo se reescriben en Vue 3 utilizando la API de composición. El estado se almacena en objetos reactivos, las variables reactivas derivadas se crean utilizando funciones computadas, los métodos son simplemente funciones que deben devolverse para ser utilizadas en la plantilla, y se pueden configurar observadores para rastrear cambios. La opción de configuración de script en Vue 3 es un azúcar sintáctico para componentes de archivo único que proporciona una sintaxis más comprimida y un mejor soporte de TypeScript. Las props se pueden definir en la función de configuración y acceder desde el primer argumento. El valor de retorno de la función de configuración se puede utilizar en la plantilla. No es necesario utilizar 'sync' en los hooks del ciclo de vida en Vue 3.

De acuerdo. Sí, aquí tengo algunos elementos que cambiaron en la versión 3. La nomenclatura cambió. Creo que es genial que ahora la nomenclatura esté más alineada. Simplemente comienza con 'on' y luego sigue el nombre en kebab case para cada uno de los eventos. Y esto, creo, hace que sea más fácil de recordar y usar cuando tiene una nomenclatura similar. De acuerdo. Otro elemento más. Así que, solo mencioné brevemente que el primer argumento es una propiedad. Las propiedades son una forma común en todos los frameworks modernos y también para los componentes integrados como los web components, para propagar datos desde un componente padre a un componente hijo. Entonces, las propiedades van como primer argumento y todas las demás características que Vue proporciona para nuestros componentes, como emitir un evento, leer atributos, tener acceso a slots, todo esto va en un segundo argumento, que a menudo se llama contexto. Entonces, si necesitas emitir un evento, necesitas extraer la función de evento del segundo argumento. Eso es un poco de descomposición de lo que va en el segundo argumento. No trataremos mucho con eso, pero si necesitas encontrar algo especial, puedes encontrarlo aquí en el argumento de contexto.

De acuerdo, veamos este ejemplo muy simple que muestra una aplicación que tiene solo un formulario y un poco de lógica para aumentar el valor de este formulario y un pequeño método solo para mostrar los datos que son para el método. Aquí vemos todas las piezas de la API de opciones comúnmente utilizadas, como el estado que se almacena inicialmente en el objeto data, los valores formateados se almacenan en las propiedades computadas. Se podría decir que podríamos usar filtros, por ejemplo, para esto. Los filtros también se van a deprecar en la versión 3, así que eso es algo a tener en cuenta. Tendrás ganchos del ciclo de vida. Tenemos métodos para hacer este cambio de valor, simplemente incrementar. Y tenemos un observador, que aquí no hace mucho, pero solo por el bien de ello. Y aquí tienes un ejemplo de cómo reescribimos el mismo código en la versión 3. ¿Qué va dónde, verdad? Eso es solo para compararlos uno al lado del otro porque en las demostraciones de código ya no usaré la versión 2. Así que solo para recapitular rápidamente, cuáles son los bloques de construcción y cómo se corresponden entre sí. Entonces, la declaración de estado va en un objeto reactivo, ¿verdad? Ponemos los valores predeterminados aquí y hacemos uso de los objetos reactivos que nos devuelven. Las variables reactivas derivadas, como para el formateo, se crean mediante funciones computadas. Entonces, la función computada acepta un callback y los elementos que mencioné en el callback se rastrean. Y para cada cambio de esos elementos que están en el callback, se calculará o se computará el nuevo valor, por eso se llama computada, ¿verdad? El gancho all-mounted que mencioné justo antes de esa diapositiva sobre los ganchos del ciclo de vida. Aquí puedes ver cómo funciona. Luego, los métodos. Los métodos no necesitan ninguna declaración especial de propiedad como aquí, son simplemente funciones que hacen cosas, ¿sabes? Y esas funciones debes devolverlas y luego podrás usar esta función en tu plantilla. Y el último es para el observador, y aquí, nuevamente, no hace mucho, solo muestra el valor en la consola, pero así es como puedes hacer uso de un observador, pones una dependencia y luego obtienes un valor anterior y un nuevo valor en el callback. Eso es nuevamente, muy similar al enfoque de AngularJS, así que probablemente reconocerás ese patrón. De acuerdo, eso es para la comparación uno al lado del otro. Pasemos a elementos más específicos. Andrey escribió, en la opción de configuración de script, ¿no se usa return, es eso cierto? Entonces, solo para tocar rápidamente esto, porque también hubo una pregunta relacionada con la configuración de script. Entonces, la configuración de script es algo que puedes escribir así, si no lo has usado, es así, que es una especie de azúcar sintáctico para componentes de archivo único. Y luego puedes usarlo junto con una declaración normal y agrega básicamente un poco más, sí. Sí. Cómo decirlo, una sintaxis comprimida, menos ruido de todas esas declaraciones de retorno, exportar por defecto y cosas así. Correcto. Y puedes usar mejor TypeScript para declarar propiedades y eventos. Y al final, en realidad tiene un ligero rendimiento en tiempo de ejecución. Así que es una buena herramienta para usar. Esa forma agradable de usar. Y de hecho, en la configuración de script, puedes omitir el return porque todos los elementos están en el ámbito global de esta gran función de configuración, ¿verdad? Así que eso es, sí, un azúcar sintáctico agradable básicamente para esos casos. Sí, genial. Veo que se agregaron más preguntas. Déjame ver. Entonces, el primer elemento, si no estoy pronunciándolo correctamente. ¿Cómo se definen las props en la nueva API de composición? En este ejemplo, no se definen props porque esto es solo una simplificación. Pero normalmente puedes poner props como argumento para una función de configuración y tomar los valores de allí. Entonces, estarán disponibles para ti porque la función de configuración se ejecuta antes de que se renderice el componente, pero ya cuando Vue tiene acceso al valor de las propiedades. De acuerdo. Genial. Sí. Lo que devuelves de una función de configuración puedes usarlo en la plantilla. Sí. Y una pregunta más. Intentando usar esta función como respuesta en la vida, pero siempre sigo olvidándolo, lo siento. Entonces, de acuerdo, lo estoy intentando ahora. Estoy respondiendo la pregunta de Aaron.

QnA

Preguntas y Comparaciones

Short description:

¿No necesitas el sync en los hooks del ciclo de vida? Sí, tienes razón. Fue una simplificación, pero olvidé el sync en ese ejemplo específico. En cuanto a WEF y Reactive, hay un buen artículo para comparar. Si tienes cosas definidas por ref, tendrás que usar value para acceder a ellas. La API de composición se puede utilizar como una alternativa para Vuex. Puedes construir tus propios objetos que estarán separados y almacenarán valores fuera del componente. La masterclass está recibiendo preguntas detalladas, lo que indica que la comunidad está adoptando Vue 3 como predeterminado. La grabación de la masterclass estará disponible para los participantes con boleto. Puedes extraer la lógica en comportamientos o hooks e importarlos en tus componentes. La función de configuración permite un enfoque más mantenible y modular. La API de composición de Vue 3 es similar a los React Hooks, permitiendo una lógica separada que no está vinculada a las piezas del componente. La lógica con estado, definida por ref o computed, se extrae fuera del componente.

¿No necesitas el sync en los hooks del ciclo de vida? ¿No necesitas el sync? Sí, ¿te refieres a ese ejemplo específico? Tienes razón. Tienes toda la razón aquí. Es mi error, está aquí. Olvidé el sync, sí. De todos modos, fue una simplificación bastante grande. Así que me olvidé del sync aquí, por supuesto. De lo contrario, no funcionará. Correcto.

De acuerdo, una más. Creo que ya respondí a esta. Dame un momento. Para WEF y Reactive, nuevamente, hay un buen artículo para comparar. Estoy bastante seguro de que esto puede dar una mejor explicación, que haré durante esta masterclass. Así que por favor échale un vistazo. Pegué un par de enlaces en la respuesta. Y una pregunta más de Luka. ¿Necesitas usar value si quieres hacer un cambio inmutable, es decir, si tienes un array reactivo, no necesitas usar value.concat, blah, blah, blah, o es preferible un enfoque mutable? De acuerdo. ¿Necesitas usar value desde el array? Bueno, si tienes cosas que están definidas por ref, entonces tendrás que usar value para acceder a ellas, ¿de acuerdo? Eso es seguro. Si quieres cambiar el valor, también necesitarás usar el punto value. Según mi entendimiento, la primera versión debería ser correcta, pero verifiquémoslo cuando tenga abierto el IDE. Estoy bastante seguro de que es así, la primera que escribiste, porque necesitas acceder al valor. De acuerdo, bien.

Gracias por muchas preguntas, muy buenas. Hice esta masterclass, creo que en algún lugar, en junio, en una conferencia de Vue en Ámsterdam o en algún otro evento. Y había muchas menos personas que ya conocían o experimentaban o usaban Vue 3, así que había muchas menos preguntas. Así que estoy realmente feliz de que esto esté sucediendo y las preguntas sean bastante detalladas. Eso significa que nosotros, como comunidad, estamos acercándonos a la etapa en la que usamos Vue 3 como predeterminado, así que eso es realmente genial. Una más de Adriana, lo siento. Responder en vivo, he escuchado que la API de composición se puede utilizar como una alternativa para Vuex. Sí, eso también es una buena adición. Es algo similar, bueno, no exactamente, es como en React cuando se introdujeron los hooks, podías hacer uso de estructuras similares, como en lugar de Redux, se llamaba Use Reducer, como un hook especial que podía crear un pequeño Redux específicamente para tu componente. Eso es algo similar aquí, utilizando esas utilidades reactivas como mostré ahora en esta parte teórica, podemos construir nuestros propios objetos que vivirán fuera de nuestro componente, estarán separados, como piezas enchufables que puedes activar en los componentes donde los necesites. Y de hecho, almacenarán el valor. Por lo tanto, se pueden utilizar como un estado de pieza de libros. Sí, es algo cierto. Y también hay un artículo que muestra eso bastante bien, puede que tenga dificultades para encontrarlo, pero en resumen, sí. Y mostraré un ejemplo de esto, ¿de acuerdo? Bien. Intentaré recordar esas preguntas al mostrar los ejemplos de código, pero puedo olvidar algunas de ellas. Las tengo en la pestaña de respuestas. Lo siento, chicos, a veces la interfaz de Zoom se vuelve cada vez más compleja, por lo que hay más y más características allí, genial. Andrei, una pregunta más. Lo siento, tal vez tengamos una grabación. Eso es algo que los organizadores deberían saber. Supongo que está grabado. Y sí, está grabado. Y de alguna manera, después, debería estar disponible en algún lugar de esta, sí, ¿cómo se llama? Área de inicio de sesión para las personas que tienen un boleto. Así que sí, casi al 100% podrás encontrarlo. Genial. Solo algunas observaciones finales. Soy Karolin, y llegaremos al ejemplo de código, seguro. Entonces, como resumen, nuevamente, puedes extraer la lógica como aquí en tu función de configuración y luego hacer que no sea solo un montón de código, como una superfunción, ya sabes, como la que lleva tres pantallas para leer y hace todo y es difícil de mantener. Puedes extraer cosas en comportamientos o hooks y luego importarlos pieza por pieza. Entonces, aquí tienes un ejemplo, por ejemplo, tenemos algunos componentes y tienes hooks o composables. Y luego, donde necesites cierta pieza, simplemente puedes importarla y hacer uso de ella. Así que imagina que básicamente haces todo lo que está escrito aquí en la función de configuración. Solo un hook y luego puedes importar este hook así en tu componente y luego es solo una línea que te da todas las variables, todos los métodos que puedas necesitar usar y cosas así. Así que ese es un patrón corto, digamos. Sí, en cuanto a la grabación, sí, supongo que estará disponible en algún momento entre mañana y la próxima semana. Eso es seguro. Genial, así que solo una rápida comparación con los React Hooks porque los React Hooks son una herramienta bastante popular como todos sabemos y luego tal vez las personas que están cambiando de React o también haciendo React, así que tal vez sea útil resaltar rápidamente las diferencias. Entonces, no estamos usando el mágico this en el código del componente, como los React Hooks dieron la oportunidad de no tener este estado, lo siento, las propiedades de clase y además los métodos con esto. Así que es el mismo tipo de cosa. No estás vinculando la lógica a las piezas del componente. Es solo una lógica separada que vive en la función de configuración. Luego tenemos, está en paralelo con toda la API. Así que también es lo mismo con React cuando aún puedes usar componentes de clase y componentes funcionales con hooks, aún puedes combinarlos como quieras. Así que eso también funciona en paralelo. Extraemos la lógica con estado. Eso es lo que estaba tratando de mostrar antes, que las cosas que contienen ciertos valores como los que están definidos por ref y tal vez los que están definidos por computed. Esto se llama lógica con estado en este caso, ¿verdad? La lógica que tiene valores que necesita almacenar y necesita reutilizar en las siguientes iteraciones, ¿verdad? Así que tiene estado básicamente. Y esta lógica con estado se va fuera del componente.

Uso de la API de Composición con Bibliotecas Principales

Short description:

La función de configuración en Vue solo se llama una vez durante la inicialización del componente, a diferencia de los hooks de React que pueden volver a ejecutarse. Esto elimina limitaciones como no poder usar hooks dentro de bucles o declaraciones if-else. En Vue, puedes usar objetos reactivos para almacenar objetos anidados y propiedades calculadas. Dos Refs se pueden usar para desempaquetar el contenido de un objeto y proporcionar cada propiedad como una variable reactiva separada. La API de Composición de Vue se puede utilizar con bibliotecas principales como Vuex y Vue Router, lo que te permite leer y escribir valores, llamar a acciones y mutaciones, y rastrear dependencias. La biblioteca VueUse proporciona una colección de hooks y comportamientos pequeños para diversas utilidades, lo que facilita mejorar tus componentes de Vue con lógica reutilizable.

Probablemente ya lo haya mencionado un par de veces, pero no puedo enfatizar este punto. Es un patrón que ayuda a reutilizar la lógica de manera más elegante. Digamos, está bien. Y sí, la convención de nomenclatura bastante común es tener un prefijo de uso que también se usa mucho en el mundo de Vue. ¿De acuerdo? Solo el exterior de este tipo de lo que no es similar a los hooks de React es que la función de configuración en todo solo se llama una vez. Como mencioné anteriormente, cuando se inicializa el componente, ¿verdad? No es como volver a ejecutar todo el componente como una función como lo hace en el espacio de React. Simplemente se ejecuta una vez para declarar el punto de parada. Y gracias a eso, no hay cosas como limitaciones. Si has trabajado con hooks de React, hay cosas como que no puedes poner hooks de React dentro de bucles o declaraciones if-else, entonces se rompe. Pero aquí está todo bien porque solo se ejecuta una vez al inicializar, ¿de acuerdo? Entonces, sí. Eso es en resumen. No más React. Solo una última diapositiva. Aquí, estamos comparando un componente simple que incrementa el valor y calcula el valor duplicado de este elemento. A la izquierda, tenemos una versión de React y a la derecha, tenemos una versión de Vue. Puedes ver que algunas partes son similares, lo que significa que toda la lógica, nuevamente, no contiene ninguna conexión con esta, la instancia de un componente y utiliza una especie de utilidades que se importan de la biblioteca, que recuerda la forma en que se hace desde Vue. Eso es en realidad todo el ejemplo. Utiliza la API de composición en lugar de la versión moderna de Vue 3. Por lo tanto, esto es para los usuarios de la versión dos. Si no estás utilizando la versión tres, en la versión tres puedes importarla directamente desde el núcleo de Vue. De todos modos, importas esas utilidades, creas un estado y con esas utilidades haces ciertas modificaciones, y luego muestras cosas en la plantilla. Así que, en realidad, aquí tienes un ejemplo de un objeto reactivo que mencioné anteriormente, que no solo puedes poner solo como, digamos, valores primitivos, sino que también puedes poner objetos anidados o puedes poner propiedades calculadas dentro de un objeto reactivo. Eso no funcionaría con el Ref, ¿de acuerdo? Por lo tanto, el reactivo es más avanzado en este caso en términos de seguimiento. Sí, buen punto, Andrei. Entonces, dos Refs básicamente desempaquetan el contenido del objeto, ¿de acuerdo? Así que abre un objeto y proporciona cada una de sus propiedades como una variable reactiva separada, ¿de acuerdo? Entonces, aquí tenemos un Estado, que está dentro de count y double. Y cuando usamos dos Refs, obtendremos count y double por separado, ¿de acuerdo? Entonces, eso es un atajo rápido para este tipo de operaciones. Porque de lo contrario, podrías hacerlo manualmente, ¿verdad? Pero sería nuevamente, más líneas en la declaración de retorno. Así que tenemos una utilidad de dos Refs para esto. De acuerdo, ese es un ejemplo rápido. Ahora veamos cómo usar la API de Composición en las Bibliotecas Principales. Con Bibliotecas Principales, me refiero a Vuex, en primer lugar, un enrutador y un par de cosas más. Nuevamente, veremos más de esto en los ejemplos de código. Solo estoy dando una breve descripción teórica de cómo funciona esto. Tanto el enrutador de Vue como Vuex vienen en una versión más nueva. Entonces, si estás utilizando la versión tres de Vue, debes usar la versión cuatro de Vue Router y Vuex. Eso es como un conjunto en la dependencia entre pares. Entonces, si estás instalando la versión tres de Vue y luego estás instalando un enrutador, automáticamente colocará la versión correcta. Lo mismo ocurre con Vuex, pero asegúrate de no intentar instalar la versión antigua porque la versión antigua no tiene hooks, esos hooks personalizados importantes, por lo que no funcionará. Pero en las versiones modernas más recientes, puedes importar un hook especial. Nuevamente, mira la forma en que se escribe la sintaxis, es un uso y luego el almacén, así que usa algo. Y en la función de configuración, nuevamente, puedes obtener un almacén de él y hacer cosas similares como lo harías normalmente con el almacén, como leer el valor o escribir un valor, llamar a acciones y mutaciones, eso es posible, así que ese es un patrón rápido de cómo se hace en la versión 3, ¿de acuerdo? Espero que eso dé alguna idea. Vinculamos valores de un estado en la función de cálculo y lo que sucede es que Vue Core rastrea estas dependencias dentro de tu almacén y cualquier cambio que realice, la función de cálculo se volverá a ejecutar y te dará el nuevo valor de un almacén, por lo que así es como lo lees. Y si quieres confirmar, simplemente este objeto de almacén que obtienes del hook tiene opciones para confirmar y despachar, por lo que básicamente puedes hacer tanto acciones como mutaciones con los datos que necesitas. Entonces, eso es en resumen cómo lo haces con Vuex. Clement, veo tu nota. Honestamente, no lo he intentado. Copiaré esto y lo probaremos, ¿de acuerdo? No sé, quiero decir, tal vez lo intenté, pero no tengo una respuesta en este momento, podemos echar un vistazo. Copié tu comentario, lo probaremos más tarde. Sí, sí, me gusta verificar. Mi opinión es que no debería funcionar porque ref no está rastreando sus dependencias. Entonces, creo que aquí no debería funcionar, pero lo intentaremos. Bien, y uno más para el enrutador, lo mismo, puedes importar hooks especiales desde una versión moderna del enrutador. Y esos hooks te brindan el mismo comportamiento que usarías con el buen y viejo this.$router, ¿verdad? Puedes obtener tu ruta actual. Puedes obtener los parámetros. Puedes hacer navegación programática, cosas así. Simplemente puedes hacer uso de esos objetos que se devuelven desde los hooks. Y nuevamente, son completamente, digamos, componibles con otros bloques de construcción que acabamos de describir en la fase introductoria. Por ejemplo, puedes estar rastreando los parámetros de una ruta y luego, si cambia, puedes volver a ejecutar cierta lógica para obtener un nuevo dato, ¿verdad? Así es como esas piezas juegan juntas. Y nuevamente, veremos más de eso en los ejemplos, ¿de acuerdo? Entonces, sí, eso es Willa Martin. Vi tu mensaje de advertencia. Sí, creo que es más importante que ahora nos sumerjamos en los ejemplos y luego los mostraré allí, sí. Supongo que es, creo que es bastante material para revisar allí. Y un elemento más que realmente me gusta como desarrollador, como usuario, es una biblioteca llamada VueUse. Es básicamente una colección de todo tipo de hooks, todo tipo de comportamientos pequeños, y que te brinda acceso a todo tipo de utilidades, no solo tiempos de espera y como throttles, sino también cosas relacionadas con la API del navegador, cosas relacionadas con la API del DOM, rastrear la posición de un mouse o rastrear un campo que está enfocado, cosas así. Entonces, creo que tiene como cien hooks diferentes que son realmente como piezas pequeñas que se pueden insertar en el componente y hacer que sean como esas piezas de lógica que puedas necesitar una o dos veces en tu aplicación, pero luego no las escribes tú mismo o buscas en Stack Overflow, simplemente las tomas de la biblioteca, ¿de acuerdo? Sí, sí, estoy completamente de acuerdo. De hecho, hubo, creo que tres o cuatro bibliotecas que intentaron este enfoque, como en el ecosistema de React también había ciertas colecciones de esos hooks, esas piezas que puedes instalar como un módulo NPM y luego usar, pero creo que VueUse ahora es la que domina y tiene las actualizaciones más frecuentes y la calificación más alta en estrellas, por lo que sí, actualmente es la que debes elegir. Sí, de hecho, también tengo una demostración con eso que te mostraré. Genial, así que hay una pregunta más de Tefo sobre Vuex, supongo que me estás preguntando, no más map getters en esta versión, así que existe map getters, todavía existe, pero es posible que ya no lo necesites. Déjame, entonces, todavía puedes hacer eso.

Preguntas y Respuestas: Vuex y Composables

Short description:

Todavía puedes tener un mapeo de acciones y mutaciones. El mapeo de mutaciones y el mapeo de getters todavía existen. Hay algunas bibliotecas interesantes para recomendar. Vuex sigue siendo una buena opción para aplicaciones complejas. Puedes usar los accesores de Vuex en los hooks. Pasemos a la demostración. Pina es una pequeña biblioteca de gestión de estado. Es genial que se estén experimentando enfoques más livianos. Vite es una herramienta interesante que se mostró durante este evento. Los Composables aún son bastante nuevos en Vue. La sensación en Vue es que ha pasado suficiente tiempo. Los hooks no son una bala mágica en React. La lógica basada en clases sigue siendo más legible.

Estoy tratando de abrir la parte específica. Todavía puedes tener un mapeo de acciones y mutaciones, creo. Sí, todavía existe, pero no siempre es necesario, ¿de acuerdo? Puede que estés bien solo con eso, ¿de acuerdo? Porque puedo imaginar que si tienes demasiados elementos para leer, ¿por qué no aprovechar esas cosas, ¿de acuerdo? Aquí, solo un enlace a la documentación. Por lo tanto, el mapeo de mutaciones y el mapeo de getters y cosas por el estilo todavía existen.

De acuerdo, algunas bibliotecas interesantes para recomendar. ¿Y qué hace? ¿Es algo así como un reselect para React? Puedes encontrar datos específicos en tu Vuex. ¿Son esos datos o, juzgando por el nombre, qué? Si tenemos tiempo, exploraremos qué es el DSL, ¿de acuerdo? Lo principal, genial, genial. Pero es genial que ustedes tengan algunas cosas de código abierto para compartir. Creo que siempre es bienvenido en eventos como este. Sí, sí, estoy de acuerdo. De hecho, hubo, creo que tres o cuatro bibliotecas que intentaron este enfoque, como en el ecosistema de React también había ciertas colecciones de esos hooks, esas piezas que puedes instalar como un módulo NPM y luego usar, pero creo que VueUse ahora es la que domina y tiene las actualizaciones más frecuentes y la calificación más alta en estrellas, por lo que sí, actualmente es la que debes elegir. Sí, de hecho, también tengo una demostración con eso que te mostraré. Genial, así que hay una pregunta más de Ricardo. Entonces, preguntas de Ricardo, ¿qué elegirías, el antiguo enfoque de Vuex o el nuevo enfoque de Composables para gestionar el estado entre los componentes? Sí, es un poco demasiada poca información porque pones, es difícil decir una respuesta genérica. Mi opinión es que Vuex sigue siendo una buena opción para aplicaciones complejas porque Vuex es, digamos, un estándar bien conocido sobre cómo estructurar la lógica. Y se utiliza fácilmente, digamos, cuando pruebas tus componentes, ¿verdad? Simplemente puedes poner un estado simulado y verificar que los componentes se comporten correctamente, ¿verdad? Con los hooks, no obtendrás eso. Entonces, por supuesto, aún puedes probar los hooks y asegurarte de que el comportamiento sea similar, pero con Vuex, toda la infraestructura está ahí. Así que diría que si tu aplicación es lo suficientemente grande, confiaría en Vuex, pero es un hecho que también puedes hacer uso de Vuex junto con los componentes. Veremos eso en un momento. Por lo tanto, puedes llevar esta lógica de Vuex, lo siento, los accesores de Vuex a tus hooks. Aún funciona, ¿de acuerdo? Eso puede ser un poco inesperado, pero aún funciona. Por lo tanto, puedes acceder a ciertas partes de tu estado en tu hook y luego devolver solo esa parte. Por lo tanto, no son uno u otro. Son más como menos conectados entre sí. Por lo tanto, puedes elegir uno u otro, o ambos, diría yo. De acuerdo. Por último, pasemos a la demostración. Solo un aviso rápido. Tengo este enlace a estas diapositivas, estas diapositivas las puedes obtener casi ahora. Pondré rápidamente una copia en el chat. Aquí están las diapositivas. Es un PDF, y la demostración, los fragmentos de código que estaba usando, estaré usando, lo estaré usando, lo siento, están en este repositorio. Básicamente tiene dos partes. Tiene ejemplos, oh, vamos a abrirlo, así que tiene básicamente dos partes. Tiene los ejemplos. Puedo hacer clic en él. Acabo de crear un subárbol. De acuerdo, porque creé un informe separado en esta carpeta, ahora simplemente se hace referencia a un proyecto separado. Lo confirmaré rápidamente para que la carpeta de ejemplos también esté llena de contenido. De acuerdo. Solo estaba finalizándolo hoy. Olvidé algunas cosas. Genial. Otra pregunta de Ricardo. Entonces, preguntas de Ricardo, qué elegirías, el antiguo enfoque de Vuex o el nuevo enfoque de Composables para gestionar el estado entre los componentes. Sí, es un poco demasiada poca información porque pones, es difícil decir una respuesta genérica. Mi opinión es que Vuex sigue siendo una buena opción para aplicaciones complejas porque Vuex es, digamos, un estándar bien conocido sobre cómo estructurar la lógica. Y se utiliza fácilmente, digamos, cuando pruebas tus componentes, ¿verdad? Simplemente puedes poner un estado simulado y verificar que los componentes se comporten correctamente, ¿verdad? Con los hooks, no obtendrás eso. Entonces, por supuesto, aún puedes probar los hooks y asegurarte de que el comportamiento sea similar, pero con Vuex, toda la infraestructura está ahí. Así que diría que si tu aplicación es lo suficientemente grande, confiaría en Vuex, pero es un hecho que también puedes hacer uso de Vuex junto con los componentes. Veremos eso en un momento. Por lo tanto, puedes llevar esta lógica de Vuex, lo siento, los accesores de Vuex a tus hooks. Aún funciona, ¿de acuerdo? Eso puede ser un poco inesperado, pero aún funciona. Por lo tanto, puedes acceder a ciertas partes de tu estado en tu hook y luego devolver solo esa parte. Por lo tanto, no son uno u otro. Son más como menos conectados entre sí. Por lo tanto, puedes elegir uno u otro, o ambos, diría yo. De acuerdo. Por último, pasemos a la demostración. Solo un aviso rápido. Tengo este enlace a estas diapositivas, estas diapositivas las puedes obtener casi ahora. Pondré rápidamente una copia en el chat. Aquí están las diapositivas. Es un PDF, y la demostración, los fragmentos de código que estaba usando, estaré usando, lo estaré usando, lo siento, están en este repositorio. Básicamente tiene dos partes. Tiene ejemplos. Puedo hacer clic en él. Acabo de crear un subárbol. De acuerdo, porque creé un informe separado en esta carpeta, ahora simplemente se hace referencia a un proyecto separado. Lo confirmaré rápidamente para que la carpeta de ejemplos también esté llena de contenido. De acuerdo. Solo estaba finalizándolo hoy. Olvidé algunas cosas. Genial. Otro elemento de Andre. Espero pronunciar bien tu nombre, Andre. Correcto. Encontré que Pina es muy fácil, más pequeño con las hermosas herramientas, y el tres puede significar gestionar el estado sin, por ejemplo. Sí, Pina de hecho. Es uno de esos elementos que también se mostraron, creo que durante este evento. Y es una especie de biblioteca de gestión de estado pequeña y agradable, ¿verdad? Y creo que también hay un buen artículo que muestra esto en View School, si no me equivoco. ¿Estaba aquí? Estoy bastante seguro de que estaba aquí, pero. Sí, creo que hay un buen artículo al respecto que leí. Sí, muy bien. Pero nuevamente, depende, ¿para qué estamos construyendo? Lo probaría si fuera mi, digamos, un proyecto que acabo de comenzar y no es algo comercial al que ya esté comprometido a hacer y respaldar para los próximos trimestres, ¿verdad? Que tendrá más contribuyentes y como plazos reales. No se trata específicamente de Pinio, se trata de todo, digamos, un nuevo software que está surgiendo. Estoy bastante seguro de que harán un gran trabajo y funcionará, pero simplemente no me comprometería a usarlo para algo que tenga un plazo de entrega. De todos modos, quiero decir, es genial que los chicos estén experimentando con enfoques más livianos. Lo mismo ocurre, por ejemplo, con Vite, ¿verdad? La herramienta realmente agradable que también se mostró durante este evento. Y sí, es bastante sorprendente cómo podemos hacer mejoras en la configuración de desarrollo y no esperar como docenas de segundos y tener la salida transpilada directamente en tu navegador. Así que realmente espero que esto se convierta en una forma estandarizada de tener la configuración de desarrollo en lugar de cosas basadas en Webpack, genial. Sí, antes de pasar a la siguiente parte de la demostración, solo quería aclarar todas las partes de preguntas y respuestas. Tengo una pregunta de Dave que dice que ha escuchado que algunos desarrolladores de React están descubriendo después de usar hooks durante un par de años que no son una bala mágica, como pensaban que serían. Como los Composables aún son bastante nuevos en Vue, ¿cuál es la sensación en Vue, ha pasado suficiente tiempo? Bueno, en primer lugar, no soy un usuario diario de React profesional. Sí, tengo proyectos que usan React y más o menos me las arreglo. Pero no me consideraría una persona que realmente puede comparar todos los detalles y los pros y los contras de usar hooks en React. Entonces, sí, para mí, sí, la lógica basada en clases sigue siendo mucho más legible.

Adopción y Evolución de la API de Composición

Short description:

La tasa de adopción de la API de composición en Vue 3 está creciendo, especialmente en proyectos más grandes. Sin embargo, todavía existen algunas desventajas y problemas que pueden surgir al usar ciertos patrones impuestos por el framework. Es similar a la evolución de la sintaxis y organización del código en JavaScript, donde se realizaron mejoras sobre una sintaxis ya funcional. En general, se espera que la adopción y mejora de la API de composición en Vue 3 continúe.

Sin embargo, para casos típicos, simplemente recuerdo cómo se debe hacer. Pero si estuviera escribiendo algo complejo, probablemente tendría dificultades con los hooks. En cuanto a Vue, de hecho, fue, digamos, dos años tarde o tal vez, sí, como un año y medio después, se introdujo en Vue un concepto similar. Como intenté mostrar en esta comparación, este enfoque con piezas funcionales reutilizables que son utilidades funcionales que hacen uso de código reactivo. Pero aquí creo que la tasa de adopción aún no es tan alta. Y nuevamente, juzgando por este taller que estaba haciendo, creo que desde principios de año, la adopción está creciendo. Definitivamente, solo por esta parte introductoria en el chat que tuvimos al principio, se menciona mucho más a menudo la versión tres. Oh, lo siento, la versión tres mencionada, mucho, mucho más a menudo, pero aún no es más de la mitad, diría yo. Y también cuanto más grande es el proyecto, generalmente ahí es donde reside la complejidad y donde pueden surgir casos difíciles. Y ahí es donde puedes ver las desventajas de usar ciertos patrones que el framework impone. Así que sí, creo que el momento aún no ha llegado para ver esas desventajas, pero definitivamente habrá algunas mejoras o tal vez, como con cualquier otro enfoque, la comunidad suele evolucionar para encontrar soluciones utilizables sobre las cosas que no funcionan completamente. Saben, chicos, hace seis, siete años no teníamos clases, ¿verdad? Como estaba bien, la gente podía vivir sin ellas, teníamos todas esas construcciones, un poco personalizadas en cada proyecto, y la gente seguía escribiendo código, ¿verdad? Ahora tenemos una sintaxis bastante moderna y comprensible en el lenguaje, así que ahora solo estamos hablando de las piezas específicas en algún lugar a nivel de bibliotecas. Pero sí, mira lo lejos que estamos de lo que era antes de ES6, ¿verdad? Son mejoras sobre una sintaxis y organización de código que ya funcionaban bastante bien. Así que creo que estará bien.

Programando con Vue CLI y la API de Composición

Short description:

Tengo un proyecto generado con Vue CLI con la versión tres de Vue. Comenzaremos con un componente de contador simple para demostrar cómo usar el store en un proyecto moderno de Vue 3. La API de inicialización de Vue ha cambiado en la versión tres, utilizando la sintaxis de creación de la aplicación. Esto permite una mejor separación de la funcionalidad en diferentes instancias de Vue. La sintaxis de creación también se utiliza en otras herramientas dentro del ecosistema de Vue 3, proporcionando una convención de nomenclatura unificada. Creamos una instancia de la aplicación conectada a un store y un enrutador, y la montamos en el elemento de la aplicación. Comenzamos con un contador simple utilizando mutaciones y acciones. El contador es actualmente síncrono, pero más adelante podemos hacerlo asíncrono.

De acuerdo, por cierto, creo que no hay más parte de preguntas y respuestas, pero realmente fascinado por la cantidad de preguntas. Me alegra mucho, espero poder responderlas con contenido útil, al menos tal vez algunos enlaces o algunos elementos mencionados, puedes buscar más información sobre ellos y formarte una opinión sobre ciertos aspectos. Pero pasemos a la parte de programación.

¿Qué tenemos aquí, esto es diferente? Y tenemos, así que esto es... De acuerdo. Avísenme si el tamaño de fuente es suficientemente bueno, si se puede leer o no. Si es demasiado pequeño, díganme algo. De acuerdo, genial, gracias, Relly. Oh, solo una pregunta más de Bess. Podría ser útil para algunos de nuestros proyectos de Vue, el caché del cliente Apollo, GraphQL tiene completamente. Sí, un buen punto, Bess, por cierto, porque eso es algo que ocurre con bastante frecuencia, también sucede en el ecosistema de React. Según tengo entendido, el cliente Apollo trae todo tipo de partes no solo para consultar datos, sino también para almacenar en caché los datos y agregar ciertas piezas a nivel de cliente de datos que se derivan de los datos existentes y cosas así y son reutilizables. Esos componentes que hacen la consulta y todo eso. Y se encarga de una gran parte de la gestión de datos centralizada en las aplicaciones de Vue, al igual que en React. Sí, también he oído hablar de eso, sí. Así que tal vez quieras pensar en qué quieres usar al final para tu... Solo si estás usando GraphQL, ese es el punto. Porque el cliente Apollo es específicamente, estoy hablando de GraphQL aquí. Genial.

Sí, aquí tengo un proyecto generado por Vue CLI que actualmente tiene la versión tres de Vue. Como mencioné, es una versión principal más reciente que VueX y las versiones del enrutador que usaremos en él. Tiene todas esas cosas, es bastante estándar. También instalé VueUseCore para mostrar algunos de los elementos. También agregué algo de CSS de Bootstrap para que se vea un poco mejor. Y aquí tengo un pie de página solo para demostrar algunas de las características. No se hicieron más modificaciones. De acuerdo, veamos qué tenemos. Creo que puedo simplemente comenzar, simplemente comenzando el proyecto, así de simple. Solo dos advertencias rápidas. ¿Todos se sienten cómodos usando Vue-CLI? Porque creo que eso es, digamos, la base para el desarrollo productivo de Vue. También es parte de estas herramientas principales que forman el ecosistema y creo que saber cómo usarlo es importante para ahorrarte mucho tiempo en la configuración. Así que si alguien nunca lo ha usado, si tienen más comentarios al respecto, puedo mostrarlo rápidamente, pero espero que ya sepan cómo usarlo. Genial. No se mencionó nada especial, eso es bueno. Tengo una aplicación llamada sysdemo, en la que solo reemplacé todos estos enlaces con un poco de texto para que se vea más personalizado y realmente he preparado algo. Así que comencemos con algunos ejemplos, déjame verificar rápidamente esto. Oh sí, está aquí. Así que comencemos simplemente con un ejemplo simple como suele suceder, que escribimos alguna lógica con estado, algún elemento que almacenará los datos en Vuex. Tal vez primero en el componente y luego en Vuex y luego pasemos a cosas más complejas. Comenzaré con un componente que usará un contador. Por supuesto, comencemos con el ejemplo más simple, pero solo para mostrar la idea de qué partes deben implementarse para usar el store en una biblioteca moderna de Vue, ¿de acuerdo? Proyecto moderno de Vue 3. Pero no pienses que solo hablaremos del contador, solo es para agregar algo de código. De acuerdo. Antes de comenzar a agregar el código, algunos elementos adicionales. Cómo cambió la API de inicialización de Vue en la versión tres. Como solíamos tener la versión anterior de NuVue, ¿verdad? Y luego ponías el elemento y luego la función de renderizado y cosas así. Así es como se hacía en la versión dos. Aquí puedes ver que ya está utilizando la sintaxis de la versión tres y utiliza esta sintaxis de creación de la aplicación. Y creo que es realmente bueno, y no solo porque tiene ciertas mejoras en términos de separar los diferentes conceptos de las diferentes instancias de Vue. Porque anteriormente, con esta sintaxis, no era posible separar la funcionalidad que estás usando. Que estás agregando a diferentes instancias de Vue porque si agregabas un componente personalizado o un complemento, entonces se agregaba a todas las instancias en el ámbito. Sin embargo, con esta nueva lógica, cada aplicación tendrá su propia lista de elementos, su propia lista de cosas que se agregan a ella. Por lo tanto, puedes tener uno aquí, la segunda aplicación aquí. Y por ejemplo, si la segunda aplicación no necesita un enrutador, entonces lo hará así, y luego los paquetes resultantes no contendrán el enrutador en ambos. Esta sintaxis no permitía esto, pero es una buena mejora. De hecho, hay un artículo que lo explica con más detalles en el sitio web de Vue School, así que puedes echar un vistazo para obtener más explicaciones. Sin embargo, esta sintaxis de creación, comenzando con la palabra create, y luego hacer algo, también es común para otras herramientas dentro del ecosistema de Vue 3. Entonces, si observas la inicialización del store, también utiliza create store en lugar de new store. Y para el enrutador, hace lo mismo, crea enrutador, este patrón común también me parece una buena unificación de cómo se llaman ciertas cosas. Y tal vez también sea algo en lo que debas pensar si estás escribiendo tus propias partes personalizadas, tal vez complementos o algo así, también puedes hacer uso de las mismas convenciones de nomenclatura, ¿verdad?, para crear una función de inicialización con una nomenclatura similar, solo para que todos entiendan, okay, este es el punto de entrada, ¿verdad? De acuerdo, de todos modos, aquí estamos creando una instancia de la aplicación que está conectada a un store en el enrutador y la montamos en el elemento de la aplicación. En el store, no tenemos nada por ahora, así que comencemos con un contador simple nuevamente, es muy, muy común. Pero nuevamente, ten paciencia, más adelante haremos algo más divertido, ¿de acuerdo? Tendremos una mutación que básicamente aumentará el contador, ¿verdad? Y comencemos también con una acción, de acuerdo. Cómo se implementará aquí, que las acciones, como sabemos, sirven para el propósito cuando necesitamos lógica asíncrona. Y en este caso, simplemente podemos pasar commit como primer argumento y luego podemos llamar a commit cierta mutación, ¿verdad? Por ahora, este contador es totalmente síncrono, no tiene que hacer mucho, pero más adelante podemos hacerlo asíncrono.

Usando el Store y Extrayendo Lógica

Short description:

Para utilizar los valores reales del contador en el componente, crea un nuevo archivo e importa computed y use store en la función de configuración. Utiliza el hook store para acceder al store y recuperar los valores del contador. Retorna los valores que deseas utilizar en tus elementos DOM. Coloca el componente en la ubicación deseada, como la página de inicio. También puedes utilizar acciones llamando a dispatch directamente desde el objeto store. Extrae la lógica de la función de configuración en un archivo separado, como un hook. Utiliza el hook para acceder al contador y recuperar los valores. Puedes personalizar qué valores utilizar en tus componentes, según tus requisitos.

Entonces, este es el estado muy simple. Ahora, si queremos utilizar los valores reales del contador en el componente, crearemos un nuevo archivo. No olvides utilizar extensiones para tu ID de elección, porque eso también facilita y acelera tu vida. Estoy usando vetour, hay más herramientas agradables, pero esta, creo, es la más popular en este momento. Creará piezas predeterminadas para mí. Ya importé las cosas necesarias para no perder tu tiempo. Importaré computed y use store para que podamos usarlo en la función de configuración. En esta función de configuración, primero utilizaremos el store usando este hook store. Y luego, como mencioné anteriormente, podemos utilizar los elementos que obtenemos del contador para leer los valores e incrementarlos. Y lo importante que mencioné es devolver las cosas que deseas utilizar en tus elementos DOM. Así que simplemente copiaré eso aquí. Sí, veo que alguien levantó la mano, lo abordaré en un momento. Solo un ejemplo aquí, algún marcado aquí, así que tengo un botón y el valor aquí debería funcionar. Permíteme ver. Y, por supuesto, necesitamos colocar este objeto, este componente en algún lugar. Así que comencemos simplemente colocándolo en la página de inicio. Eso probablemente debería funcionar. Solo comentaré el ejemplo de Hello world. Aquí tenemos el contador y al presionar un botón, incrementamos el valor, ¿verdad? Así de simple. También podemos ver que está sucediendo en nuestras herramientas de desarrollo. También, en cuanto a las herramientas de desarrollo, asegúrate de tener una herramienta de desarrollo diferente. Me refiero a que ahora admite la versión tres, pero hubo un momento en el que no admitía ambas versiones y solía ser dos versiones principales diferentes de una API del navegador o también una extensión del navegador. Y si estás utilizando la versión anterior de la extensión del navegador, es posible que no detecte la nueva versión. Así que tal vez quieras instalar otra. Si miro mi lista de extensiones en Chrome, verás que tendré dos versiones debido a eso, pero tal vez ahora ya admita ambas. Necesito encontrar dónde está esta mano levantada. No a propósito. De acuerdo, genial. Bien. Sí, usemos principalmente el chat para señalar. De acuerdo. Un ejemplo muy simple, solo para ampliar un poco esto. También podemos, dado que tenemos un contador y tenemos una mutación y tenemos una acción. Entonces, desde el componente aquí estamos utilizando una mutación, pero si queremos utilizar una acción, también podemos hacerlo. Nuevamente, desde el objeto store, puedo llamar a dispatch directamente y me dará el elemento que necesito en el incremento del contador. Y luego podré hacer esto utilizando una acción. Así que aquí ya estoy llamando a una acción. Entonces, en tus componentes, simplemente utilizando el objeto store que se devuelve de new store, puedes acceder a ambas formas de mutar tu estado. ¿Cuál es el siguiente paso con esto? Por supuesto, podemos colocarlo en otro lugar, digamos, fuera y utilizar un hook que nos traerá el contador. Y esto es, nuevamente, como mencioné, toda esta lógica que ocurre en la función de configuración, debe permanecer aquí. Debe ir a un archivo separado. Y eso es lo que vamos a hacer ahora. Comenzaremos con un ejemplo de contador y luego construiremos más modelos, más datos en la aplicación. Crearé una carpeta de hooks. Y crearé un ejemplo de contador de usuario. Básicamente, solo copiaré todo, es más fácil. Dado que todavía tengo solo esto en mi función de configuración, es más fácil. Solo... Y lo llamaré UseCounter, nuevamente por convención. De acuerdo, lo que me falta, por supuesto, son esos chicos. Deben estar aquí, ¿verdad? De lo contrario, no tengo un computed o store. Ahora puedo reemplazar todo eso con la importación de mi nuevo hook. Usaré esta autocompletación, porque con el asterisco no funciona y siempre olvido el nombre. Normalmente deberías usar el asterisco, por supuesto. El use counter y se irán. Así es como extraemos todas esas cosas, incluido el uso de VUEX, en ese componente, en ese hook. Y ahora podemos tener la misma funcionalidad que sigue funcionando. ¿Verdad? Veamos si algo se rompe o algo se rompe. UseCounter no está definido, porque no lo importé. UseCounter. UseCounter no está definido. De acuerdo, la funcionalidad sigue funcionando de la misma manera. Lo bueno de esto es que podemos... es posible que no necesitemos todos los elementos de aquí, solo estamos utilizando Increment With Action, por lo que solo podemos tomar esos dos y solo usar esos dos, ¿verdad? Y estaremos bien, ¿verdad? O si tenemos otro componente donde solo queremos usar el valor, ¿verdad? Solo consumimos el valor del store, sin incrementarlo. También podemos hacer eso bastante fácilmente. Por ejemplo, si lo coloco aquí, digamos...

Utilizando el Valor del Contador y Trabajando con Props

Short description:

Y solo usaré el valor, no otras partes, ¿de acuerdo? Probablemente esto, así que ahora tenemos acceso al contador aquí y solo importamos el valor del contador porque no necesitamos el resto, ¿verdad? Esta característica recién agregada, digamos que es una nueva característica, podemos agregarla a los valores exportados y cuando la necesitemos en algún lugar, simplemente podemos pedirla en esta desestructuración y luego hacer uso de ella en la plantilla. El valor del contador es de solo lectura. El componente muestra un producto en el catálogo, con una propiedad de precio personalizada y una función de emisión. La lectura de props se puede hacer de diferentes formas, como desde el primer argumento o utilizando un enfoque más moderno. El componente padre demuestra cómo pasar datos a los componentes hijos, similar a Vue 2. También se mencionan brevemente el componente hijo y el componente de lista.

y solo usaré el valor, no otras partes, ¿de acuerdo? Probablemente esto, así que ahora tenemos acceso al contador aquí y solo importamos el valor del contador porque no necesitamos el resto, ¿verdad? Así que será así y luego seguirá funcionando tanto aquí como aquí, ¿verdad? Y por supuesto, si seguimos extendiendo el contenido de este hook, como estaba en mis diapositivas, como queremos tener, digamos, alguna función computada que haga algunas modificaciones de este valor, aún podemos hacerlo. Esta característica recién agregada, digamos que es una nueva característica, podemos agregarla a los valores exportados y cuando la necesitemos en algún lugar, simplemente podemos pedirla en esta desestructuración y luego hacer uso de ella en la plantilla. Así que probablemente sea porque el valor inicial era una cadena o algo así. Eso no era una cadena, así que Y me da ninguno. probablemente contador. Esa es la trampa de la que estaba hablando. Pero el problema es que este objeto es algo a lo que necesito referirme por un valor, y luego, podré obtener el valor real de él, ¿verdad? Así que aquí tenemos un contador con algunas características adicionales, y creamos un hook separado a partir de él, y este hook será reutilizable en otros componentes, así como este, ¿de acuerdo? Así que eso es solo para empezar. Ahora agreguemos otra característica que es trabajar con eventos, así que cómo puedes, sí, hacer uso de emit en la versión de viewtree. Para eso, necesitaré crear algunos componentes más. Pero antes de hacer eso, responderé rápidamente las preguntas. Entonces, Adriano preguntó, ¿estás usando white? No, no estoy usando white. Y algo más, hablando de white, también hay un repositorio agradable que realmente usa white, y muestra muchas características nuevas. Esa demostración es mucho mejor de lo que podré crear durante esta masterclass. Este, por favor, échale un vistazo, dale una estrella, y este tipo es realmente increíble por haberlo creado. Se llama Vue 3 Playground, y contiene, como, cada una de las... casi todas las características que tiene Vue 3. Que puedes abrir el fragmento de código, ejecutarlo, romperlo, ya sabes, ajustarlo y aprender haciéndolo, así que es un repositorio increíble. Y este usa en realidad white. De acuerdo, la segunda pregunta de Adriano, ¿puedes modificar el valor del contador en el componente donde se importa? De acuerdo. Entonces, ¿aquí, verdad? Si solo importo el valor real, esa es la pregunta. Entonces, sí, podemos ver qué sucederá, ¿verdad? Crearemos una función que cambiará el valor, y verás cómo reacciona. De acuerdo. Crear función. Importamos aquí y luego borramos el botón. Aquí tenemos este botón de cambio. Entonces, ves, tal vez olvidé algo. Cambiar. Cambiar. Cambiar. Así que no hace nada aquí porque, si intentamos hacerlo así, simplemente te dará esto, eso es lo que quería mostrar. Dice que el valor del contador es de solo lectura. Entonces, lo que obtenemos de aquí es algo que ya puedes cambiar directamente. Sí. De acuerdo. Siguiendo adelante. Eso es para el ejemplo simplificado del contador. Creemos más cosas y experimentemos con ellas. Usaré esta demostración, que es un componente que muestra, como, un producto en el catálogo. Así que lo crearé aquí. Este componente es bastante sencillo. Tiene un nombre y tiene una propiedad de precio para que puedas configurar tu producto dándole un precio personalizado. Emite un evento. Es solo el nombre del evento. Puede ser cualquier cosa en lugar de signal. Y utiliza la composición de viewtree, y aquí puedes ver cómo usamos la función emit, ¿verdad? Entonces, usamos los props. Recuerdo que había una pregunta sobre los props. Correcto. ¿Cómo se usan los props? Aquí está el ejemplo, ¿verdad? Leyendo los props desde el primer argumento, también se puede hacer, de una manera más moderna, como algo así, precio. Y luego, simplemente lo tomas de ahí y luego lo usas. En este caso, o puedes usarlo, en otro lugar en el código, para hacerlo más utilizando el mecanismo de propiedades simples. Para pasar los datos desde un componente padre. Ahora necesitaré recrear rápidamente el componente padre también para explicar. Entonces, aquí estoy usando la sintaxis de un componente definido. Puedo ver eso. Sí. Mira esto. Esto es a propósito para que yo, um, eso es todo. Puedes, no hace más que el export default normal sin este envoltorio, pero es más beneficioso en términos de, um, el soporte de TypeScript y las herramientas de ID. Así que eso está bien. Haré una última cosa. Para que pueda crear rápidamente, um, una imagen, um, que luego puedo tal vez, um, ser útil para hacer eso. Entonces, este es un componente hijo y también crearé, um, um, componente de lista aquí. Para eso, recrearé rápidamente mis pantallas. De acuerdo. Crearé rápidamente una pantalla más aquí. Um, y entonces, ¿qué tengo? Tengo un componente padre que solo tiene, como, un título de catálogo y coloca dos elementos hijos. Quiero decir, pueden ser más, pueden ser menos elementos y solo muestra la forma en que podemos pasar propiedades. Es bastante similar a cómo lo hicimos en Vue 2. Por supuesto, también podemos hacerlos más dinámicos al agregar, como una propiedad data en algún lugar aquí.

Utilizando Múltiples V-models y Emitiendo Eventos

Short description:

Podemos pasar propiedades utilizando la sintaxis de valor de propiedad dinámica. Se ha creado una nueva página con tres elementos de producto. Se muestra la suma de los valores y cuando se presiona el botón 'Agregar al carrito', se registra un evento en el componente padre. La función de configuración permite reemplazar un objeto de métodos con funciones. En Vue 3, se pueden utilizar múltiples V-models para enlazar diferentes propiedades. El componente childAdvanced demuestra esta funcionalidad al tener propiedades separadas para el precio y la cantidad. La variable emit se utiliza en el componente hijo para emitir eventos al padre. La propiedad 'emits' se utiliza para declarar los eventos emitidos por el componente.

También podemos, por supuesto, pasar las propiedades utilizando la sintaxis de valor de propiedad dinámica, ¿verdad? Así que he creado esta página. Ahora agregaré esto rápidamente al enrutador. Y el último paso es agregar el enlace a esto. En realidad, para agregar más enlaces, tengo, déjame hacerlo aquí. Eso es demasiado. Entonces, ¿qué, qué olvidé, olvidé el precio. El precio ya ha sido declarado. Probablemente aquí. Oh sí. De acuerdo. Eso es porque, sí, estamos importando el mismo nombre. Así que será como precio interno, por ejemplo. Y luego lo verás aquí. Pero si no queremos cambiar el nombre en la plantilla, podemos usar la asignación así. Y luego puedes mantener el nombre original en la plantilla. Esto no debería ser un problema. Espero que ahora el problema haya desaparecido. Entonces, ¿qué tenemos aquí? Una nueva página, que tiene tres elementos de producto. No se ve muy elegante, pero captas la idea. Tenemos la suma de los valores. Y luego, cuando agregamos al presionar el botón agregar al carrito, obtenemos el evento. Y este evento también se registra en nuestro componente padre mediante una simple función de registro. Así es como también puedes reemplazar un objeto de métodos con las funciones que residen en tu función de configuración. Sin embargo, si digamos en una etapa de migración de algo grande, aún puedes tener un objeto de métodos. Eso no es mutuamente excluyente todavía. Así que puedo tener un objeto de métodos y poner aquí, digamos casi lo mismo, ¿verdad? Registro, y aún puedo hacerlo aquí. El único problema, por supuesto, es que anulará la función de registro existente. Pero solo para mostrar la compatibilidad, seguirá funcionando. Así que puedo registrar los valores de la misma manera, mientras uso los métodos antiguos, ¿verdad? Pero eso es solo para mostrar. Vuelve a este, de nuevo. ¿Por qué vuelvo a este? Porque puedo extraerlo y usarlo de una manera más agradable, ¿verdad? Entonces, aquí estoy pasando, como, en Vue 2, el valor, y está bien. Lo que quería mostrar es que actualmente tenemos un componente relativamente simple que solo tiene un parámetro de precio, ¿verdad? Pero normalmente probablemente tendrías múltiples campos que necesitas configurar. Y podemos hacerlo de muchas maneras, ¿verdad? Podemos pasar, como, definir un precio. En lugar de un objeto de precio, podemos tener, como, alguna propiedad llamada, digamos, config, y eso será, como, algún objeto que tendrá todas las cosas en él. Eso está bien. Eso funciona si no cambias cada uno de los valores por separado. Pero si los valores están cambiando, tal vez cambiados por separado, entonces la nueva y agradable característica de la versión 3 es el llamado múltiple V-models. Así que ahora podemos, cuando tenemos un componente con una propiedad, también podemos establecer el valor del V-model y cambiarlo desde el padre, ¿verdad? Creo que ese es un enfoque conocido. Entonces puedes hacer, como, V-model-precio, y luego asignarle algún valor. Digamos... Y luego, junto con cambiar esto, tu modelo también cambiará, ¿verdad? Pondremos, por ahora, digamos, 100. Y luego, solo para mostrar que está cambiando, lo pongo aquí. Y luego, si lo cambio aquí... Oh, ahí está... Un segundo. ¿Por qué está cambiando esto? Porque se estaba volviendo a representar aquí, por supuesto. Eso es lo que quería mostrar. Como, si... Al revés, por supuesto. Si pongo el valor aquí, entonces este valor se propagará al componente, ¿verdad? Y si cambio este valor en el padre, también se propagará en el componente. Antes de la versión 2, solo era posible un V-model. Sin embargo, en la versión 3, puedes tener múltiples V-models en un componente para enlazar diferentes propiedades. Y para eso, crearé un componente separado que tendrá esto implementado. Esta vez, solo estoy copiando y pegando más cosas para no tener que escribir lo mismo. Y se ve un poco mejor. Cerraremos el resto. Y aquí, usaré el childAdvanced. Y para este childAdvanced, puedo configurar múltiples modelos de esta manera. Entonces, childAdvanced tiene más propiedades. Tiene un precio y una cantidad, como dos variables numéricas que pueden cambiar por separado. Y ahora puedo configurarlos, enlazarlos a valores específicos en mi ámbito padre utilizando dos V-models que apuntan a los elementos específicos, ¿de acuerdo? No es directamente, digamos, parte de la API de composición, pero es algo que Vue 3 agrega. Entonces, este último producto aquí, tiene, déjame separarlo un poco. Entonces, este último producto, tiene dos valores en él. Y esos valores se establecen desde el padre y puedes rastrear esos cambios. Eso es para el emitir, cómo hacer la emisión en el hijo utilizando la variable emit del contexto. Y también un elemento importante, debes declarar qué eventos emite tu componente. Como ves aquí, tengo esta propiedad emits. Como si creara otro evento diciendo, no aquí, pero veamos, creo un evento aquí diciendo algo así, entonces debería obtener una advertencia porque eso es, espera, es, creo que solía haber una advertencia. Ahora no estoy seguro, nada, estoy bastante seguro de que había alguna explicación que solía tener una advertencia en este caso, pero luego está verificando qué elementos estás declarando en el emit. Extraño, tal vez por esto. De acuerdo.

Preguntas y Respuestas: Carga de Datos y Búsqueda

Short description:

Responderé las preguntas sobre reemplazar el bloque de datos con Reactive, el uso de define component y el soporte para la sintaxis de estilo de clase en Vue. Luego, pasaré a la parte de carga de datos de la demostración, donde mostraré la configuración para cargar datos con la API de Composición de Vue 3. Crearé una carpeta de repositorio para las llamadas a la API utilizando el backend de demostración de JSON placeholder. A continuación, crearé un componente de carga de datos que cargará los datos utilizando una plantilla de tarjeta. El componente contendrá un elemento reactivo para realizar un seguimiento del estado de carga y permitir la extracción en componentes separados. Comenzaré con una versión simple utilizando ref para almacenar los datos cargados y una función para cargar los datos de forma asíncrona. El gancho del ciclo de vida se utilizará para ejecutar la consulta de datos cuando se renderice el componente. Los datos de usuario se devolverán y mostrarán en la plantilla. También agregaré una barra de búsqueda para demostrar la búsqueda dentro de la lista de usuarios.

De acuerdo. No importa. Pero no evites declarar todos los eventos que tienes en tus componentes hijos. Esa es una propiedad específica que tienes ahora en tu declaración. Tal vez se verifique durante el tiempo de compilación o algo así. Estoy seguro de que tiene algunas comprobaciones.

De acuerdo. Eso es todo. También vi un par de preguntas y sí, antes de pasar a la siguiente parte de la demostración, que trata sobre la carga de datos, responderé la pregunta. Así que por favor, colóquenlas en la sección de preguntas y respuestas o escríbanlas en el chat. O todos ustedes fueron a verificar este enlace de GitHub. Y realmente vale la pena. Replica muchas cosas similares a las que estoy hablando durante esta masterclass. Así que las preguntas. Comenzando por la pregunta de Martin, ¿se puede reemplazar el bloque de datos por Reactive? ¿Se puede reemplazar el bloque de datos por Reactive? Supongo que te refieres a este bloque. Sí, se puede reemplazar. Sí, es verdad. Lo único que quiero decir, si tú... Sí, sí, absolutamente se puede reemplazar. Así que podemos mover todas esas cosas aquí. Así, y luego solo recordamos esto, esa función unref que estaba en una de las diapositivas, así que también podemos hacer uso de ella aquí, ¿verdad? Y luego tendremos los mismos valores aquí y aquí. Así que sí, ese es un cambio totalmente válido, sí. Otra pregunta, de Steve. ¿Por qué se necesita un componente definido aquí pero no en el ejemplo del contador? Sí, eso es como mencioné. Solo tenía diferentes formas de definir componentes solo para mostrar que hay diferentes soluciones. Solo por eso, puedes vivir sin un componente definido o puedes usar un componente definido en todos los casos. Eso se puede usar indistintamente. Solo el hecho de que el componente definido agrega un mejor soporte para el IDE y TypeScript. De acuerdo, y una pregunta más de Luca. ¿Sabes si hay algún plan para admitir la sintaxis de estilo de clase en Vue también? Sintaxis de estilo de clase, ¿te refieres a la definición de componentes, supongo? ¿Como en Vue 2, este envoltorio para TypeScript, ¿verdad? Sí, no tengo idea. Sinceramente, conozco este enfoque que mencionas con las anotaciones para hacer que tu código de Vue 2 sea lo más tipado posible, pero sí, no tengo idea de cuál es la hoja de ruta para esto ahora. De acuerdo, bien, ahora, si no hay más preguntas, pasemos a la parte de carga de datos donde crearé algunos componentes más para mostrar la configuración típica para cargar datos con la API de Composición de Vue 3. Para esto, necesitaré, crearé una carpeta de repositorio simple que contendrá mis llamadas a la API. Para esto, solo usaré el backend de demostración de JSON placeholder, así que si nunca lo has visto, échale un vistazo. Es una buena herramienta para jugar con algunos datos estáticos, como tiene esos elementos que puedes consultar si solo quieres verificar si tu fetch funciona o si tu código funciona correctamente, así que nos proporciona datos estáticos. Creo que también puede proporcionar un elemento por ID de esta manera, por lo que puede cargar una lista y un solo elemento en tu código, así que lo usaré para la demostración. Aquí solo coloqué el punto final de la API base y tengo algunos fetchers para diferentes tipos de datos. Luego usaré uno de ellos para más cosas. Sí, buen punto Andrei. Como dije, para esto necesitaré comprometer el estado actual. Haré esta parte de la demostración y luego me ocuparé de eso, ¿de acuerdo? Aquí creamos un archivo de repositorio que realizará una carga de datos para nosotros. Luego crearé un componente de carga de datos que, sí, básicamente cargará los datos. Copiaré algunas partes. Me pediste nuevamente que creara una plantilla de carga de datos que realizará una carga de datos. Como voy a usar los datos de usuario, usaré la plantilla de una tarjeta que se usa en Bootstrap, como un bloque típico con información, y aquí tendremos la definición de nuestro componente. Así que ese es el comienzo, ahora lo que vamos a hacer, vamos a crear un indicador que contendrá los elementos y que también realizará un seguimiento, por ejemplo, del estado actual de carga, y luego también podremos extraer todas estas cosas a, por ejemplo, componentes separados y también hacer uso de filtrado y cosas así. Así que comencemos con una versión simple donde copiaré, crearé un objeto utilizando ref que contendrá los datos cuando se carguen. Crearé una función que está cargando datos. Es una función sincrónica que utiliza await en su interior para cargar los datos, ¿verdad? ¿Qué más tenemos aquí? Tenemos el gancho del ciclo de vida. Se utilizará el gancho del ciclo de vida cuando se renderice el componente. Ejecutará la consulta de datos. Y por último, solo necesitaremos devolver esta información, ¿verdad? Solo estamos rastreando los datos de usuario y eso es lo que queremos devolver actualmente. Así que solo los datos de usuario y eso debería ser, creo que solo olvidé algo de marcado. Oh no, el marcado está aquí. Así que estoy tomando el usuario de los datos de usuario y luego muestro el nombre de usuario, la ciudad del usuario, y blah, blah, blah. Nuevamente replicaré una nueva página. Así que tenemos más elementos en la demostración entre los que puedes cambiar. Ahora tenemos una nueva página llamada carga de datos y ya se han cargado algunos datos. Veamos cómo sucede. Básicamente, cuando actualizo la página, debería haber una llamada a los usuarios que me devuelve la lista de usuarios. Y luego tienes esta lista de usuarios, ¿verdad? Esa es una implementación bastante sencilla donde simplemente estamos solicitando crear una función que realizará la operación sincrónica y luego se llamará durante la parte desmontada. Eso es bastante sencillo. Entonces, lo que podemos querer hacer en el futuro, por ejemplo, si tienes una lista de usuarios y necesitamos buscar dentro de esta lista algún dato adicional, podemos hacerlo. Por ejemplo, podemos agregar la capacidad de buscar en esta lista. Para eso, por ejemplo, podemos crear una barra de búsqueda en la parte superior que realizará una... Podremos buscar usuarios. Ahora no hace nada, pero vamos a implementar esta búsqueda.

Implementando Funcionalidad de Búsqueda

Short description:

Creamos una referencia para almacenar el valor de búsqueda e implementamos una lógica para filtrar los datos de usuario cargados en función de la consulta de búsqueda. La búsqueda es totalmente reactiva y se puede realizar en la lista de elementos cargados. La lógica utiliza una función computada para filtrar el array en función del valor del campo de búsqueda. La búsqueda se puede realizar tanto en la lista cargada como en el componente en sí. El ejemplo muestra cómo cargar datos desde una llamada asíncrona a la API del backend e implementar la funcionalidad de búsqueda.

Entonces, lo que tenemos aquí, podemos obtener para la búsqueda, creamos una referencia que realizará, que almacenará el valor. Ahora mira esto, he creado una variable de búsqueda, una constante en este caso, y la estoy usando aquí para un modelo V, pero no la estoy devolviendo, y por eso también obtengo la advertencia. No olvides devolverlo, así que devolverlo aquí. Por ahora, lo hemos conectado al modelo, pero aún no hace nada, ¿verdad? Si miro en mi inspector en las herramientas de desarrollo de vista, voy a datos de usuario cargados, veo que tengo datos de usuario cargados, todos los elementos están aquí, y la búsqueda es totalmente reactiva, pero no tengo ninguna lógica que realmente busque. Así que implementemos esta lógica primero. Podemos crear, por ejemplo, una nueva lista que almacenará los valores, o simplemente podemos crear una función que modificará la lista existente. Así que tengo esta variable aquí llamada usuarios que coinciden con la consulta de búsqueda, y utilizará una función computada que dentro hará solo el filtrado contra cada elemento del array. Y aquí, lo que estoy haciendo, estoy tomando los datos de usuario, los valores que se cargan durante la llamada al backend, y luego hago el filtrado, y hay un callback para el filtrado. Paso básicamente un comprobador que va a cada elemento y verifica si sus nombres incluyen el valor del campo de búsqueda, ¿verdad? Eso es bastante sencillo. Solo ten en cuenta nuevamente, el uso del valor aquí y el uso del valor aquí porque este es un ref de elementos que necesitas, necesitas tener este punto valor para acceder a sus datos. ¿De acuerdo? Así que ahora estoy comprobando la actualización cargada. De acuerdo, rompí algo, por supuesto, porque no tengo computado importante. Eso es triste. Así que tengo la lista de usuarios cargados inicialmente y ahora intentaré buscar, por ejemplo, Path 3, supongo que puedo, debería, por supuesto, estoy tomando el valor y luego puedo usar este valor en mi marcador de componente, poniéndolo aquí. Solo por ahora, tengo todos los elementos y luego busco el primero, por ejemplo, el Yen, no estoy haciendo la conversión de mayúsculas y minúsculas solo por simplicidad. Así que mantengámoslo así por ahora. Entonces, Yen, obtienes un elemento. Y si escribo algo sin sentido, no mostrará ningún elemento. Entonces, si solo uso Lee, tendré varios elementos porque hay un par de usuarios con un nombre similar. Esta es una búsqueda en la lista cargada de elementos. ¿Qué pasa si lo hago aquí? Lo pondré así. Y luego, si elimino esta salida JSON, todavía puedo hacer la búsqueda aquí, ¿verdad? Así que funciona en ambos sentidos, puedo cargar la lista y también puedo buscar en ella después de que se carguen los datos. De acuerdo. Ese es un ejemplo simple que implementa la búsqueda.

Seguro, sí, pensé que le agrega algo de enfoque, pero seguro, puedo desactivarlo por ahora. Sí, ese es un ejemplo con la carga de datos desde una llamada asíncrona a la API del backend y la búsqueda en ella. Mantendré esa pantalla por un segundo, tal vez por un par de minutos, para que puedas echar un vistazo y hacer preguntas si las tienes, mientras arreglo el problema con el repositorio, y luego continuaremos, ¿de acuerdo? Solo dame dos minutos, si no me lleva más tiempo, y luego continuaremos. Mientras tanto, por favor, si tienes preguntas sobre la parte inicial con la teoría, o tal vez sobre los ejemplos prácticos que mostraré, no dudes en ponerlas en la sección de preguntas y respuestas o escribirlas en el chat. Volveré a ti tan pronto como termine con el repositorio, ¿de acuerdo? Además, considerémoslo como una especie de pausa rápida para volver a llenar tu café, cola, agua o cualquier actividad sanitaria, ¿de acuerdo? Pero te mostraré lo que tenemos en la lista de XFDA, para que puedas usar esa cosa para obtener fácilmente tu bebida y agua. Cómo lo hacemos es, ponemos todo en el orden escaneable y luego lo subimos a la excusa. Así obtenemos una lista de XFDA, y el XFDA simplemente coloca los detalles en el orden escaneable. ¿De acuerdo? Así que acabo de arreglar esa parte, y ahora las fuentes... lo siento, la carpeta de ejemplos, contiene todos los elementos que mostraré durante el taller, y tal vez incluso más de los que podré mostrar durante esta presentación. Así que por favor, si quieres seguir viendo el código, puedes verificar esta URL y clonarlo y hacer uso de él. ¿De acuerdo? Solo si ya lo bifurcaste, asegúrate de obtener la última versión. Así que démosle un minuto más y luego continuaremos con el resto de la demostración. De acuerdo. Así que estoy de vuelta y continuemos con el resto de las demostraciones. En primer lugar, quería dejar espacio para las preguntas sobre los elementos ya mostrados, como cómo cargamos datos, cómo creamos nuevos hooks, y cosas así. Si hay algún elemento específico, por favor, ponlo en la sección de preguntas y respuestas o pregúntalo en el chat. Intentaré responder de inmediato. De acuerdo, sigamos adelante. Lo que voy a mostrar ahora es la parte sobre cómo usar realmente esta biblioteca Vue Use que mencioné en las diapositivas. Es una pieza de software realmente genial que es útil para realizar muchas de tus tareas de código habituales. Y eso es lo que tengo aquí en un archivo separado que agregaré rápidamente a mi página. Oops... Un momento... Así que solo usaremos una página de inicio para este experimento solo porque es más rápido. Ahora comentaré el contador. Primero, el de las variables CSS. Todos saben qué es una variable CSS, ¿verdad? Es como un valor determinado que se establece en el CSS, generalmente en el elemento raíz o en la raíz del contenedor, y luego puedes usarlo en otros bloques dentro del CSS. Ahora, una parte interesante es que también puedes cambiarlo. Y para eso, Vue.Use tiene un hook llamado useCSSVar. Y lo hace así, le proporcionas el nombre de una variable y un enlace ref, el elemento que estará rastreando. Específicamente, creé la variable CSS aquí en la raíz de mi demo, un archivo HTML de demostración. Y para este selector raíz, he colocado una variable llamada color y esto usa el valor de azul, un bonito color azul. Así que vamos a acceder a esta variable dentro de nuestro componente. Ya lo tengo aquí. Entonces, lo que voy a hacer, solo necesito devolverlo. Básicamente, esos elementos se describen en parte en la documentación. Es más para darte más ejemplos de cómo se puede usar la API de composición y también cómo se pueden usar otros hooks personalizados. No es algo que no puedas probar tú mismo. Es más solo ejemplos que puedes reproducir rápidamente. Y aquí puedo usar la variable color para establecer el color en el bloque de estilo en línea o simplemente imprimirlo si quiero. Así que ahora, si lo intento, probablemente olvidé poner algo, por supuesto, olvidé la referencia. Ahora ves que tengo el color y se toma exactamente del CSS que está aquí en nuestra etiqueta de estilo. Así que el color está aquí y aquí veo el mismo valor. Podemos leer esas variables.

Trabajando con Local Storage y Provide Inject

Short description:

Puedes usar el hook llamado UseClip, UseStorage para trabajar con el almacenamiento local y el almacenamiento de sesión. El hook UseTitle te permite cambiar el título del documento directamente desde tu código. VueUse es una biblioteca que proporciona muchas características útiles. Otra característica es Provide Inject, que te permite proporcionar datos en el nivel superior y consumirlos en un nivel inferior de tu aplicación. Puedes usar provide theme en el componente raíz y use theme en los componentes hijos para acceder a los datos proporcionados.

Y también, por supuesto, si queremos cambiar algo, también podemos hacerlo. Así que si cambiamos el color, entonces ajustará el valor, y todo el resto del contenido será... Todos los demás estilos CSS que usan la variable CSS cambiarán. Eso es uno.

Otro elemento interesante que puede ser útil para nosotros es trabajar con el almacenamiento local y el almacenamiento de sesión. Eso realmente funciona de manera bastante sencilla. Simplemente puedes usar el hook llamado UseClip, UseStorage. Y luego aquí, he creado el objeto llamado Title, y eso escribirá el valor en la clave específica de nuestro almacenamiento local. Y el valor será, por ejemplo, desde un título de documento, ¿verdad? Así que en realidad puede ser cualquier variable. Puede ser solo una cadena aquí, ¿verdad? No está limitado a ninguna lógica específica por ahora. Simplemente se puede almacenar aquí. Y ahora, si abro mi aplicación y actualizo la página y voy al almacenamiento local, verás que el valor ya está colocado. Lo siento. Solo necesito actualizar. Y buscarlo. Así que ahora, por ejemplo, si tomo un título de documento. Luego pondrá este valor en el título del documento. Pero lo bueno de esto es que, por ejemplo, quiero cambiar el valor. También hay un hook separado para esto, para cambiar un título de documento directamente desde tu código. Sé que no es algo que hagas a menudo. Pero te da un ejemplo de esas utilidades modulares que puedes utilizar en Vue Use y bibliotecas similares. Por ejemplo, uso el hook llamado UseTitle. Y este hook conecta document.title a tu código. Y no solo puedes leerlo, sino también escribirlo. Aquí he creado la función que cambiará el valor llamada SetTitle. Así que lo estoy importando aquí. Y ahora el valor también se escribirá dentro del almacenamiento de sesión. Así que solo para mostrar eso, crearé rápidamente una función. Me falta alguna parte. Déjame ver. Y sí, SetTitle. Ahí es donde también necesito poner el valor. Y también cuando cambio el título, también necesito usarlo aquí. Un momento. Extraño. Título guardado. Sí, está bien. Lo siento por la confusión. Entonces, lo que estaba haciendo aquí, creé un objeto reactivo que se conectará a esta propiedad específica, mi almacenamiento, almacenamiento local. Y al principio, pondrá este valor en él. Pero luego, si lo estoy sobrescribiendo, también puedo cambiar el valor, y se actualizará automáticamente también en mi almacenamiento de sesión. Nuevamente, estoy conectando algo fuera de mi componente, casi fuera de la aplicación, a solo alguna lógica dentro del componente. Y puedo, nuevamente, extraer fácilmente esta lógica a un hook separado y hacer uso de ella allí. Esos son algunos ejemplos de cómo puedes usar una biblioteca llamada VueUse. Tiene muchas más características útiles, así que pruébala. Y ese es un ejemplo que quería mostrar específicamente sobre otras bibliotecas.

Otra característica que también Vue 2 solía tener, pero que se volvió mucho más avanzada en la versión tres, se llama Provide Inject. Creo que también hubo una pregunta al respecto durante la parte de las diapositivas, así que voy a recrear rápidamente la construcción Provide Inject, que también utilizará la API HOOQS, la API de Vue 3, para proporcionar datos que se inyectarán en el nivel superior y se consumirán en un nivel inferior de mi aplicación. Para eso, usaré este tipo de construcción, esta sintaxis. Lo que pongo aquí, creo un símbolo único, que está relacionado con un conjunto específico de detalles y aquí lo llamo Theme porque me refiero a que pueden ser algunas configuraciones, algunos ajustes visuales para tu aplicación, como el formulario predeterminado, el fondo predeterminado, tal vez el título de una aplicación o el tamaño de un formulario, cosas así, y aquí creo dos funciones, dos devoluciones de llamada que puedo usar para proporcionar algunos datos en el componente de nivel superior y puedo tomarlo en el componente inferior que está debajo de la lista del árbol de componentes. Esta es una construcción típica para esta característica provide inject y este valor aquí está codificado, pero puedes imaginar que podemos tomarlos de alguna API o de algún archivo de entorno o lo que sea y aquí solo necesito usar provide theme en el componente raíz donde quiero hacer uso de él. Por ejemplo, aquí. Está demasiado lejos. Y para poder agregar estos datos sobre el tema en el contexto, solo necesito llamar a este proveedor dentro de una función de configuración. Y ahora, digamos en uno de los componentes hijos, los que muestran nuestro catálogo que mostré antes, puedo hacer uso de este elemento para acceder a esta información. Intentémoslo. Ahora encontraré este componente, el componente hijo, y simplemente obtendré estos datos desde allí. Lo que necesitaré hacer, importaré use theme en este componente hijo. Y ahora, para este use theme, puedo simplemente poner estos datos que devuelve use theme en alguna variable adicional, por ejemplo, que se devuelve desde un método de configuración. Digamos tema. Y eso es todo. Luego debería poder acceder a las variables de use theme directamente en la plantilla. Primero veamos qué tiene. Entonces ves, ahora tengo toda esta información, y ahora puedo tal vez hacer uso de alguna de ella. Digamos. El fondo será este, y el color principal será, por ejemplo, el otro elemento que tengo allí. Que se llama color principal. Así, veamos si funciona. Ahora, estoy pasando directamente... Ves, ahora está usando esos colores que estaba estableciendo en el tema en toda la lista de componentes.

Usando Provide Inject y Hooks Personalizados con Vuex

Short description:

En esta parte, exploramos el uso de provide inject para pasar datos directamente entre componentes, evitando múltiples capas. También demostramos cómo vincular datos de una tienda Vuex a un hook personalizado, permitiendo separación y reutilización. El hook utiliza getters y setters para interactuar con la tienda, y mostramos su uso en dos componentes, uno para leer el valor y otro para establecerlo. El ejemplo mostró cómo se pueden mostrar los datos del usuario seleccionado en un componente de encabezado.

Si observamos nuestras herramientas de desarrollo de vista, verás que tenemos varias capas y a través de ellas obtenemos esos datos para pasarlos directamente sin problemas. Ese es un ejemplo de provide inject en pocas palabras que puedes utilizar propiedades, omitiendo varias capas de otros componentes.

En cuanto a otros ejemplos de código, creo que el interesante es donde podemos vincular datos que se almacenan en nuestra tienda Vuex a un hook personalizado que solo se ocupará de esos datos. Y para eso, utilizaré nuestra página anterior con listas de usuarios. Digamos que tenemos una lógica en la que puedes seleccionar ciertos datos de usuario y luego mostrarlos en otro lugar, ¿verdad? Algo como los datos de usuario de este usuario específico, los datos de este usuario específico que ha iniciado sesión. Para eso, crearé un botón separado que guardará los datos de este usuario. Y para esto, encontraré el bloque correcto. Entonces, para esto, necesitaré agregar a mi lista de usuarios algún botón que realice la selección. Veamos dónde está. Probablemente esté en la sección de carga de datos aquí. Así que tengo los usuarios aquí y digamos que cuando hago clic en un usuario específico, quiero almacenar sus datos en una partición separada de Vuex. Agregaré el evento onclick. No es algo complicado, pero simplemente mostraré la parte con un objeto computado completo que se almacenará como un hook separado y que proporcionará todas las conexiones a la tienda. Así que tendremos una separación agradable, como un componente que usará el hook y el hook usará la tienda. Por lo tanto, estarán completamente desacoplados entre sí. Por eso creo que es un buen ejemplo para mostrar al final.

Entonces, creé el método select user, lo estoy importando aquí. Lo que haré aquí es hacer uso de un hook llamado use user que no voy a crear. Y creé el método select user que seleccionará a este usuario específico, colocando este usuario en esta parte de nuestra tienda Vuex. Eso es solo una preparación. Por supuesto, también necesito implementar los elementos de nuestra tienda Vuex para guardarlo e implementar también el hook. Así que hagamos lo primero con la tienda. Abriré nuestra tienda y agregaré una nueva propiedad aquí, solía tener solo el contador, pero también he creado user data. Luego crearé una mutación para agregar los datos de usuario a la tienda. Eso es bastante sencillo, ¿verdad? También crearé un getter para recuperar sus datos. Bien, y este user data solo toma esta propiedad y ya está. Así que eso es como una preparación, ya ahora lo que podríamos hacer, podríamos usar un componente y llamar a Vuex y hará el trabajo, ¿verdad? Pero si queremos lograr una separación aún mayor, como dije, agregaremos un hook separado que solo funcionará con los datos de usuario y luego servirá para ese propósito específico y podemos tener tantos hooks para objetos de datos específicos como queramos. Así que estoy creando nuestro hook llamado user, ese es, por supuesto, un nombre muy útil para encontrar un mejor nombre, pero por ahora creo que eso debería funcionar. Entonces, lo que voy a hacer aquí, voy a crear nuevamente una función personalizada que devolverá este objeto de usuario, ¿verdad? Y dentro de ella, usaré una tienda como lo hice con el contador porque ahí es donde este hook se conectará a una tienda. Y lo que hago a continuación, uso un método compute. Ya explicamos qué hace el método compute, ¿verdad? Crea un nuevo valor derivado que se basará en las dependencias de lo que se proporciona en el callback, ¿verdad? Pero aquí, lo que estaba mostrando antes es como esto, algún callback, y luego este callback hace cosas que es como la versión uno. Pero lo que voy a hacer, voy a usar getters y setters. Esa es otra API que está disponible para un computado. Entonces, para esto, básicamente proporcionas, como en cualquier otro objeto JavaScript, proporcionas getters y setters que funcionarán con el valor de este objeto. Y luego puedes realizar cierta lógica cuando se recupera o se establece este dato, ¿verdad? Y aquí, adivina qué, lo voy a conectar a la tienda, ¿de acuerdo? Y esta será la conexión del hook a la tienda y el hook se usará de nuevo en el componente. Así es como el componente nunca sabrá acerca de la tienda. Así que voy a poner el set, el getter usará el getter de Vuex, ¿verdad? ¿Y el setter, adivina qué? Usará la forma de mutar la tienda, lo que significa que confirmará los datos de usuario, ¿verdad? Esa es la idea. Por lo tanto, estamos utilizando un objeto computado que tendrá getters y setters que interactuarán directamente con la tienda. Con la tienda gestionada por Vuex. Y luego ahora, si quiero obtener esta información, digamos que tengo algún componente de encabezado donde quiero mostrar un usuario recién seleccionado. Solo crearé una plantilla simple. Y luego lo que sigue, también haré uso de este hook aquí. Pero solo me interesa el valor real, así que incluso puedo hacer algo como esto. Lo cual funciona. Aún no importé el usuario, así que necesito hacerlo rápidamente, de lo contrario tendré problemas. Así que estoy importando el usuario aquí y también estoy importando este usuario aquí. De acuerdo. Entonces, en un componente, estoy usando un hook solo para leer el valor. Y en otro componente, estoy usando este hook para poder establecer el valor. Y veamos si funciona como debería. Probablemente, olvidé un elemento importante, que es agregar el componente de encabezado. De lo contrario, no funcionará. Así que lo importaremos aquí. Es la salsa secreta mágica para asegurarse de que esta parte funcione. Así que tengo un encabezado y luego simplemente usaré este encabezado aquí. De acuerdo, ves aquí, el usuario no está seleccionado, pero lo que me falta aquí es el botón seleccionado. Eso es probablemente, C, sí, debería ser simplemente clickable por toda la luz. De acuerdo, así que ves que cambia, pero pone algún evento de puntero en lugar del usuario real, simplemente se puede solucionar llamando a la función con el argumento adecuado, porque aquí realmente estoy esperando este argumento. Así que ahora obtendré todos los detalles del usuario. El que hacen clic en el componente subsiguiente. Para que sea un poco más agradable, simplemente pondré el nombre de usuario. Ahora, usuario, déjame ver allí. Porque tiene otra propiedad de usuario en él. Sí, así. O incluso puedo hacer uso de refs. Correcto, sí. Esa también es una buena parte de los hooks. Si no necesitas todo lo que te proporciona, puedes simplemente ponerlo directamente en la parte de retorno de tu función de configuración, y estará bien. Lo único que no hay que olvidar es importar los refs aquí. Entonces, esto y luego debería ser user.name.

Conclusión de la Demo y Migración

Short description:

Al hacer clic en diferentes usuarios, puedes cambiar el nombre seleccionado y filtrar en consecuencia. Esta construcción permite una máxima descomposición y la creación de agregados con lógica diferente. Los tres puntos en el hook de usuario se utilizan para la deconstrucción de objetos. Los términos hook, composable y behavior se utilizan indistintamente. Para los usuarios de Vue 2, la herramienta Vue Demi puede admitir ambas versiones. La migración, descrita en la documentación oficial, permite una migración gradual mediante la activación de funciones. Gracias por asistir a la masterclass y no dudes en contactarme en Twitter si tienes más preguntas o aclaraciones.

Sí, ahora al hacer clic en diferentes usuarios, el nombre seleccionado cambia, ¿verdad? Además, aún puedes filtrar y eso también debería cambiar. Funciona con esta construcción donde tienes un hook que solo sirve para una parte específica de la tienda. Y eso es lo que se utiliza en varios componentes. Así es como puedes lograr una máxima descomposición, diría yo. Y este patrón también es bueno. Entonces, cuando tienes, digamos, objetos de usuario más complejos que tienen muchas propiedades y lógica diferente, entonces puedes crear ese tipo de agregados que realizan diferentes actividades con todos los getters y setters, ¿verdad? Esa es la última demostración que quería mostrar.

Veo una pregunta de Aaron preguntando qué son los tres puntos en el hook de usuario. Veamos. Tres puntos en el hook de usuario. Lo siento, no veo ningún punto aquí. ¿Te refieres, tal vez, aquí? Sí, esos tres puntos son simplemente lo mismo que cualquier deconstrucción de JavaScript, como cuando divides objetos en partes. Eso es todo. Es como si se llamara rest o spread, ¿verdad? Spread, creo, ¿verdad? Así que es ese tipo de cosa. Es lo mismo que harías, digamos, si estás usando Burix y estás haciendo map actions, entonces tendrías lo mismo. Es una sintaxis básica de JavaScript, no es algo extravagante. Bien, esta pregunta está resuelta. Sí, probablemente spread. Sí, gracias por las aclaraciones, Steve. Genial. Veo otra pregunta de Andre, ¿es el hook lo mismo que un composable? Sí, eso también lo dije al principio, creo que todavía se utilizan diferentes términos. Hook, composable, behavior. Todos los uso indistintamente. Cuando me refería específicamente a los hooks de React, me refería a los hooks de React, pero eso, sí. Genial, eso es todo para la demostración. Espero que les haya gustado y nuevamente enviaré el enlace aquí en el chat para que puedan probarlo. Luego, solo un par de cosas más para hablar, se trata de la migración. También recuerdo que algunos de ustedes mencionaron que todavía están usando la versión dos y si especialmente eres un autor de biblioteca, hay una herramienta llamada Vue Demi que permite admitir ambientes y funcionalidades en Vue 2 y Vue 3. Solo tienes que instalar Vue Demi e importar todo lo que necesitas de él y dentro de él, se redirigirá. Tiene dependencias de ambos proyectos, ambas versiones, y cargará la correcta para ti según ciertos ajustes. Es una buena herramienta si estás escribiendo una biblioteca o ya tienes una biblioteca o tienes algún complemento que estás usando y quieres que pueda admitir ambas versiones hasta que se acabe el tiempo para la versión 2. Eso es una cosa, Vue Demi, y la segunda es la migración. Es algo que está bien descrito en la documentación oficial. Es una configuración especial en la que puedes poner tu aplicación, donde puedes habilitar funciones una por una cuando estás realizando una migración de alguna aplicación más grande, que tiene muchas páginas, muchos componentes, muchas características, básicamente agregas una dependencia llamada vue-compat y reemplazas tu versión dos con la versión tres y luego comienzas básicamente a cambiar las versiones, lo siento, comienzas, puedes alternar todas las características que agrega la versión tres y puedes reescribir gradualmente tu versión v2 en v3 y asegurarte de que nada se rompa o al menos si sabes que algo se rompe y no puedes reescribirlo rápidamente, entonces puedes deshabilitar esta función, ¿verdad? Y luego puedes continuar durante algún tiempo usando la versión tres, pero estará envuelta con esta compilación de compatibilidad de vista. Así que eso es una buena característica para migraciones graduales. Espero que aquellos de ustedes que usen v2 tengan más migraciones pronto y tengan más usuarios de la versión tres, y sí, eso es todo para mi masterclass. Estoy muy contento de que ustedes hayan estado hasta el final. Me fascinó la cantidad de preguntas y estaré encantado de responder más si tienen ahora. Y si no tienen ahora o desean aclarar algo más tarde, síganme en Twitter. Estaré encantado de charlar allí. Eso es todo, también coloco los enlaces una vez más aquí en la diapositiva. Si tienen alguna pregunta, no duden en hacerla. Y espero haber respondido sus preguntas. Gracias Ricardo, espero que te haya gustado. Espero que te hayas entusiasmado con el uso de Vue 3 y todos los patrones de composición que tiene y que haga nuestra vida más fácil y eficiente como desarrolladores. Gracias Karen. Que tengas una buena tarde, si ya es tarde para ti. Fue realmente un placer compartir todas esas cosas contigo. Gracias, adiós.

Watch more workshops on topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts

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

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
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.