Un Año en Vue 3

Rate this content
Bookmark

Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Vue 3 se lanzó el 18 de septiembre de 2020.

Después de Vue 3, se lanzaron las versiones menores 3.1 y 3.2.

Aunque estaba planeado, el lanzamiento suave fue elegido para dar tiempo a estabilizar el núcleo y permitir que el ecosistema se pusiera al día, y este proceso tomó más tiempo de lo esperado.

Los principales obstáculos incluyeron los cambios radicales entre Vue 2 y Vue 3, y la falta de soporte de bibliotecas importantes, lo que hizo que fuera un desafío para los proyectos existentes migrar y menos incentivos para que los autores de bibliotecas actualizaran sus bibliotecas.

Vite es una nueva herramienta de construcción que mejora la experiencia de desarrollo con un tiempo de inicio del servidor rápido y un rendimiento de reemplazo de módulos en caliente. Vue 3 se recomendará pronto para usar una configuración basada en Vite.

Vue 3.2 introdujo varias mejoras, incluyendo la nueva característica 'script setup' que mejora la ergonomía al usar la Composition API dentro de los componentes de archivo único.

Se espera que la adopción de Vue 3 crezca significativamente en 2022, especialmente con mejoras en el ecosistema y el soporte de herramientas como Vite.

La estrategia incluye la migración incremental a través de la construcción de migración, la adopción de Vite como herramienta recomendada, y una revisión completa de vuejs.org para reflejar las mejores prácticas y recomendaciones para Vue 3.

Evan You
Evan You
20 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Vue 3 ha visto una adopción significativa y mejoras en rendimiento, tamaño del paquete, arquitectura e integración de TypeScript. El ecosistema alrededor de Vue 3 se está poniendo al día, con nuevas herramientas y marcos de trabajo en desarrollo. La documentación de Vue.js.org está pasando por una revisión completa. PNIA está emergiendo como la solución de gestión de estado a la que recurrir para Vue 3. La API de opciones y la API de composición son ambas opciones viables en Vue 3, con la elección dependiendo de factores como la complejidad y la familiaridad con TypeScript. Vue 3 continúa soportando la instalación de CDN y se recomienda para nuevos proyectos.
Available in English: One Year Into Vue 3

1. Introducción a Vue 3 y sus desafíos

Short description:

Hoy, hablaré sobre lo que ha estado sucediendo después de un año del lanzamiento de Vue 3, qué ha cambiado, qué se ha lanzado y algunas de las lecciones que hemos aprendido en el camino. Vue 3 ha superado los 1.2 millones de descargas por mes. Optamos intencionalmente por una estrategia de lanzamiento suave para permitir a los primeros adoptantes comenzar a usar Vue 3 mientras nos daba tiempo para estabilizar el núcleo y darle al ecosistema el tiempo para ponerse al día. El principal problema que hizo que el ecosistema alrededor de Vue 3 se moviera más lento son los cambios radicales entre Vue 2 y Vue 3.

Hola a todos. Soy Evan, y gracias por sintonizar Vue.js Live. Hoy, hablaré sobre lo que ha estado sucediendo después de un año del lanzamiento de Vue 3, qué ha cambiado, qué se ha lanzado y algunas de las lecciones que hemos aprendido en el camino.

Y lo más importante, también hablaré sobre lo que viene a continuación. Vue 3 se lanzó el 18 de septiembre de 2020. Es una locura pensar que ya ha pasado más de un año. Durante este último año, lanzamos otras dos versiones menores, 3.1 y 3.2. 3.1 se centró principalmente en la construcción de la migración, y 3.2, de la cual hablaremos un poco más tarde, lanzó un montón de nuevas mejoras. Y entre eso, tuvimos 52 versiones de parches y prelanzamiento.

Hoy, Vue 3 ha superado los 1.2 millones de descargas por mes. Pero muchos de ustedes probablemente se estén preguntando, ¿por qué aún no hemos cambiado vuejs.org y las etiquetas de npm para que por defecto sean Vue 3? La respuesta corta es, sucederá muy, muy pronto. La respuesta más larga es, bueno, estaba planeado, pero solo hasta cierto punto. Cuando se lanzó por primera vez Vue 3, sabíamos que no estaba listo para una adopción masiva instantánea, notablemente, algunas bibliotecas centrales todavía estaban en beta, la nueva extensión de DevTools no estaba lista, y el soporte de IDE y la historia de las herramientas estaban ambos faltantes. Además, los proyectos principales del ecosistema como Nuxt y Vuetify también necesitaban tiempo para presentar una versión compatible con Vue 3. Así que optamos intencionalmente por una estrategia de lanzamiento suave. Esto permitiría a los primeros adoptantes comenzar a usar Vue 3, mientras nos daba tiempo para estabilizar el núcleo y darle al ecosistema el tiempo para ponerse al día.

Pero tenemos que admitir, este lanzamiento suave tomó mucho más tiempo del que esperábamos. Aquí voy a ser completamente honesto y discutir algunas de las lecciones que hemos aprendido. El principal problema que hizo que el ecosistema alrededor de Vue 3 se moviera más lento son los cambios radicales entre Vue 2 y Vue 3. Debido a los cambios radicales, fue un desafío para los proyectos existentes migrar. Con menos usuarios finales pasando a Vue 3, los autores de las bibliotecas también tuvieron menos incentivos para actualizar sus bibliotecas para soportar Vue 3. Y porque muchas bibliotecas no soportaban Vue 3, los usuarios finales no podían actualizar sus proyectos. Entonces, ves que estamos en una especie de punto muerto aquí. Esto se abordó hasta cierto punto a través de la construcción de la migración. Pero también se lanzó un poco tarde, ¿verdad? Se lanzó en julio de 2020, julio de 2021. Mucho más tarde de lo que esperábamos. En un mundo ideal, obviamente queríamos hacer que Vue 3 fuera 100% compatible con versiones anteriores. Sin embargo, en la realidad, implica algunos compromisos extremadamente difíciles. Imagina reingeniería de una hélice a un jet mientras está volando. Bueno, tal vez eso sea un poco exagerado, pero permíteme profundizar un poco en esto.

2. Consideraciones para las Actualizaciones Mayores en Vue 3

Short description:

Las actualizaciones mayores en un framework se realizan típicamente una vez cada pocos años para corregir defectos de diseño arquitectónico, introducir nuevas capacidades y eliminar la deuda técnica. Sin embargo, mantener la total compatibilidad con versiones anteriores se vuelve prohibitivamente costoso a medida que se acumula con cada cambio mayor. Optamos por un compromiso en Vue 3, manteniendo la mayoría de los conceptos y APIs intactos mientras introducíamos nuevas capacidades. Aunque algunos aspectos internos han cambiado, logramos actualizaciones mayores en rendimiento, tamaño del paquete, arquitectura, mantenibilidad e integración de TypeScript. Los pequeños cambios disruptivos fueron necesarios para estas mejoras pero hicieron que la actualización fuera desafiante para los proyectos que dependen del comportamiento interno de Vue 2.

¿Qué tipo de actualizaciones consideramos mayores? Tengan en cuenta que no estoy hablando de un SemVer mayor. Estoy hablando de algo que típicamente solo hacemos a un framework quizás una vez cada pocos años, ¿verdad? Las razones comunes para tales actualizaciones mayores incluyen, primero, corregir defectos arquitectónicos de diseño. Segundo, introducir nuevas capacidades fundamentales, y tercero, eliminar la deuda técnica de la arquitectura existente. Tengan en cuenta, estos usualmente implican refactorización masiva o incluso reescritura desde cero, que fue el caso de Vue 3.

Los rasgos comunes de estas razones centrales son que son extremadamente costosos de hacer de manera incremental, ¿verdad? Porque algunos de los problemas están arraigados en la arquitectura y sin revisar la arquitectura, algunas de las mejoras simplemente no eran posibles en primer lugar. Entonces, hacer tales grandes actualizaciones mientras se mantiene la total compatibilidad con versiones anteriores a veces es simplemente prohibitivamente costoso de hacer, ¿verdad? ¿Por qué? Porque la total compatibilidad con versiones anteriores es una carga que se acumula con cada nuevo cambio mayor introducido. Cuanto más ambiciosos son los nuevos cambios, más deuda técnica se acumulará durante el proceso.

A largo plazo, hará que el proceso sea aún más difícil, añadir nuevas características, mucho más difícil. Y lo más importante, se vuelve cada vez más costoso mantener el software a largo plazo. Ahora, por otro lado, podemos reducir el alcance de los cambios para hacer las cosas más factibles, pero esto también resulta en mejoras menos ambiciosas, menos posibilidades exploradas y potencialmente estancamiento. Así que es casi como si hubiera un montón de perillas que puedes intentar girar, pero cuando giras una de ellas, las otras se moverán en reacción a la que estás girando.

Entonces, aquí visualicé algunos de los factores que tenemos que considerar mientras hacemos actualizaciones mayores en cuatro perillas, ¿verdad? Estas son la compatibilidad con versiones anteriores, qué tan fácil es actualizar, el costo para implementar y mantener los cambios y mantenerlo a largo plazo, y finalmente, el nivel de mejoras que estos cambios pueden provocar. Entonces, en el caso de Vue 3, el ejemplo es si giramos la compatibilidad con versiones anteriores al 100%, esto hará que sea extremadamente fácil de actualizar, pero también aumentará significativamente los costos de implementación y mantenimiento. Y si intentamos empujar la escala de mejora hasta el 100% al mismo tiempo, aumentará el costo a una escala casi inviable. Ahora, si giramos la perilla de compatibilidad un poco hacia abajo a un 90%, ahora podemos tener tanto un costo razonable como mejoras bastante importantes, pero la actualización del usuario sufrirá, ¿verdad? Se volverá más difícil actualizar. Así que esto esencialmente resume los compromisos que hemos optado en Vue 3, ¿verdad? Intentamos mantener la mayoría de los conceptos del framework y las APIs intactas mientras introducíamos nuevas capacidades. Así que la API es 90% compatible, no es 100% compatible. Lo más importante, algunos de los aspectos internos han cambiado, ¿verdad? Pero pudimos traer actualizaciones mayores en casi todos los aspectos desde el rendimiento hasta el tamaño del paquete hasta la arquitectura interna, la mantenibilidad a largo plazo, la integración de TypeScript, ¿verdad? Es una mejora en todos los aspectos. Desafortunadamente, también tuvimos que introducir algunos de los pequeños cambios disruptivos. Muchos de los cambios de la API pública ahora están cubiertos en la construcción compacta. Sin embargo, algunos de los intercambios son más fundamentales, por ejemplo, el cambio de usar getters-setters de ES5 a proxies para el sistema de reactividad o cambiar el formato del DOM virtual subyacente. Estos cambios fueron necesarios para el nivel de mejoras que estábamos buscando. Sin embargo, también hicieron que fuera más desafiante para los proyectos existentes actualizar, especialmente las aplicaciones con dependencias externas que dependen del comportamiento interno de Vue 2. Este es el mayor obstáculo que hemos visto en la práctica.

Ahora, no estoy tratando de buscar excusas al hablar de todo esto. Mirando hacia atrás, probablemente podríamos haber hecho algunas cosas mucho mejor, especialmente con los cambios disruptivos para hacer el proceso de actualización más suave. Podríamos haber introducido una construcción compacta antes y definitivamente deberíamos haber trabajado en los nuevos documentos antes también. Pero en última instancia, todavía creo que hacer que Vue 3 sea 100% compatible con versiones anteriores, especialmente con otras bibliotecas que dependían del comportamiento interno de Vue 2, es algo que simplemente era demasiado costoso para comprometerse. No podríamos obtener el nivel de mantenibilidad y el nivel de mejoras que queremos, que tenemos ahora mismo al mismo tiempo, si nos comprometemos a la compatibilidad total con versiones anteriores. Así que, suficiente sobre los cambios disruptivos, pero ahora hablemos de algo más optimista.

QnA

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
TypeScript Congress 2023TypeScript Congress 2023
31 min
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.