Vue3: Desarrollo Moderno de Aplicaciones 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 usar la API de Composición de manera eficiente.

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

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

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

Mikhail Kuznetcov
Mikhail Kuznetcov
169 min
26 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La 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 la modularidad y un mejor soporte de 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 puede usarse con bibliotecas principales como Vuex y Vue Router, y la biblioteca VueUse proporciona hooks y comportamientos para mejorar los componentes de Vue. La masterclass mostró cómo usar 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 Resumen de la Masterclass

Short description:

Soy Mikhail y dirigiré la masterclass de hoy sobre las características de Vue 3. Nos centraremos 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 he convertido en un gran fan. Sígueme en Twitter para más contenido de Vue y desarrollo de front-end. Hagamos una rápida ronda de presentaciones para entender la pila técnica de la audiencia.

Soy Mikhail y dirigiré la workshop de hoy sobre las características de Vue 3. Estoy realmente contento de ver muchos mensajes en el chat. Genial, genial, chicos. Veo que definitivamente pueden oírme, y espero que puedan ver la imagen claramente. Así que si en el camino hay alguna perturbación con el video o la calidad del sonido, por favor, háganmelo saber. Eso no debería suceder normalmente, pero veremos. Genial.

Entonces vamos... Creo que ya es suficiente tiempo para que la gente se una, sigamos adelante. Entonces, ¿de qué vamos a hablar hoy? Principalmente nos centraremos en Vue 3, la tercera versión. Y comenzaré con una introducción básica luego haré una inmersión más profunda en las características de Vue 3, principalmente la composition API, y luego entraremos en modo demo, cuando estaré mostrando la mayoría de los elementos que trae la composition api. Permítanme presentarme rápidamente, Mikhail. He estado desarrollando web durante más de una década. Actualmente trabajo como líder de equipo en ING Bank en Ámsterdam. Empecé a usar Vue alrededor de 2016, cuando todavía era la versión 1, y de hecho cuando Geiss lanzó la versión 2, me fascinó lo fácil y componible que es construir interfaces de usuario web complejas. Y también el ecosystem documentation, todo era realmente agradable, así que me convertí en un gran fan de este framework. Desde entonces, lo he estado usando en muchos proyectos comerciales y personales también.

Pueden seguirme en Twitter. Este es un conjunto de caracteres difícil de pronunciar. Así que, por favor, si no pueden escribirlo, lo escribiré en el chat. Así que, estaré encantado de responder a sus preguntas en el chat, aquí durante la sesión, pero también síganme en Twitter. Intentaré publicar algunas cosas relacionadas con Vue y el desarrollo de front-end de vez en cuando.

Sí. También hagamos una rápida ronda de presentaciones. 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, ¿podrían escribir en una breve frase su pila técnica, qué otros frameworks o bibliotecas, lenguajes utilizan a diario. Si todavía están estudiando, también está bien. Solo puede ser back y front 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 que les interesa. Si están usando vue, por supuesto, sería bueno saber qué versión están usando principalmente. Así que por favor, les daré un minuto para esto y luego seguiremos adelante.

2. Introducción a Vue y Resumen de la Masterclass

Short description:

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

Sí, vi algunos primeros mensajes. Gracias Robert. Cambiando de 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 la forma en que puedes componer componentes y reutilizar la lógica, definitivamente te debería gustar. Así que espero que te guste el viaje, Robert. Ricardo vue 2.0, barra tres. Genial, genial. Andrei, Laravel, PHP. Genial. Clement, gracias, gracias. Adam, Lucas. Bueno, muchas cosas que los chicos estaban usando aquí. Oh, bien, bien. Veo que a menudo se mencionan las vistas, lo cual es bueno porque estamos en la conferencia de Vue. Y sí, también veo que es, la versión 2.0 todavía se usa a menudo, lo cual es completamente comprensible. Es una versión estable, que estuvo con nosotros durante casi cuatro años. Y sí, incluso siendo un experto en la tercera versión, todavía a veces solo inicio un nuevo proyecto y rápidamente lo hago 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 es, será beneficioso para la mayoría de ustedes que todavía están usando la versión dos. Genial, genial, veo a Carloi, Barthek. Sí, gracias chicos. Gracias por todos los detalles. Realmente agradable. C Sharp desde la API de posición, Dave, jefe. Gracias, muy agradable. Genial, y también, así que estamos haciendo ahora la masterclass que es parte de la conferencia. Y por supuesto, los días en que la conferencia las actividades principales ya pasaron, pero sí, espero que les haya gustado. Escuché que hubo bastantes anuncios interesantes y charlas de los miembros del equipo central, así que estoy realmente feliz de presentar una masterclass en esta comunidad. Así que sigamos adelante, gracias por toda la información. De hecho, para aquellos que mencionaron React, tengo un par de diapositivas comparando los hooks de React con la API de Composición de Vue, así que eso también podría ser de ayuda para algunos. Oh, veo que Sergio también mencionó la masterclass de la Escuela Vue. Genial, sí, hice algo de contenido para la Escuela Vue, específicamente alrededor de la versión 3, sí. La Escuela Vue es una buena fuente de aprendizaje. Me alegra saber que la estás utilizando.

Bueno, una breve introducción sobre Vue, porque creo que la mayoría sabemos qué es, pero solo para recordar. Se llama Framework Progresivo de JavaScript. Comenzó alrededor de 2015 por un tipo llamado Ivan Yeo, que anteriormente desarrollaba AngularJS en Google. Y hoy en día, es un proyecto de código abierto super exitoso impulsado por la comunidad, que tiene, como veremos, casi 200,000 estrellas en Github. Tiene ciertas elecciones de diseño, como la lógica de la plantilla y la composición de datos para la lógica del componente, observadores, funciones calculadas, que las personas que usan Angular encontrarán familiares. Se basa en el concepto común, que se llama DOM virtual. El que también es ampliamente utilizado por React, y tiene un brillante ecosistema de herramientas. Veremos algunas de ellas hoy, como el CLI de Vue, para iniciar un proyecto, el router, para básicamente cambiar de páginas y diferentes partes de su viewport en el lado del cliente, el administrador de estado, que es un paquete separado llamado Vuex. También veremos esto hoy. También tiene soluciones de renderizado del lado del servidor como Nuxt. Así que si has visitado las charlas de la conferencia, probablemente aprendiste mucho sobre ellos. Así que hablaremos de algunos de ellos también. Y se utiliza mucho en la industria. No solo por equipos pequeños, sino también por empresas de nivel empresarial que necesitan reutilización de código y funcionalidad a escala. Entonces, sí, creo que es una excelente opción para cualquier tamaño de proyecto. Sí, solo un rápido resumen sobre el estado actual de las cosas. Sí, tenía este gráfico importado de npm compare. Y aquí puedes ver varias métricas como la cantidad de descargas de paquetes por día, supongo, o por semana, para tres frameworks principales. Así que puedes ver que Vue está teniendo constantemente el segundo lugar, que es quizás tres veces, cuatro veces menos que React. Sin embargo, en el recuento de estrellas, eso es significativamente más que para React. Creo que es un gran logro para un proyecto que es completamente comunitario, y fundado por Becca. No tiene ninguna gran corporación detrás de él. Así que creo que es realmente emocionante usar una herramienta así. Yo mismo escribí varios plugins. No son tan exitosos, pero fue una experiencia agradable, de hecho. Creo que la forma en que la documentación está alineada desde la versión dos y para la versión tres, también, lo hace realmente accesible y fácil para todos construir cosas personalizadas encima de Vue. Así que si no has probado a crear algún código reutilizable, código de código abierto para Vue, dale una oportunidad. Quizás también te guste.

Bueno. Déjame revisar. Bueno. Entonces sí, una breve mirada al campo. ¿Cómo se ve el componente típico de Vue? Así que tiene, como dije, lógica y plantillas, puedes mostrar datos de tu modelo y puedes vincularte a eventos y hacer ciertos, sí, reutilizar algunas partes de la plantilla, o reutilizar otros componentes en la plantilla. Y la parte principal está en el lado de JavaScript donde puedes definir tus propiedades, tus variables de estado usando una función de datos o un objeto de datos. Y puedes usar métodos para mutar estos datos, y puedes tener un montón de otras cosas como watch, computed, y otros tipos de variables. Así que toda esta parte básicamente se llama API de opciones.

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

Short description:

Vue 2 es famoso por su API central, donde se definen todas las propiedades necesarias e interactúas con ellas usando la referencia 'this'. La API de opciones, aún soportada en Vue 3, será deprecada en el futuro. En Vue 2, el código y la lógica pueden ser reutilizados a través de slots, directivas, plugins y mixins. Sin embargo, los mixins no serán soportados 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 para TypeScript. La API de composición es el tema principal de esta masterclass, y hay una compilación 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 todo lo que necesitas en el componente en esas propiedades del objeto. Y luego interactúas dentro de esta lógica usando esta referencia que básicamente ayuda a acceder a cualquier parte de, cualquier variable o cualquier método dentro del componente. Así que como veremos más adelante, sí, como probablemente todos saben, la API de opciones es algo que actualmente todavía es soportada en la versión tres, pero va a ser deprecada en el futuro y estamos deshaciéndonos lentamente de ella.

Así que una nota importante antes de continuar, intentaremos centrarnos en cómo reutilizar ciertas piezas de code, cierta funcionalidad dentro, dentro de la vista tres real. Y antes de mostrar cómo puedes reutilizar code en la vista tres, sólo quería esbozar rápidamente las formas existentes para reutilizar code y lógica en la versión dos, la mayoría de ellas todavía están disponibles en, en entre. Así que tenemos slots básicamente como, como en un web components, dejas cierto marco o varios marcos en el, en el marcado del componente, y luego puedes insertar ciertos bloques en eso. Tenemos directivas, que es de nuevo, muy familiar para los usuarios de angular. Son básicamente atributos personalizados, que modifican el comportamiento de una, de una etiqueta. Tenemos plugins, es como una forma mucho más amplia aplicable, una forma de empaquetar cierta funcionalidad. Los plugins pueden tener sus propios componentes, directivas y cosas como esta. Así que si quieres escribir algo más grande que un componente o una directiva, probablemente necesites un plugin. Así que por ejemplo, el router de Vue, o Vuex son plugins al final. Y eso es como el trozo más grande que puedes usar, el concepto más grande que puedes querer usar si quieres crear piezas reutilizables de code y piezas de funcionalidad. También tenemos mixions en la versión dos. Los marqué como tachados porque en la versión tres, esto es algo que ya no va a ser soportado. Así que los mixions eran agradables, con ellos básicamente podrías añadir comportamiento a otros componentes añadiendo una propiedad especial de mixions. Sin embargo, ahora ya no confiamos en los mixions en la versión tres. Así que si todavía tienes mixions en tu V2 code, tendrás que reescribirlos en algún otro formato. Probablemente los hooks o los comportamientos serán la mejor solución para eso. Así que también veremos esto. Así que tenemos bastantes opciones diría yo, y sí, en la versión tres tendremos la API de composición que nos da la capacidad de usar los llamados hooks o comportamientos. Usaré esos términos indistintamente, porque sí, es una terminología que es en parte heredada de react-hooks. Así que sí, así es como lo haremos en nuestra actual masterclass. Un rápido repaso de lo que obtuvimos en la versión tres. Así que fue lanzado, sí hace casi un año en realidad. Creo que fue una de las conferencias de vista donde finalmente fue anunciado y trajo bastantes mejoras. Diría que además de una reescritura completa que dio más modularidad al code, incluyó varias características construidas por la comunidad como portales y otros elementos que fueron llevados al núcleo por lo que ahora está disponible sin usar ningún plugin separado. Sí, también agradables adiciones como plantillas de múltiples raíces cuando no necesitas envolver todos los elementos en un elemento raíz llamado 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 lo que estoy hablando porque hay varias soluciones agradables sin embargo necesitas saber tu camino alrededor de él para hacer un uso adecuado de él. Así que ahora es mucho más sencillo y fácil. La mayoría de mis ejemplos serán en JavaScript, sin embargo, pero sí, tengo algunos enlaces en la parte adicional donde se muestran algunas demos de TypeScript. Y por supuesto el gran cambio de dominio 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 compilación de migración, una herramienta especial que ayuda a migrar la base de code de la versión dos a la versión tres. Así que para aquellos que todavía están usando la versión dos y pensando en actualizar, hay un buen tutorial oficial documentación que explica cómo hacerlo. Haré una rápida explicación al respecto. Así que sí, también tendremos tiempo para esto.

Bien, así que ahora empecemos con el contenido real de la API de composición. Eso será, digamos, una parte teórica durante unos 20 minutos más o menos. Y luego nos sumergiremos en los ejemplos de code, ¿de acuerdo? Hasta ahora, si hay alguna pregunta, o digamos, cosas que necesitas aclarar, por favor, no dudes en usar el chat. También puedes usar la cosa de Preguntas y Respuestas. Pero sí, en las Preguntas y Respuestas, estamos seguros de que todas las preguntas están apiladas y visibles para mí. El chat es más para sugerencias o comentarios en curso, o tal vez si en algún momento me quedo atascado y sabes cuál es el problema, por favor, siéntete libre, ¿de acuerdo? Porque es bastante común para esas demos que después de una hora y media algo va mal y no puedes ver algún corchete o algo. Así que cuento con ustedes chicos aquí. ¿Bien? Así que vamos a saltar a la parte de composición. ¿Cuál es la idea principal de la API de composición? La idea es que creamos, estamos añadiendo una función especial en el nivel raíz 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 code reutilizables que serán rastreadas de forma reactiva por el núcleo del framework. Y eso permitirá, vincular la lógica que luego puede ser usada en el uso, en las plantillas o en bloques heredados como métodos o un observador, por ejemplo. Así que veremos más adelante que puedes mover todo el manejo de la lógica de la versión dos a esta función de configuración, y lo que es genial de esta función de configuración es que nunca verás esto en ella. Esto significa la referencia a una instancia de un componente. Y eso hace que sea muy fácil extraerlo fuera del componente. Pero lo veremos mejor en las futuras diapositivas. Así que por ahora, sólo recuerda que tenemos una función de configuración que tiene toda la magia en ella, y necesita devolver todas las cosas que van a ser usadas en otras partes del componente, en las plantillas, especialmente fuera de ella. Si no devuelves, entonces esto no será visible o disponible en el... ¿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 de la función de configuración porque si olvidas devolver, no puedes usarlas en ningún 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.

Bien, hablando sobre el contenido de esta función de configuración, ¿qué podemos hacer realmente allí? Podemos hacer muchas cosas, es decir, 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, ya sabes, básicamente 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 computed 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á, porque solo está dentro de una función de configuración. Piensa en ello 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, rápidamente verás la advertencia. Así que es un proceso de aprendizaje fácil, diría yo.

Veo una pregunta de Rainey preguntando sobre, ¿qué es una función de configuración? Entonces, la función de configuración es, lo siento, la función de configuración es básicamente el lugar donde el componente, el componente, es un método que se llama una vez, eso es importante saber solo una vez, cuando se inicializa el componente. Y ese método declara todos los internos, toda la lógica de este componente. Y a lo largo del ciclo de vida de nuestro componente, de 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 devolverlos. Como mencioné aquí, no olvides devolverlos. Eso puede ser molesto a veces 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. Así que por ahora, míralo más como una introducción teórica.

Y veo una pregunta en la Q&A. Dice, ¿es la función de configuración la forma recomendada de usar la API de composición? Y esa es una gran pregunta. Vamos a profundizar más en esto en el resumen, ¿de acuerdo? Pero gracias por la pregunta. Desafortunadamente, no se ve quién la hizo pero sí, veo otra pregunta de TFO. ¿Cuál de estas dos formas de crear data reactivos se sugiere? ¿Todo el estado del componente en un solo data reactivo o crear para cada objeto un data reactivo para los primitivos? Mejor trato de compartirlo de alguna manera porque es bastante largo. Déjame compartir la pantalla. Pongámoslo así. Entonces esa es la segunda pregunta. Intentaré mirar rápidamente esta. Entonces, ¿cuál de las dos formas, qué forma de crear data reactivos se sugiere? Ah, te refieres dentro de un solo componente. ¿Es un solo data reactivo para todo el estado del componente? Ah, te refieres dentro de un solo componente. ¿O para cada objeto un data reactivo para los primitivos? Ok. Entonces esto se puede responder fácilmente ahora. Recomendaría tener estructuras de data separadas 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 data 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 JavaScript, lo que sea, PHP, Python, no importa el lenguaje. Entonces, mantener las cosas separadas puede ayudar a refactorizarlo más adelante. Yo 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 o de la estructura de data 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. Ok. Pero ¿puedes ver la pregunta ahora? Si puedes, oh. Es, está bien, está bien. Es extraño. Solo copiaré para asegurarme. Ok. Así, creo que sí. Sí, solo un poco de trasteo. Lo siento por eso. Bien. Entonces sí, abogaría por el enfoque número dos. Bien. Entonces, lo que podemos ver aquí, solo recapitulemos rápidamente los bloques de construcción de la lógica reactiva. Podemos usar ref y reactive. Esas son utilidades que pueden ayudarte a crear una variable o un objeto reactivo. Bueno, la variable es para valores individuales. Puede ser un booleano, un número o una cadena, algo así. Reactive es, en primer lugar, 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, entonces 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. Entonces tenemos el elemento de cuenta aquí, que tiene un valor predeterminado de cero. Y luego tenemos el elemento más uno aquí, que cada vez que cambia la cuenta, volverá a calcular el más uno y lo hará un valor de cuenta más uno, ¿verdad? Entonces, cuando la cuenta se convierte en dos, más uno se convierte en tres, cuando la cuenta 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 comprobando los elementos que se mencionan en el callback. Quiero decir, no los estás comprobando, pero Vue hace esto por nosotros, ¿verdad? Solo 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, sabes sobre 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í, puedes ver que nuevamente no hay referencia a esto, 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. Así no es 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 .value es un truco que en realidad se necesita para manejar adecuadamente el valor real. Mostraré rápidamente la siguiente diapositiva, que he construido específicamente con mis habilidades de Photoshop para explicarte qué está pasando.

5. Reactividad y Acceso a Valores

Short description:

Cuando creas un objeto ref o reactivo, lo marca y sigue rastreándolo para detectar cambios. La vista es notificada cuando el objeto cambia, y puedes realizar acciones basadas en el nuevo valor. La sintaxis de punto valor se utiliza para acceder al valor real de un objeto reactivo.

Entonces, cuando tienes solo objetos o variables simples, la vista no los rastrea, ¿verdad? Simplemente no le importan. Cuando creas un objeto ref o reactivo, lo marcará de alguna manera y seguirá rastreándolo, observándolo cuidadosamente hasta que, si cambia. Y si cambia de alguna manera por la entrada del usuario o por tiempo de espera o lo que sea, entonces la vista, como un sistema de reactividad de framework, es notificado al respecto. Bajo el capó, utiliza los llamados proxies, que agregan una envoltura extra encima de tus objetos que quieres rastrear. Y luego cuando este objeto cambia, recibes una notificación de que, está bien, este objeto cambió. Si quieres hacer algo, por favor ve, este es el nuevo valor, ¿de acuerdo? Así que esa es la idea de por qué es importante hacerle saber a la vista que quieres usar cierto valor o un objeto como uno reactivo. Y luego cuando lo has hecho, cuando lo has declarado en la función de configuración, entonces estás dorado, entonces hará cualquier tipo de recálculos por ti. Pero es por eso que esa parte viene con, lo siento, ¿dónde está mi puntero del ratón? Así que es por eso que este punto valor entra en juego. Esto se debe a que el resultado de esta creación de objeto reactivo es un objeto, no es un valor simple individual. Es por eso que para entrar en él, para obtener el valor real, tienes que llamar a punto valor. Por eso tiene que ser así.

6. Observable, Efecto de Observación, Ref vs Reactivo

Short description:

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

Bien, entonces eso en realidad 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. Entonces puedes simplemente llamar, puedes llamar a view.observable y luego poner algún objeto o variable allí. Y luego le dirá a framework que por favor rastree el sitio y luego me notifique si algo cambia. Así que eso ya estaba de alguna manera haciendo su camino en la API, pero no era mainstream en la versión dos, ¿de acuerdo?

Sí, entonces veo una pregunta para, de Martin, y era sobre la diferencia entre el Efecto de Observación y su diferencia de watch. Sí, vamos a mirar más de cerca este, pero en resumen, esto 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 del DOOM virtual, eso es todo. Así que tu sistema de actividad de vista, invalida los efectos, esos cambios, y luego los flushes de forma asincrónica para evitar duplicados necesarios de callbacks. Y entonces cuando tienes múltiples cambios sucediendo al mismo tiempo, digamos, tick en la misma actualización, y por eso hay diferentes etapas de este proceso. Y puedes manipular en qué estado de este proceso quieres ejecutar este efecto. Bien, entonces eso es, digamos un poco in depth, pero para muchas cosas básicas, watch estará bien, pero para el efecto de observación tienes una opción extra cuando quieras hacer eso, ¿de acuerdo?

Bien, entonces sí, esa es una pregunta más sobre esto fue por Robert, sobre el ref versus reactivo. Esa es una pregunta muy, muy popular. De hecho, tenemos dos formas de crear elementos. Sin embargo, para el uso común es que tú use ref para data primitiva, como dije, como números, símbolos, booleanos, cadenas y así sucesivamente, y reactivo, puedes hacer uso de él cuando estás tratando con todo un conjunto de objetos, ¿de acuerdo? Así que reactivo, no podrá tomar un valor primitivo como entrada. Así que 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 primitivas y reactivo para objetos más advanced. En resumen, también veremos, quiero decir, de nuevo, más ejemplos, pero eso es porque también dentro de reactivo, el objeto que estás pasando, no solo puedes declarar propiedades individuales, también puedes poner, por ejemplo, propiedades calculadas dentro de él y hacerlo realmente más complejo. Por eso son, eso, diría que es la principal diferencia. Así que vamos a seguir adelante.

7. Ganchos de Ciclo de Vida y Carga de Datos

Short description:

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

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

Entonces, la siguiente parte de la lógica que puede residir en la función de configuración son los ganchos de ciclo de vida. Todos sabemos qué es un ciclo de vida de un componente, ¿verdad? Los componentes se crean, se renderizan, luego ciertas propiedades pueden o no ser actualizadas y luego un componente puede ser desmontado, eliminado del DOM. Y durante este ciclo de vida, tendremos un conjunto útil de callbacks que podemos emplear para ejecutar cierta lógica como iniciar alguna biblioteca de terceros o iniciar alguna carga de data o, sí, rastrear ciertos valores, cosas así, o tal vez iniciar un contador y todas esas cosas. Y anteriormente solíamos tener los ganchos de ciclo de vida en el nivel superior de la API del componente para la API de opciones del componente. Entonces usarías como un montado, por ejemplo para llamar a la lógica que se ejecutará cuando el componente esté montado y cosas así o destruido cuando quieras, tal vez antes de destruir, cuando quieras cerrar algo, no sé, conexión de web socket o eliminar algunos oyentes de eventos y cosas así. Quiero decir, oyentes de eventos que están fuera del control de vista si tienes alguno, por ejemplo, ¿verdad? Entonces esos ganchos de ciclo de vida todavía existen y están disponibles dentro de la función de configuración. Hay callbacks desmontados, no actualizados y desmontados que puedes importar de un framework, de vista y luego hacer uso de ellos dentro de una función de configuración, ¿verdad? Entonces ese es un breve ejemplo que muestra la solución típica cuando quieres cargar data cuando el componente está abierto, co-llamando a algunas APIs y luego cuando los data están cargados, simplemente lo asignas a tu variable de estado. En este caso, es un objeto reactivo y luego devuelves de una función de configuración, el objeto de estado y el objeto de estado puedes usarlo para mostrar cosas dentro de tu plantilla, ¿verdad? Entonces ese es un ejemplo simplificado de cómo puedes lidiar con la carga de data asíncrona dentro de un componente de Vue 3. Y por supuesto, de nuevo, ves que no hay nada específico para este componente que nos impida reutilizar este code fuera de este componente, que es la parte agradable de esto que podemos juntar todo esto en un gancho personalizado llamado o un comportamiento. Y esto puede ser importante en cualquier otro componente donde necesitamos esta carga de data.

8. Cambios en Vue 3 y Script Setup

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 propiedades, mientras que otras características como emitir eventos y acceder a slots están disponibles en el segundo argumento, a menudo referido como el 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, se crean variables reactivas derivadas utilizando funciones calculadas, los métodos son simplemente funciones que necesitan ser devueltas para ser utilizadas en la plantilla, y se pueden configurar observadores para rastrear cambios. La opción de script de configuración 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. El uso de 'sync' en los ganchos del ciclo de vida no es necesario en Vue 3.

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

De acuerdo, entonces veamos este ejemplo realmente simple que muestra una aplicación que solo tiene un formulario y un poco de lógica para aumentar el valor de este formulario y un pequeño método solo para mostrar la data que es para el método. Así que aquí vemos todas las piezas de la API de opciones comúnmente utilizadas como el estado se almacena en el objeto data inicialmente, los valores formateados se almacenan en las propiedades calculadas. Podrías decir que podríamos usar filtros por ejemplo para estos. Los filtros también van a ser deprecados en la versión tres así que eso es algo de lo que hay que estar consciente. Tendrás ganchos de ciclo de vida. Tenemos métodos para hacer este cambio de valor, solo incrementar. Y tenemos un observador, no hace mucho aquí pero solo por el hecho de tenerlo. Y aquí está un ejemplo de cómo realmente reescribimos el mismo code en la versión tres. Entonces, ¿qué va a dónde, verdad? Eso es solo para compararlos lado a lado porque en las demostraciones de code no estaré usando la versión dos más. Así que solo un rápido repaso, ¿cuáles son los bloques de construcción y cómo se corresponden uno con otro. Así que, la declaración de estado va en un rev o 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 a través de funciones calculadas. Así que la función calculada acepta un callback y los elementos que mencioné en el callback son rastreados. Y para cada uno de los cambios de esos elementos que están en el callback, el nuevo valor será calculado o computado, por eso se llama calculado, ¿verdad? El gancho all-mounted que mencioné justo antes de esa diapositiva sobre los ganchos del ciclo de vida. Así que aquí puedes ver cómo funciona. Luego los métodos. Los métodos no necesitan ninguna declaración de propiedad especial como aquí, son solo funciones que hacen cosas, ¿sabes? Y esas funciones necesitas devolverlas y entonces podrás hacer... Será posible para ti usar esta función en tu plantilla. Y el último es para el observador, y aquí, de nuevo, no hace mucho, solo console registra el valor, pero así es como puedes hacer uso de un observador, pones una dependencia y luego obtienes un valor previo y el nuevo valor en el callback. Eso de nuevo, es muy similar al enfoque de AngularJS, probablemente reconoces ese patrón. De acuerdo, eso es para la comparación lado a lado. Pasemos a elementos más específicos. Andrey escribió, en la opción de script de configuración, no usas return, ¿es eso cierto? Entonces, solo para tocar rápidamente este punto, porque también hubo una pregunta relacionada con el script de configuración. Entonces, un script de configuración es algo como puedes escribir así solo si no lo has usado, es como esto, que es solo una especie de azúcar sintáctico para componentes de archivo único. Y luego puedes usarlo junto con una declaración normal y básicamente agrega un poco más, sí. Sí. Cómo decir, sintaxis comprimida, menos ruido de todos esos return export como export default 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 esa es una buena tooling para usar. Esa es una buena manera de usar. Y de hecho en el script de configuración, puedes saltarte el return porque todos los elementos están en cierto modo en el alcance global de esta gran función de configuración, ¿verdad? Así que eso es, sí, básicamente un buen azúcar sintáctico para esos tipos de casos. Sí, genial. Veo que se agregaron algunas preguntas más. Déjame ver. Así que el primer elemento, si no lo estoy pronunciando correctamente. ¿Cómo se definirían las props en la nueva API de composición? Así que en este ejemplo, no se definen props porque esto es solo una simplificación. Pero normalmente puedes poner props como un argumento para una función de configuración y tomas los valores de allí. Así que estarán disponibles para ti porque la función de configuración se ejecuta antes de que se renderice el componente pero ya cuando la vista tiene acceso al valor de las propiedades. De acuerdo. Entonces, y si necesitas configurar algo en tu componente usando props puedes leerlo desde el primer argumento. Eso es lo que estaba mostrando justo aquí. Así que las props están aquí y luego puedes hacer uso de ellas, lo que quieras. De acuerdo. Genial. Sí. Correcto. Lo que devuelves de una función de paso puedes usarlo en la plantilla. Sí. Y una pregunta más. Tratando de usar esta característica como respuesta en vivo, pero siempre me olvido de ello, lo siento. Entonces, está bien, estoy tratando de hacerlo ahora. Estoy respondiendo la pregunta de Aaron.

QnA

Preguntas y Comparaciones

Short description:

¿No necesitas el sync en los ganchos del ciclo de vida? Sí, tienes razón. Fue una simplificación, pero me perdí el sync en ese ejemplo específico. En cuanto al 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 puede ser utilizada 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 en profundidad, lo que indica que la comunidad se está acercando a la etapa de usar Vue 3 como predeterminado. La grabación de la masterclass estará disponible para los titulares de entradas. Puedes extraer la lógica en comportamientos o ganchos e importarlos en tus componentos. 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 Hooks de React, 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 aros del ciclo de vida? ¿No necesitas el sync? Sí, ¿te refieres a ese ejemplo específico? Tienes razón. Estás completamente en lo cierto aquí. Es mi fallo, está aquí de hecho. Tengo un sync, aquí lo olvidé. Sí, de todos modos fue bastante simplificación. Así que me perdí el sync aquí, por supuesto. De lo contrario no funcionará. Correcto.

Bien, uno más. Creo que ya respondí a este. Dame un momento. Este para WEF y Reactive, de nuevo, hay un buen artículo para comparar. Estoy bastante seguro de que esto puede dar una mejor explicación de la que daré durante esta masterclass. Así que por favor, echa un vistazo a esos. 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 full value, full value concat blah, blah, blah, ¿o es preferible el enfoque mutable? Vale. ¿Necesitas usar value para el array? Bueno, si tienes cosas que están definidas por ref, entonces tendrás que usar value para acceder a ellas, ¿vale? Eso es seguro. Si quieres cambiar el valor, también tendrás que usar el dot value. Así que mi entendimiento, la primera versión debería ser correcta, pero vamos a comprobarlo cuando tenga el IDE abierto. Estoy bastante seguro de que es así, la primera que escribiste, porque necesitas acceder al valor. Vale, bien.

Gracias por muchas, muchas preguntas, realmente agradables. Hice esta masterclass creo que en algún lugar, en junio en, ¿fue creo, la Conferencia de Amsterdam Vue o algún otro evento? Y había mucha menos gente que ya conocía o experimentó o usó Vue 3, así que había muchas menos preguntas. Así que estoy realmente contento de que esté sucediendo y las preguntas son bastante en profundidad. Eso significa que nosotros, como comunidad, nos estamos acercando 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 oído que la API de Composición puede ser utilizada como una alternativa para Vuex. Sí, eso es en realidad también una buena adición. Es algo similar, bueno no exactamente, es como en React cuando se introdujeron los hooks, podrías hacer uso de estructuras similares como en lugar de Redux, se llamaba Use Reducer, como un hook especial que podría crearte un pequeño Redux específicamente para tu componente. Eso es algo similar aquí, al usar esas utilidades reactivas como estaba mostrando ahora en esta parte teórica, podemos construir nuestros propios objetos que vivirán en algún lugar fuera de nuestro componente, serán piezas separadas, enchufables que puedes activar en los componentes donde las necesites. Y de hecho, almacenarán el valor. Así que se usarán, pueden ser usados como una pieza de estado de libros. Así que sí, es algo cierto. Y también creo que hay algún artículo que muestra bastante bien eso, puede que tenga dificultades para encontrarlo, pero en resumen, sí. Y mostraré un ejemplo de esto, ¿vale? Bien. Intentaré recordar esas preguntas cuando muestre los ejemplos de código, pero puede que olvide algunas de ellas. Las tengo en la pestaña de respuesta. Lo siento chicos, a veces la interfaz de usuario de Zoom se vuelve cada vez más compleja, así que hay cada vez más características allí, genial. Andrei, una pregunta más. Lo siento, tal vez tengamos grabación. Eso es algo que deberían saber los organizadores. Supongo que se está grabando. Y sí, se está grabando. Y de alguna manera, como después, debería estar disponible en algún lugar de esto, sí, ¿cómo lo llamas? Área de inicio de sesión para las personas que tienen una entrada. Así que sí, deberías ser casi 100% capaz de encontrarlo. Genial. Solo algunos últimos comentarios. Es Karolin, y llegaremos al ejemplo de código, seguramente. Así que como resumen, de nuevo, puedes extraer la lógica como aquí en tu función de configuración, y luego hacerla no solo un gran montón de código, como una super función, ya sabes, como la que toma como tres pantallas para leer y hace todo y esto es difícil de mantener. Puedes extraer cosas en comportamientos llamados o ganchos, y luego importarlos pieza por pieza. Así que aquí, es un ejemplo, por ejemplo, tenemos algunos componentes y tienes ganchos o composables. Y luego donde necesites cierta pieza, 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 gancho y luego puedes importar este gancho así en tu componente y entonces es solo una línea que te da todas las variables, todos los métodos que puedes querer usar y cosas así. Así que ese es el patrón corto. Sí, en cuanto a la grabación, sí, supongo que en algún lugar entre mañana y la semana. Eso es seguro. Genial, solo una rápida comparación contra los Hooks de React porque los Hooks de React son una herramienta bastante popular como todos sabemos y tal vez personas que están cambiando de React o también están usando React, así que tal vez sea útil resaltar rápidamente las diferencias. No estamos usando el mágico this en el código del componente, como los Hooks de React dieron una oportunidad de no tener este estado, lo siento, propiedades de clase y más métodos con estos. 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 todavía puedes usar componentes de clase y componentes funcionales con hooks, puedes combinarlos como quieras. Así que eso funciona en paralelo también. 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 un ref y tal vez los que están definidos por un 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 próximas iteraciones, ¿verdad? Así que tiene estado básicamente. Y esta lógica con estado va fuera del componente.

Usando 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 se pueden volver a ejecutar. 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 usar 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 lo suficiente. 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 detener. Y gracias a eso, no hay 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í todo está bien porque solo se ejecuta una vez en la inicialización, ¿de acuerdo? Así que 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 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. Entonces, esto es para los usuarios de la versión dos. Si no estás usando la versión tres, en la versión tres puedes importarlo 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? Entonces, eso es más avanzado en términos de seguimiento. Sí, buena observación, 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 State, 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. De lo contrario, podrías hacerlo manualmente, ¿verdad? Pero serían más líneas en la declaración de retorno. Así que tenemos dos utilidades de Ref para esto. De acuerdo, eso es un ejemplo rápido. Ahora veamos cómo usar los patrones de 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 haciendo un repaso teórico rápido de cómo funciona esto. Tanto el enrutador de Vue como Vuex vienen en una versión más nueva. Entonces, si estás usando la versión tres de Vue, debes usar la versión cuatro del enrutador de Vue 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 pondrá la versión correcta. Lo mismo 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, las últimas versiones principales, puedes importar un hook especial. Nuevamente, mira la forma en que se escribe la sintaxis, es un use y luego el store, así que usa algo. Y en la función de configuración, nuevamente, puedes obtener un store de él y hacer cosas similares como lo harías normalmente con el store, 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. Enlazamos valores de un estado en la función de cálculo y lo que sucede es que Vue Core realiza un seguimiento de estas dependencias dentro de tu store y cualquier cambio que realice, la función de cálculo se volverá a ejecutar y te dará el nuevo valor de un store, así es como lo lees. Y si quieres confirmar, solo este objeto de store que obtienes del hook tiene opciones para confirmar y despachar, básicamente para hacer acciones y mutaciones con los datos que necesitas. Así que eso es en resumen cómo lo haces con Vuex. Clement, veo tu nota. Honestamente, no lo he intentado. Copiaré esto y lo intentaremos, ¿de acuerdo? No lo sé, quiero decir, tal vez lo intenté, pero no tengo una respuesta en este momento, podemos echar un vistazo. Copié tu comentario, lo intentaremos más tarde. Sí, sí, me gusta comprobarlo. Mi opinión es que no debería porque ref no realiza un seguimiento de sus dependencias. Entonces, computed es específicamente como en la versión dos, computed es una función donde Vue identifica todas las variables mencionadas y luego realiza un seguimiento de sus cambios. Así que 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, este enrutador de dólares, ¿verdad? Puedes obtener tu ruta actual. Puedes obtener los parámetros. Puedes hacer navegación programática, cosas así. Solo puedes hacer uso de esos objetos que se devuelven de los hooks. Y nuevamente, son completamente componibles con otros bloques de construcción que acabamos de describir en la fase introductoria. Por ejemplo, puedes rastrear los parámetros de una ruta y 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 eso te brinda acceso a todo tipo de utilidades, no solo tiempos de espera y como limitaciones, 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 pequeñas piezas 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, solo 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 de 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, así 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, preguntándome, no más map getters en esta versión, así que todavía existe map getters, pero es posible que ya no lo necesites. Déjame, entonces, aún puedes hacer eso.

Q&A: Vuex y Composables

Short description:

Todavía puedes tener un mapeo de acciones y mutaciones, el mapeo de mutaciones y 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 todavía 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 intentando 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. Entonces, el mapeo de mutaciones y getters y cosas así 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. ¿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í, si no es mucho, pero gracias por compartir los datos de todos modos. Genial.

Otra pregunta de Ricardo. 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 entrada de datos porque pones, es difícil decir una respuesta genérica. Mi opinión al respecto es que Vuex sigue siendo una buena opción para aplicaciones complejas porque Vuex es una, digamos, estándar bien conocido de cómo estructurar la lógica. Y se usa fácilmente, digamos, cuando pruebas tus componentes, ¿verdad? Solo tienes que poner un estado simulado y verificar que los componentes se comporten correctamente, ¿verdad? Con los hooks, no obtendrás eso. Así que, 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. 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. Así que puedes acceder a ciertas partes de tu estado en tu hook y luego devolver solo esa parte. No son uno u otro. Son más como menos conectados entre sí. Así que puedes elegir uno u otro, o ambos, diría yo. De acuerdo. Finalmente, 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. Solo es un subárbol. Está bien, porque creé un informe separado en esta carpeta, ahora solo se está referenciando 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. Algunas cosas, me olvidé. Genial. Otra pregunta de Dave, diciendo 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 todavía 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 experto en React. 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. Así que sí, para mí, 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 trampas que pueden surgir al usar ciertos patrones impuestos por el marco de trabajo. Es similar a la evolución de la sintaxis y organización del código de JavaScript, donde se hicieron 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 algunos problemas con los hooks. En términos de vista, de hecho, fue, digamos, dos años tarde o tal vez, sí, como un año y medio más tarde, introducido en View, un concepto similar. Como intenté mostrar en esta comparación, este enfoque con piezas funcionales reutilizables que son utilidades funcionales que hacen uso de code patterns reactivos. Pero aquí creo que la tasa de adopción todavía no es, digamos, tan grande. Y de nuevo, juzgando por esta masterclass que estaba dando, 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 puede ver mucho más a menudo la versión dos mencionada. Oh, lo siento, se menciona la versión tres mucho, mucho más a menudo, pero todavía 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 residir los casos difíciles, los casos extremos. Y ahí es donde puedes ver las desventajas de usar ciertos patterns que el framework impone. Entonces sí, creo que aún no es el momento de ver esas trampas, pero definitivamente habrá algunas mejoras o tal vez como con cualquier otro enfoque, como la community generalmente evoluciona para encontrar algunas soluciones utilizables sobre las cosas que no funcionan completamente. Ya saben, chicos, vamos, hace como seis, siete años no teníamos clases, ¿verdad? Estaba bien, la gente podía vivir sin ello, teníamos todas esas construcciones, un poco personalizadas en cada proyecto y la gente seguía escribiendo el code, ¿verdad? Ahora tenemos una sintaxis bastante moderna y comprensible en el lenguaje, así que ahora solo estamos hablando sobre las piezas específicas en algún lugar, digamos a nivel de las bibliotecas. Pero sí, miren lo lejos que estamos de lo que era antes de ES6, ¿verdad? Son mejoras sobre una sintaxis ya bastante bien trabajada y code outs. Entonces, debería estar bien, creo.

Codificación con Vue CLI y la API de Composición

Short description:

Tengo un proyecto generado con Vue CLI reciente con la versión tres de Vue. Comenzaremos con un componente de contador simple para demostrar cómo usar la tienda 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 crear 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 nombres unificada. Creamos una instancia de aplicación conectada a una tienda y router, y la montamos en el elemento de la aplicación. Comenzamos con un contador simple usando mutaciones y acciones. El contador es actualmente síncrono, pero podemos hacerlo asíncrono más tarde.

Bueno, por cierto, creo que ya no hay más parte de preguntas y respuestas, pero realmente, realmente fascinado por la cantidad de preguntas. Feliz por ellas, espero haber podido responderlas con algún contenido útil, al menos tal vez algunos enlaces o algunos elementos mencionados, puedes buscar más información en Google y formarte una opinión sobre ciertos aspectos. Pero pasemos a la parte de codificación.

¿Qué tenemos aquí, esto es diferente. Y tenemos, así que esto es... Vale. Avísame si el tamaño de la fuente es suficientemente grande, si es legible o no. Si es demasiado pequeño, pon algo. Vale, gracias, Relly. Um, solo una pregunta más de Bess. Podría ser útil para algunos para nuestro proyecto de Vue, Apollo client cache, GraphQL ha completado. Sí, un buen punto, Best, por cierto, porque eso es algo que ocurre bastante a menudo, también sucede para también el ecosistema de react. Hasta donde sé, el cliente de Apollo aporta todo tipo de partes para no solo consultar data, sino también para almacenar en caché la data y para agregar ciertos cómo lo llaman, como piezas de nivel de cliente de data que se derivan de la data existente y cosas como esta y reutilizables. Esos componentes que hacen la consulta y todo eso. Y es como si se hiciera cargo de una gran parte de la gestión de data que la gestión de data centralizada en las aplicaciones de Vue, lo mismo que para React. Sí, también he oído hablar de ello, sí. Así que es posible que quieras pensar qué al final quieres usar para tu... Solo si estás usando GraphQL, ese es el punto. Porque el Cliente de Apollo es específicamente, estoy hablando del GraphQL aquí. Genial.

Sí, así que aquí tengo solo un proyecto fresco generado por Vue CLI que actualmente tiene la versión tres de Vue. Y como mencioné, es una versión mayor que la VueX y las versiones del router que usaremos en él. Tiene todo eso, es bastante estándar. Y también ya instalé un VueUserCore para mostrar algunos de los elementos. Lo que también hice, puse solo algo de Bootstrap CSS para que se vea un poco más bonito. Y tengo un pie de página aquí solo para demostrar algunas de las características. Y no se hicieron más modificaciones. Vale, veamos qué tenemos. Creo que puedo empezar con, simplemente empezando el proyecto, tan simple como eso. Solo dos avisos rápidos. ¿Se siente todo el mundo cómodo usando Vue-CLI? Porque creo que ese es el, digamos, el sótano para el desarrollo productivo de Vue. También es parte de estas herramientas centrales que forman el ecosistema y creo que saber cómo usarlo. Y es importante para realmente ahorrarte mucho tiempo en la configuración. Así que si hubiera algún, digamos, que nunca lo ha usado, si tienes algunos comentarios más sobre ello, puedo mostrar rápidamente, pero espero que ya sepas cómo usarlo. Genial. No se menciona nada especial, eso es bueno. Así que tengo, tengo una aplicación de demostración del sistema, en la que solo reemplacé todos estos enlaces con algo de texto para que parezca un poco más personalizado y realmente que he preparado algo. Así que empecemos con algunos de los ejemplos, déjame comprobar esto rápidamente. Oh sí, está aquí. Así que simplemente volvamos a empezar con un ejemplo simple como suele suceder que escribimos alguna lógica con estado, algún elemento que almacenará la data en el Vuex. Quizás primero en el componente y luego en Vuex y luego pasamos a cosas más complejas. Así que simplemente empezaré con un componente que estará usando un contador. Por supuesto, empecemos con el ejemplo más simple pero simplemente mostrará la idea de qué partes necesitan ser implementadas para usar la tienda en una biblioteca moderna de Vue, vale. Proyecto moderno de Vue 3. Pero no pienses que solo estaremos hablando del contador, es solo para añadir algo de code. Muy bien. Entonces, antes de empezar a añadir el code, algunos elementos adicionales. Cómo la Vue API de inicialización cambió en la versión tres. Como antes solíamos tener la versión code NuVue, ¿verdad? Y luego pones 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á usando la sintaxis de la versión tres y utiliza esta sintaxis de crear aplicación. Y creo que es realmente agradable, y no solo porque tiene ciertas mejoras en términos de separar los diferentes conceptos de diferentes diferentes instancias de Vue. Porque anteriormente, con esta sintaxis, no era posible separar la funcionalidad que estás usando. Que estás añadiendo a diferentes instancias de Vue porque era si estás añadiendo un componente personalizado o un plugin, entonces era añadido a todas las instancias en el alcance. Sin embargo, con esta nueva lógica, cada aplicación será tener su propio su propia lista de elementos, su propia lista de cosas que son que se añaden a ella. Así que puedes tener una aplicación aquí, la segunda aplicación aquí. Y por ejemplo, si la segunda aplicación no necesita un router, entonces lo hará así, y los paquetes resultantes serán, no contendrán el router en ambos. Así que esta sintaxis no permitía esto, pero es una buena mejora. De hecho, hay un artículo que lo explica con más detalle en el sitio web de la Escuela Vue, así que puedes echar un vistazo a más explicaciones. Pero sin embargo, esta sintaxis de creación, así que empezando con la palabra crear, y luego hacer algo es común también para otras herramientas dentro de Vue, Vue 3 ecosystem. Así que si miras la inicialización de la tienda, también usa crear tienda en lugar de nueva tienda. Y para el router, hace lo mismo como crear router, este patrón común creo que también es agradable una especie de unificación de cómo se llaman ciertas cosas. Y es quizás también algo en lo que puedes pensar si estás escribiendo tus propias partes personalizadas, tal vez plugins o algo, también puedes hacer uso de las mismas convenciones de nombres, ¿verdad? para crear una función de inicialización con un nombre similar, ¿verdad? solo para que todo el mundo entienda, vale, este es el punto de entrada, ¿verdad? Vale, de todos modos, así que aquí estamos creando una instancia de aplicación que está, la estamos conectando a una tienda y al router y la montamos en el elemento de la aplicación. En la tienda, no tenemos nada ahora mismo, así que empecemos con algo simple de nuevo, contar, simplemente es muy, muy común. Pero de nuevo, ten paciencia conmigo, haremos algo más divertido más tarde, ¿vale? Así que tendremos una mutación que básicamente aumentará el contador, ¿verdad? Y empecemos también con, acción, vale. ¿Cómo se implementará aquí, que nosotros, las acciones como sabemos sirven para cuando necesitamos lógica asíncrona. Y en este caso, podemos simplemente pasar el commit en el primer argumento, y luego podemos llamar a commit cierta mutación, ¿verdad? Así que, por ahora, este contador es totalmente síncrono, no tiene que hacer mucho, pero luego podemos hacerlo asíncrono.

Uso de la Tienda y Extracción de Lógica

Short description:

Para hacer uso de 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. Usa el hook de la tienda para acceder a la tienda y recuperar valores del contador. Devuelve los valores que quieres usar en tus elementos DOM. Coloca el componente en la ubicación deseada, como la página de inicio. También puedes usar acciones llamando a dispatch directamente desde el objeto de la tienda. Extrae la lógica de la función de configuración en un archivo separado, como un hook. Usa el hook para acceder al contador y recuperar valores. Puedes personalizar qué valores usar en tus componentos, dependiendo de tus requisitos.

Así que este es el estado muy simple. Ahora, si queremos, hacer uso de, valores reales del contador en el componente, crearemos un nuevo archivo. Además, no olvides usar extensiones para tu ID de elección, porque eso también hace tu vida más fácil y rápida. Estoy usando vetour, hay más herramientas agradables, pero esta, creo, es la más popular en este momento. Así que creará piezas predeterminadas para mí. Así que, ya importaré cosas. Así que no estoy perdiendo tu tiempo. Importaré computed y use store para que podamos usarlo en la función de configuración. Y en esta función de configuración, primero haremos uso de la tienda usando este hook de tienda. Y luego, como mencioné antes, podemos usar los elementos que obtenemos del contador para leer los valores e incrementar los valores. Y lo que es importante que mencioné es devolver las cosas que quieres usar en tus elementos DOM. Así que solo copiaré esos aquí. Sí, veo que hubo una mano levantada, llegaré a eso en un momento. Solo un ejemplo aquí, algo de marcado aquí, así que tengo un botón y el valor aquí debería funcionar. Déjame ver. Y por supuesto, necesitamos poner este objeto, este componente en algún lugar. Así que empecemos con solo ponerlo en la página de inicio. Eso probablemente debería hacer el truco. Solo comentaré el ejemplo de Hola mundo. 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. Además, sobre las herramientas de desarrollo, asegúrate de tener una herramienta de desarrollo diferente. Quiero decir, ahora admite la versión tres pero hubo un tiempo en que no admitía ambas versiones y solía haber dos versiones mayores diferentes de una browser API o también una extensión de navegador. Y si estás usando la versión más antigua de una extensión de navegador, es posible que no detecte la nueva versión. Así que, es posible que solo quieras instalar otra. Entonces, si miro mi lista de extensiones en Chrome, verás que tendrá dos versiones debido a eso, pero tal vez ahora ya admite ambas. Necesito encontrar dónde está esta mano levantada. No a propósito. Bueno, bien. Sí. Así que, usemos principalmente el chat para señalar. Bueno. Es un ejemplo muy simple, solo para extender esto un poco. También podemos, ya que tenemos un contador que tenemos una mutación y tenemos acción. Entonces, desde el componente aquí estamos usando una mutación pero si queremos usar mutación. Podemos, lo siento, si queremos usar acción, todavía podemos hacer eso. Al, de nuevo, desde el objeto de la tienda, puedo llamar a dispatch directamente y me dará el elemento que necesito en el contador incremento. Y luego podré hacer esto usando acción. Así que, aquí ya estoy llamando a una acción. Entonces, en tus componentes, solo usando el objeto de la tienda que se devuelve de la nueva tienda, tú puedes acceder a ambas formas de mutar tu estado. ¿Cuál es el siguiente paso con eso? Podemos, por supuesto, ponerlo en algún lugar, digamos, afuera y hacer uso de un hook que será capaz de traernos el contador. Y esto es, de nuevo, como mencioné, todo esto, toda esta lógica que está sucediendo en la función de configuración, debería quedarse aquí. Debería 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 data en la aplicación. Así que crearé una carpeta de hooks. Y crearé un ejemplo de uso de contador. Y básicamente solo copiaré todo, es más fácil. Como, ya que todavía solo tengo esto en mi función de configuración, es más fácil. Solo... Y lo llamaré UseCounter, de nuevo por convención. Bueno, lo que me falta, por supuesto, son esos chicos. Tienen que estar aquí, ¿verdad? De lo contrario, no tengo un computador o tienda. Así que estos, ahora puedo simplemente reemplazar todo eso con la importación de mi hook recién creado. Usaré esta auto-completación, porque con asterisco no funciona, y sigo olvidando el nombre. Normalmente deberías usar asterisco, por supuesto. El uso del contador y ellos se irán. Así es como extrajimos todo eso, incluido el uso de VUEX, en ese componente, en ese hook. Y ahora podemos tener la misma funcionalidad todavía funcionando. ¿Verdad? Veamos si nada se rompe o algo se rompe. UseCounter no está definido, porque no lo vi. UseCounter. UseCounter no está definido. Bueno, la funcionalidad todavía funciona de la misma manera. Lo bueno de esto es que podemos... es posible que no necesitemos todos los elementos de aquí, solo estamos usando Increment With Action, así que solo podemos tomar esos dos y solo usar esos dos, ¿verdad? Y estaremos... todavía estamos bien, ¿verdad? O si tenemos otro componente donde solo queremos usar el valor, ¿verdad? Solo estamos consumiendo el valor de la tienda, no incrementándolo. De nuevo podemos hacer eso bastante fácilmente. Por ejemplo, si lo tomo aquí, digamos...

Uso del Valor del Contador y Trabajo con Props

Short description:

Y solo usaré el valor, no ninguna otra parte de él, ¿de acuerdo? Probablemente esto, así que ahora tenemos acceso al contador aquí e importamos solo 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, podemos pedirla en esta deconstrucció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 maneras, como desde el primer argumento o utilizando un enfoque más moderno. El componente principal demuestra cómo pasar datos a los componentos hijos, similar a Vue 2. También se mencionan brevemente el componente hijo y el componente de lista.

y solo usaré el valor, no ninguna otra parte de él, ¿de acuerdo? probablemente esto, así que ahora tenemos acceso al contador aquí e importamos solo 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, entonces aún podemos hacer eso. 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, podemos pedirla en esta deconstrucción y luego hacer uso de ella en la plantilla. Así que probablemente porque el valor inicial era como 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 de esta manera, ¿de acuerdo? Así que eso es solo para empezar. Ahora agreguemos otra característica que está trabajando con eventos, así es como puedes, sí, hacer uso de emit en la versión de viewtree. Para eso, necesitaré crear algunos componentes más. Pero antes de entrar en esto, responderé rápidamente las preguntas. Así que Adriano preguntaba, ¿estás usando blanco? No, no estoy usando blanco. Y una cosa más, hablando del blanco, también hay un bonito repositorio que realmente usa blanco, y muestra muchas características nuevas. Esa demostración es, como, 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 que lo creó. Se llama Vue 3 Playground, y contiene, como, cada una de las... casi cada una de las características que Vue 3 tiene. Que puedes simplemente abrir el fragmento de código, ejecutarlo, como romperlo, ya sabes, ajustarlo, y aprenderlo haciendo, así que ese es un repositorio increíble. Y este realmente usa blanco. Bueno, entonces la segunda pregunta de Adriano, ¿puedes modificar el valor del contador en el componente donde se importa? Vale. Entonces aquí, ¿verdad? Como si solo importo el valor real, esa es la pregunta. Así que sí, podemos ver qué pasará, ¿verdad? Crearemos una función que estará cambiando el valor, y verás cómo está reaccionando. Vale. Crear función. Importamos aquí y luego borramos el botón. Aquí tenemos este botón de cambio. Uh, entonces ves, uh, tal vez olvidé algo. Cambio. Cambio. Cambio. Así que no hace nada aquí porque, uh, si intentamos hacerlo así, simplemente te dará esto, uh, eso es lo que quería mostrar. Dice que el valor del contador es de solo lectura. Así que, uh, lo que obtenemos de aquí es ya, uh, algo que puedes cambiar directamente. Sí. Um, vale. Sigamos. Así que eso es para el. Para el ejemplo simplificado del contador. Uh, vamos a, uh, crear algunas cosas más, um, y experimentar con ellas. Um, así que usaré esta, uh, demostración, que es, um, como un componente que es algo así como mostrando, uh, como un producto en el, en el catálogo. Así que lo crearé aquí. Uh, este componente es bastante sencillo. Uh, nombre, y tiene una propiedad de precio por lo que puedes configurar tu producto dándole un precio personalizado. Emite un evento. Es solo el nombre del evento. Puede ser cualquier cosa en lugar de señal. Y utiliza la composición de view tree, y aquí puedes ver cómo usamos el función de emisión, ¿verdad? Así que, uh, usamos las props. Recuerdo que había una pregunta sobre las props. Correcto. ¿Cómo usas la prop? Así que aquí está el ejemplo, ¿verdad? Leyendo las props del primer argumento, uh, también se puede hacer, uh, de una manera un poco más moderna, como algo así, uh, precio. Uh, y luego, uh, simplemente lo tomas, uh, de allí y luego lo usas. En India, en, por ejemplo, en esta situación, o puedes usarlo, uh, en algún otro lugar en el frío, uh, para, para, para, para hacerlo más usando el mecanismo de propiedades simple. Uh, para, para, para pasar los datos desde un padre. Así que ahora necesito recrear rápidamente el padre también para, uh, explicar. Um, así que, uh, aquí estoy usando la sintaxis de un componente definido. Puedo ver eso. Sí. mira estos. Esto es a propósito para que yo, um, Eso es. Uh, puedes, tú, no hace más que la exportación por defecto normal sin este envoltorio, pero es más beneficioso en términos de, um, uh, el soporte de TypeScript y la ID de las herramientas. Así que, uh, eso está bien. Así que haré una última cosa. Así que puedo, puedo crear rápidamente una imagen, uh, que puedo luego tal vez, uh, útil para hacer eso. Um, así que este es un componente hijo y también crearé, uh, uh, um, componente de lista aquí. Para eso, replicaré rápidamente mis, um, pantallas. Vale. 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 que puede ser más, puede ser un menos elementos y solo muestra la forma en que podemos pasar propiedades. Es bastante similar a cómo lo hicimos en view dos. Por supuesto, también podemos hacerlos más dinámicos, ¿verdad? agregando, como una propiedad de datos en algún lugar aquí.

Uso de múltiples V-models y emisión de 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 'Añadir al carrito', se registra un evento en el componente principal. La función de configuración permite reemplazar un objeto de método con funciones. En Vue 3, se pueden utilizar múltiples V-models para vincular a diferentes propiedades. El componente childAdvanced demuestra esta funcionalidad al tener propiedades de precio y cantidad separadas. 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 creé esta página. Ahora agregaré esto rápidamente al enrutador. Y el último paso es agregar el enlace a él. De hecho, 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í. Vale. Eso es porque, sí, estamos importando el mismo nombre. Entonces será como precio interno, por ejemplo. Y luego lo verás aquí. Pero si no queremos cambiar el nombre en la plantilla, podemos usar simplemente una 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 se haya ido. Entonces, ¿qué tenemos aquí? Una nueva página, que tiene tres elementos de producto. No se ve muy elegante, pero se entiende la idea. Tenemos la suma de los valores. Y luego, cuando estamos agregando a un botón de presión añadir a un carrito, obtenemos el evento. Y este evento también está bloqueado en nuestro componente principal por virtud de una simple función de bloqueo. Así es como también puedes reemplazar un objeto de método con las funciones que residen en tu función de configuración. Sin embargo, si estás en una etapa de migración de algo grande, todavía puedes tener un objeto de métodos. Eso no es mutuamente exclusivo todavía. Así que puedo tener métodos y poner aquí, digamos casi lo mismo, ¿verdad? Registro, y todavía puedo hacerlo aquí. El único problema, por supuesto, es que sobrescribirá la función de registro existente. Pero solo para demostrar la compatibilidad, todavía funcionará. Así que puedo registrar los valores de la misma manera, mientras estoy usando los métodos de la vieja escuela, ¿verdad? Pero eso es solo para mostrar. Vuelvo a este, de nuevo. ¿Por qué vuelvo a este? Porque puedo extraerlo y hacer uso de él de una manera más agradable, ¿verdad? Así que, aquí estoy pasando, como, en Vue 2, el valor, y está todo 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, configuración, 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 característica agradable de la versión 3 es la llamada múltiples V-models. Así que ahora, cuando tenemos un componente con una propiedad, también podemos establecer el valor del V-model en él y cambiarlo desde el padre, ¿verdad? Creo que ese es un enfoque conocido. Así que puedes hacer, como, V-model-price, y luego asignarle algún valor. Digamos... Y luego, junto con cambiar este, tu modelo cambiará, ¿verdad? Pondremos, por ahora, digamos, 100. Y luego, solo para mostrar que está cambiando, lo pongo aquí. Y luego, si lo estoy cambiando allí... Oh, eso es donde... Un segundo. ¿Por qué está cambiando esto? Porque se estaba volviendo a renderizar 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 será propagado al componente, ¿verdad? Y si cambio este valor en el padre, también será propagado en el componente. Antes de la versión 2, solo había un V-model posible. Sin embargo, en la versión 3, puedes tener múltiples V-models en un componente para vincular a diferentes propiedades. Y para eso, crearé un componente separado que tendrá esto implementado. Esta vez, solo estoy copiando y pegando más cosas para que no hagamos la misma escritura. Y se ve un poco más bonito. Cerraremos el resto. Y aquí, usaré el childAdvanced. Y para este childAdvanced, puedo configurar múltiples modelos como este. Así que childAdvanced tiene más propiedades. Tiene un precio y una cantidad, como dos variables numéricas que pueden estar cambiando por separado. Y ahora puedo configurarlos, vincularlos a valores específicos en mi ámbito principal utilizando dos v-models que apuntan a los elementos específicos, ¿de acuerdo? No es directamente, digamos, parte de la composition API, pero algo que añade view three. Así que este último producto aquí, tiene, déjame separarlo un poco. Así que este último producto, tiene dos valores en él. Y esos valores se establecen desde el padre y puedes rastrear esos cambios. Así que eso es para el emit, cómo haces la emisión en el hijo utilizando la variable emit del contexto. Y también un elemento importante, tienes que declarar qué eventos emite tu componente? Como, ves aquí, tengo esta propiedad emite. Como, si creo otro evento diciendo, no aquí, pero veamos, creo un evento aquí diciendo como esto, 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 entonces está comprobando qué elementos estás declarando en el meet. Extraño, tal vez por esto. Vale.

Q&A: Carga de datos y búsqueda

Short description:

Responderé las preguntas sobre la sustitución del bloque de datos por 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 a 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 del usuario se devolverán y se 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 comprueba 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é a la pregunta. Así que por favor, pónganlas 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. Reproduce muchas cosas similares de 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? Así que supongo que te refieres a este bloque. Sí, se puede reemplazar. Sí, es cierto. Lo único que quiero decir, si tú... Sí, sí, absolutamente se puede reemplazar. Así que podemos mover todas esas cosas aquí. Como esto, 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 definir el componente 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. Vale, 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 como mencionas con las anotaciones para hacer tu código de Vue 2 lo más tipado posible, sí, 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, simplemente usaré el backend de demostración de JSON placeholder, así que si nunca lo has visto, échale un vistazo. Es una herramienta agradable 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 da datos estáticos. Creo que también puede dar un elemento por ID así, 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 puse 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 hará 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 hará 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í tendré nuestra definición de componente. Así que eso es el comienzo, ahora lo que vamos a hacer, vamos a crear un indicador que contendrá los elementos y que también tendrá, por ejemplo, el seguimiento 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 empecemos con una versión simple donde copiaré, crearé un objeto usando ref que contendrá los datos cuando se carguen. Crearé una función que carga los 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 los datos del usuario, y eso es lo que queremos devolver actualmente. Así que solo los datos del 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 del usuario, y luego muestro el nombre de usuario, la ciudad del usuario, y blah, blah, blah. Nuevamente replicaré una nueva página. Para que tengamos más elementos en la demostración entre los que puedes cambiar. Ahora tenemos una nueva página llamada carga de datos y ya ha cargado algunos datos. Veamos cómo sucede. Básicamente, cuando estoy actualizando la página, debería haber una llamada a los usuarios que me devuelve la lista de fallos. 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 hacer eso. 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 hará una... Podremos hacer una búsqueda de 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 completamente 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á el almacenamiento del 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 devolverla aquí. Por ahora, la hemos conectado al modelo, pero aún no hace nada, ¿verdad? Si miro en mi inspector en las herramientas de desarrollo de Vue, voy a datos de carga, veo que tengo usuarios cargados, todos los elementos están aquí, y la búsqueda es completamente reactiva, pero no tengo ninguna lógica que realmente realice la búsqueda. 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á simplemente el filtrado en cada elemento del array. Y aquí, lo que estoy haciendo, tomo los datos de usuario, los valores que se cargan durante la llamada al backend, y luego hago el filtrado, y hay una devolución de llamada para el filtro. 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 que necesita, 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 como está 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, aún puedo hacer la búsqueda aquí, ¿verdad? Así que funciona en ambas direcciones, 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 sencillo que implementa la búsqueda.

Seguro, sí, pensé que le da 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 escribir 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 rellenar tu café, cola, agua o cualquier actividad sanitaria, ¿de acuerdo? Pero te mostraré lo que tenemos en la lista de XFDA, para que realmente 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 este evento. Así que por favor, si quieres seguir mirando 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 hagámoslo 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 VueUse que mencioné en las diapositivas. Es una pieza de software realmente genial que es útil para aprovechar muchas de tus tareas regulares de código. Y eso es lo que tengo aquí en un archivo separado que agregaré rápidamente a mi página. Oops... Solo un momento... Así que solo usaré una página de inicio para este experimento solo porque es más rápido. Comentaré el contador ahora. Entonces, primero, el de las variables CSS. Todos conocen qué es una variable CSS, ¿verdad? Es como un valor 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, VueUse tiene un gancho 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 index HTML de demostración. Y para este selector raíz, he colocado una variable llamada color y esto usa el valor 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 Almacenamiento Local y Proporcionar Inyectar

Short description:

Puede usar el hook llamado UseClip, UseStorage para trabajar con almacenamiento local y almacenamiento de sesión. El hook UseTitle le permite cambiar el título del documento directamente desde su código. VueUse es una biblioteca que proporciona muchas características útiles. Otra característica es Proporcionar Inyectar, que le permite proporcionar datos en el nivel superior y consumirlos en un nivel inferior de su aplicación. Puede usar el tema de proporcionar en el componente raíz y el tema de uso en los componentes secundarios para acceder a los datos proporcionados.

Y también, por supuesto, si queremos cambiar algo, también podemos hacerlo. Entonces, si cambiamos el color, ajustará el valor, y todo el resto del contenido será… Todo el resto de los estilos CSS que usan la variable CSS cambiarán. Eso es uno.

Otro elemento agradable que puede ser útil para nosotros es trabajar con almacenamiento local y almacenamiento de sesión. Eso realmente funciona de manera bastante sencilla. Puedes usar el hook llamado UseClip, UseStorage. Y luego aquí, creé el objeto llamado Title, y eso escribirá el valor en la clave específica de nuestro almacenamiento local. ¿Y el valor será, por ejemplo, de un título de documento, verdad? Entonces, en realidad puede ser cualquier variable. Puede ser solo una cadena aquí, ¿verdad? No está vinculado a ninguna lógica específica por ahora. Solo puede ser almacenado aquí. Y ahora, si abro mi aplicación y actualizo la página y voy al almacenamiento local, verás aquí que el valor ya está colocado. Lo siento. Solo necesito actualizar. Y buscarlo. Entonces, 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, 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 haces a menudo. Pero te da un ejemplo de esas utilidades modulares que puedes usar en el uso de Vue y bibliotecas similares. Por ejemplo, uso el hook llamado UseTitle. Y este hook conecta document.title con tu código. Y no solo puedes leerlo, sino también escribirlo. Entonces aquí creé la función que cambiará el valor llamado SetTitle. Así que lo estoy importando aquí. Y ahora el valor también se escribirá dentro de la historia de la sesión. Entonces, solo para mostrar eso, crearé rápidamente una función. Me falta una 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 estará conectado a esta propiedad específica, mi almacenamiento, almacenamiento local. Y inicialmente pondrá este valor en él. Pero luego, si estoy sobrescribiendo, también puedo cambiar el valor, y se actualizará automáticamente también en mi almacenamiento de sesión. Entonces, nuevamente, estoy conectando algo fuera de mi componente, casi fuera de la aplicación, a solo una lógica dentro del componente. Y puedo, de nuevo, extraer fácilmente esta lógica a un hook separado y hacer uso de él allí. Entonces, esos son algunos ejemplos de cómo puedes usar una biblioteca llamada VueUse. Tiene muchas más características útiles allí, así que pruébalo. Y ese es un ejemplo que quería mostrar específicamente sobre otras bibliotecas.

Lo que también tengo es otra característica que también Vue 2 solía tener, pero se convirtió en un uso mucho más avanzado en la versión tres, que se llama Proporcionar Inyectar. Creo que también hubo una pregunta al respecto durante la parte con las diapositivas, así que voy a recrear rápidamente la construcción de Proporcionar Inyectar, que también utilizará la API de 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, este tipo de sintaxis, lo siento. Lo que pongo aquí, creo un símbolo único, que está vinculado a un conjunto específico de detalles y aquí lo llamo Tema porque quiero decir que pueden ser algunas configuraciones, algunas configuraciones visuales para tu aplicación, como formulario predeterminado, fondo predeterminado, tal vez título de una aplicación o tamaño de un formulario, cosas como esta y aquí estoy creando dos funciones, dos devoluciones de llamada que puedo usar para proporcionar algunos datos en el componente de nivel de ruta y puedo tomarlo en el componente secundario que está más abajo en la lista del árbol de componentes. Esta es una construcción típica para esta característica de proporcionar inyectar 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 el tema de proporcionar en el componente raíz donde quiero hacer uso de él. Por ejemplo aquí. Es 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 secundarios, los que muestran nuestro catálogo que estaba mostrando antes, puedo hacer uso de este elemento para obtener acceso a esta información. Probemos eso. Ahora encontraré este componente, el componente secundario, y solo obtendré estos datos de allí. Lo que necesitaré hacer, necesitaré importar el uso del tema en este componente secundario. Y ahora para este uso del tema, puedo poner estos datos que devuelve el uso del tema en alguna variable extra, por ejemplo, que se devuelve de un método de configuración. Digamos tema. Y eso es. Entonces debería poder acceder a las variables del uso del tema. Directamente en la plantilla. Primero veamos lo que tiene. Entonces, ahora tengo toda esta información, y ahora puedo simplemente hacer uso de algo de eso. Digamos. El fondo será esto, 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 a lo largo de 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, omitiendo múltiples capas. También demostramos cómo vincular datos de una tienda Vuex a un hook personalizado, permitiendo la 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, lo siento, herramientas de desarrollo de vista, verás que tenemos varias capas y a través de ellas obtenemos esos data 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 code, creo que el interesante es donde podemos vincular data que se almacena en nuestra tienda Vuex a un hook personalizado que solo tratará con estos data. Y para eso, utilizaré nuestra página anterior con listas de usuarios. Y digamos que tenemos una lógica en la que puedes seleccionar ciertos datos de usuario y luego mostrarlos en otro lugar, ¿verdad? Algo como datos de usuario, datos de este usuario específico que ha iniciado sesión. Y 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 realizará 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 haga clic en un usuario específico, quiero almacenar sus datos en una partición separada de Vuex. Agregaré el evento onclick. No es, digamos, algo como la ciencia de cohetes, pero simplemente mostraré la parte con un objeto calculado 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. Así que estarán completamente descompuestos entre sí. Por eso creo que es un buen ejemplo para mostrar al final.

Así que creé el método select user, lo estoy importando aquí. Lo que haré aquí, es que utilizaré 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 tienda, parte de nuestra tienda VUX. Así que eso es solo una preparación. Por supuesto, también necesito implementar nuestros elementos de la tienda VUX 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 datos de usuario. 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. De acuerdo, y estos datos de usuario solo toman esta propiedad y eso es todo. Así que eso es como una preparación, ya ahora lo que podríamos hacer, podríamos usar un componente y llamar al VUX y hará el trabajo, ¿verdad? Pero si queremos lograr una mayor separación, entonces, como dije, agregaremos un hook separado que solo funcionará con el usuario y luego servirá 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, que por supuesto es 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 él, usaré una tienda como 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 así, 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 objeto computado. Entonces, para esto, básicamente proporcionas como 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 data, ¿verdad? Y aquí, ¿adivina qué? Lo conectaré a la tienda, ¿de acuerdo? Y luego esta será la conexión desde el hook hasta la tienda y el hook se utilizará nuevamente en el componente. Así es como el componente nunca sabrá acerca de la tienda. Entonces, pondré el set, el getter utilizará el getter de Vuex, ¿verdad? ¿Y el setter, adivina qué? Utilizará la forma de modificar la tienda, lo que significa que confirmará los datos de usuario, ¿verdad? Esa es la idea. Entonces, 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 utilizaré este hook aquí. Pero solo me interesa el valor real, así que incluso puedo hacer esto. Lo cual funciona. Todavía no importé el usuario, así que necesito hacerlo rápidamente, de lo contrario tendré problemas. Entonces 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á. Entonces lo importaremos aquí. Es la salsa secreta mágica para asegurarse de que esta parte funcione. Entonces 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, solo se puede solucionar llamando a la función con el argumento adecuado, porque aquí realmente estoy esperando este argumento. Entonces ahora obtendré los detalles completos de cada usuario. El que hacen clic en el componente subsiguiente. Solo para que sea un poco más agradable, pondré solo el nombre de usuario. Ahora, usuario, déjame ver allí. Porque tiene otra propiedad de usuario en él. Sí, así. O incluso puedo hacer el uso de refs. ¿Verdad, sí? Entonces, esa también es una parte agradable de los hooks. Si no necesitas todo lo que proporciona, puedes ponerlo directamente en la parte de retorno de tu función de configuración, y estará bien. Lo único que no debes olvidar es importar los refs aquí. Entonces, esto y luego debería ser user.name.

Conclusión de la Demostración y Migración

Short description:

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

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

Entonces 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í. ¿Quieres decir, tal vez aquí? Sí, esos tres puntos son solo lo mismo que cualquier deconstrucción de JavaScript, como cuando estás descomponiendo objetos en piezas. Correcto. Eso es eso. ¿Cómo se llama, resto o propagación? Propagación, creo, ¿verdad? Así es como es. Es lo mismo que estarías haciendo, digamos si estás en, si estás usando Burix y estás haciendo como map actions, entonces tendrás lo mismo. Así que es sintaxis básica de JavaScript, no es algo sofisticado. Bien, esta pregunta está hecha. Sí, probablemente propagación. Sí, gracias por la, sí, por las aclaraciones, Steve. Genial. Veo una pregunta más de Andre, ¿es el hook lo mismo que composable? Sí, eso es, también lo dije al principio, creo que todavía se utilizan diferentes términos. Hook, composable, comportamiento. Los uso indistintamente. Cuando me refería específicamente a los hooks de React, me refería a los hooks de React, pero eso es, sí. Genial, eso es todo para la demostración. Espero que te haya gustado y de nuevo, enviaré el enlace aquí en el chat para que puedas intentar jugar con él. Más tarde, solo un par de cosas más de las que hablar es sobre la migración, así que también recuerdo que algunos de ustedes mencionaron que todavía están usando la versión dos y si eres especialmente un autor de bibliotecas, hay una herramienta agradable llamada Vue Demi que permite soportar ambos entornos, ambas funcionalidades en Vue 2 y Vue 3. Así que solo instalas Vue Demi e importas todo lo que necesitas de él y dentro de él, se redirigirá. Así que tiene como dependencias de ambos proyectos, ambas versiones y cargará la correcta para ti dependiendo de ciertas configuraciones. Esa es una buena herramienta para si estás usando, escribiendo como una biblioteca o ya tienes una biblioteca o tienes algún plugin que estás usando y quieres que sea capaz de soportar ambas versiones hasta que el tiempo se agote para la versión 2. Así que eso es una cosa, un Vue Demi y la segunda es la construcción de migración. Es algo que está bien descrito en la documentación oficial. Es como una configuración especial en la que puedes poner tu aplicación donde puedes habilitar características 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, que básicamente añades una dependencia llamada vue-compat y reemplazas tu versión dos con la versión tres y luego empiezas básicamente a cambiar las versiones, lo siento, empiezas, puedes alternar todas las características que añade la versión tres y puedes ir reescribiendo gradualmente tu versión v2 en v3 y asegurarte de que nada se rompe o al menos si sabes que algo se rompe y no puedes reescribirlo rápidamente, entonces puedes desactivar esta característica, ¿verdad? Y luego puedes continuar durante algún tiempo usando la versión tres, pero estará como envuelto con esta construcción de compatibilidad de vista. Así que esa es una característica agradable para las migraciones graduales. Espero que aquellos de ustedes que usan v2 tendrán más migraciones pronto y tendrán más usuarios de la versión tres, y sí, eso es principalmente para mi masterclass. Estoy realmente feliz de que ustedes se hayan quedado hasta el final. Me fascinó la cantidad de preguntas y estaré feliz de responder más de ellas si las tienen ahora. Y si no las tienen ahora o les gustaría aclarar algo más tarde, por favor síganme en Twitter. Estaré encantado de charlar allí. Así que eso es todo, también coloco los enlaces una vez más aquí en la diapositiva. Y si tienen alguna pregunta, por favor no duden en preguntar. Y espero haber respondido a sus preguntas. Gracias Ricardo, espero que te haya gustado. Espero que te hayas emocionado por usar Vue 3 y todos los patrones de composabilidad que tiene y debería hacer nuestra vida más fácil y más eficiente como desarrolladores. Gracias Karen. Que tengas una buena tarde, si ya es tarde para ti. Fue realmente un placer compartir todo eso con ustedes. Gracias, adiós.

Watch more workshops on topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
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
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
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)
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
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

Don't Solve Problems, Eliminate Them
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.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.