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!

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
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
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
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
El creador de Vue js da una actualización sobre las nuevas características de la tecnología.
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
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Cuanto más trabajas en una aplicación, más complicado se vuelve su enrutamiento y más fácil es cometer un error. "¿Se llamaba la ruta usuarios o usuario?", "¿Tenía un parámetro id o era userId?". Si solo TypeScript pudiera decirte cuáles son los nombres y parámetros posibles. Si solo no tuvieras que escribir una sola ruta más y dejar que un complemento lo haga por ti. En esta charla repasaremos lo que se necesitó para traer rutas automáticamente tipadas para Vue Router.

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 Kuznetcov
Mikhail Kuznetcov
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
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.
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa.

Tabla de contenidos
- Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos.
- Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar.
- Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido.
Nivel del masterclass

NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos.