Cómo migrar sin problemas una gran base de código a Vue 3

Rate this content
Bookmark

Migrar a Vue 3 puede ser una tarea importante (dependiendo del tamaño de tu proyecto). En Crisp, recientemente migramos nuestra aplicación (250K líneas de código) de Vue 2.6 a Vue 3.2 en aproximadamente 2 semanas.

En esta charla, compartiremos nuestros aprendizajes para que puedas beneficiarte de nuestra experiencia.

20 min
21 Oct, 2021

Video Summary and Transcription

Hola, soy Baptiste de CRISP, y en esta conferencia te mostraré cómo migrar un proyecto grande de Vue 2 a Vue 3. La migración a Vue 3 es un proceso sencillo con muchas mejoras, como un mejor rendimiento y modularidad. La estrategia de migración implica mantener la aplicación existente de Vue 2 mientras te mueves gradualmente a Vue 3. Actualizar las bibliotecas principales y reemplazar las API de Vue 2 con las API de Vue 3 son pasos necesarios. El impacto del nuevo sistema de reactividad de Vue 3 ha optimizado la base de código en CRISP, y la empresa está contratando desarrolladores full-stack y apoyando a la Fundación Vue.js.

Available in English

1. Introducción a la migración de Vue 3 y sus beneficios

Short description:

Hola, soy Baptiste de CRISP, y en esta conferencia te mostraré cómo migrar un proyecto grande de View 2 a View 3. Recientemente, en CRISP hemos estado moviendo nuestra aplicación de mensajería de View 2.6 a View 3.2, y hasta ahora puedo decirte que el proceso de migración ha sido muy fluido. Moverse de Vue 2 a Vue 3 es una situación diferente a moverse de Angular 1 a Angular 2. Vue 3 es una migración simple. Viene con muchas mejoras, como un mejor rendimiento, modularidad y cambios en la API. Sin embargo, hay algunas compensaciones, como la eliminación del soporte para IE11 y APIs duplicadas.

Hola, soy Baptiste de CRISP, y en esta conferencia te mostraré cómo migrar un proyecto grande de View 2 a View 3. Recientemente, en CRISP hemos estado moviendo nuestra aplicación de mensajería de View 2.6 a View 3.2, y hasta ahora puedo decirte que el proceso de migración ha sido muy fluido. Sin embargo, hay muchos errores que se pueden evitar al migrar a View 3, y eso es exactamente de lo que vamos a hablar en esta conferencia.

Así que soy el CEO de CRISP, y en CRISP estamos desarrollando una aplicación de mensajería que permite a las empresas unificar todas sus relaciones con los clientes utilizando una sola aplicación. Básicamente, es un buzón compartido que permite a las empresas unificar los mensajes desde el chat en vivo en el sitio web, hasta los correos electrónicos, los mensajes directos en Twitter o en WhatsApp, e incluso puedes responder a tus problemas en GitHub directamente desde CRISP. Y todo eso se hace utilizando Vue.js. Tenemos alrededor de 300,000 empresas que utilizan CRISP y al final son alrededor de 200 millones de personas que utilizan CRISP cada mes. Ha sido un gran desafío para nosotros pasar de Vue 2 a Vue 3 porque queríamos evitar cualquier impacto para nuestros clientes.

Moverse de Vue 2 a Vue 3 es una situación diferente a moverse de Angular 1 a Angular 2. De hecho, muchos desarrolladores, cuando se lanzó Angular 2, optaron por utilizar otro framework como Vue.js en su lugar porque el costo de migración era demasiado alto. La curva de aprendizaje para Angular 2 era demasiado alta. Por esta razón, si observas las tendencias de Google, Vue.js se volvió cada vez más popular e incluso reemplazó a Angular.js. Por lo tanto, pasar a Vue 3 no es este tipo de situación porque Vue 3 es una migración simple. Una razón para esto es el paquete Vue.compat. El paquete Vue.compat te permite utilizar código de Vue 2 junto con el código base de Vue 3. Además, Vue 3 te permite utilizar las mismas herramientas. Puedes utilizar el mismo Vue CLI con el mismo Webpack. Además, Vue 3 tiene una documentación similar. Y finalmente, no necesitas volver a aprender todo porque Vue 3 es muy similar a Vue 2. Pero Vue 3 viene con muchas mejoras diferentes. Y la primera es el rendimiento. Vue 3 viene con muchas mejoras en términos de rendimiento gracias al nuevo sistema de reactividad. Además, Vue 3 es más modular gracias a la API de composición. También hay muchos cambios buenos en la API y uno de ellos es el nuevo sistema v-model que te permite tener dos v-models para el mismo componente. Pero obviamente, Vue 3 tiene algunas compensaciones. La principal es dejar de admitir IE11. Pero siendo honestos, hoy en día no es un gran problema. Por ejemplo, para una aplicación como Crisp, teníamos alrededor del 0.1% de empresas que utilizaban IE11. Así que no es un gran problema dejar de admitir IE11. Además, algunas APIs se han duplicado, como la API global de Vue.

2. Estrategia y pasos de migración a Vue 3

Short description:

En Vue 3, ya no es necesario usar vue.set o vue.delete, gracias al nuevo sistema de reactividad. Los filtros se han duplicado, lo cual fue un desafío para nosotros, ya que estábamos acostumbrados a usarlos en nuestra aplicación Angular. Nuestra estrategia de migración implicó mantener la aplicación existente de Vue 2 mientras nos movíamos gradualmente a Vue 3, reduciendo el impacto en los clientes. Creamos una rama dedicada para Vue 3 y fusionamos los proyectos sin conflictos. Mantuvimos las mismas herramientas y evitamos implementar la nueva API de composición para minimizar errores. Los siguientes pasos implican actualizar el archivo packages.json, la configuración de Vue y el archivo main.js.

Ya no podrás usar vue.set o vue.delete. Pero en realidad no es un gran problema. Porque al usar Vue 3 ya no necesitas hacer eso gracias al nuevo sistema de reactividad. Además, los filtros se han duplicado y para nosotros fue importante porque veníamos del mundo de Angular. Antes, Crisp era una aplicación Angular y usábamos filtros en gran medida.

Así que ha sido un desafío para nosotros migrar todos nuestros filtros a una nueva sintaxis compatible con Vue 3. Ahora hablemos de la estrategia de migración. Queríamos mantener nuestra aplicación existente de Vue 2 mientras movíamos el código a Vue 3 y también queríamos reducir el impacto en los clientes. Una vez que lanzamos la versión de Vue 3, no notaron ningún cambio y como somos un equipo pequeño en Crisp, solo 4 desarrolladores, queríamos reducir el tiempo de migración.

Entonces, la estrategia fue crear una rama dedicada para Vue 3. Utilizamos nuestra rama principal existente para implementar funciones y correcciones en la aplicación de producción existente. Al final, pudimos trasladar todas las correcciones de la rama principal a la versión de Vue 2 a la versión de Vue 3 porque Vue 2 y Vue 3 son muy similares. Así que pudimos fusionar los dos proyectos sin conflictos. También queríamos utilizar las mismas herramientas, por lo que mantuvimos Vue CLI y no utilizamos Vite. Además, no implementamos la nueva API de composición porque queríamos evitar el riesgo de crear nuevos errores y regresiones. No hay API de composición. Solo queríamos migrar lo necesario. Es probable que utilicemos la API de composición más adelante, pero no ahora.

Han pasado 5 minutos hablando y ahora vamos a codificar. Esta es la aplicación existente de Crisp utilizando V2. El primer paso sería actualizar tu archivo packages.json para poder actualizar Vue a Vue 3. Así que vamos a tener que actualizar Vue 2 a Vue 3 y también incluir el paquete vue-compat. Finalmente, vamos a tener que actualizar vue-loader a la versión 16 de Vue. También vamos a tener que actualizar los servicios de Vue CLI, y esto es muy importante, para poder realizar el siguiente paso. El siguiente paso sería actualizar la configuración de Vue. Vamos a tener que actualizar webpack para vue-loader para poder habilitar Vue 3 y utilizar el modo compacto de Vue 2. Así que vamos a resolver el paquete vue-compat en lugar de vue, y esto es muy importante hacerlo. El siguiente paso sería abrir tu archivo main.js y vamos a reestructurar este archivo de la siguiente manera. Primero, tendrás que importar Vue de una nueva manera. Tendrás que importar createApp y configureCompat.

3. Creación de la aplicación Vue 3 y actualización de las bibliotecas principales

Short description:

Para migrar de Vue 2 a Vue 3, debes actualizar las bibliotecas principales como vuex y vue router. Utiliza app.use y app.mount en lugar de importar dentro del constructor de Vue. Actualiza el enrutador con una expresión regular para la ruta predeterminada. Actualiza las bibliotecas de la comunidad como vValidate y el complemento de internacionalización de Vue. Reemplaza las API de Vue 2 con las API de Vue 3 y desactiva el modo de compatibilidad. Utiliza funciones nativas de JavaScript en lugar de vue.set y vue.delete.

Entonces, ahora debes crear tu aplicación de esta manera. Ahora, en lugar de importar el enrutador y el almacenamiento dentro del constructor de Vue, tendrás que utilizar app.use y también ahora tendrás que utilizar app.mount. Finalmente, el siguiente paso sería utilizar configure-compat. De esta manera, habilitarás la compatibilidad de Vue 2 con Vue 3.

Entonces, como puedes ver, cuando abrimos nuestra aplicación, tenemos errores. Y la razón es que necesitamos actualizar las bibliotecas principales. Así que tendremos que actualizar vuex y vue router a la versión 4. No necesitas hacer nada para vuex, sin embargo, como puedes ver, tenemos algunas actualizaciones que hacer en el enrutador. Puedes consultar la documentación del enrutador de Vue. Así que necesitamos reestructurar el enrutador de esta manera. Necesitamos importar el enrutador de esta manera y vamos a reestructurar el constructor como este.

De acuerdo, ahora podemos abrir nuestra aplicación y como puedes ver, hay un error. Y la razón por la que obtenemos esto es porque ahora necesitamos utilizar una expresión regular para la ruta predeterminada. Así que vamos a abrir el archivo del enrutador y vamos a reestructurar esta línea con una expresión regular. Ahora es muy importante actualizar las bibliotecas de la comunidad. Dependemos mucho de vValidate y del complemento de internacionalización de Vue. Así que primero tenemos que actualizar esas bibliotecas. Como puedes ver, ahora nuestra aplicación funciona gracias al paquete VueCompat. Básicamente funciona porque tenemos la compatibilidad de Vue 2. Sin embargo, para poder aprovechar el rendimiento de Vue 3 y todas las nuevas características, queríamos deshacernos del paquete VueCompat. Así que lo que tuvimos que hacer fue trasladar todas las API de Vue 2 a las API de Vue 3. Por ejemplo, tuvimos que reemplazar todos los métodos destruidos por la versión de Vue 3, que es unmounted, y lo mismo para v4.destroy por v4.unmount. Así lo hicimos para todas las nuevas API de Vue 3 y una vez que trasladamos las API de Vue 2 a las API de Vue 3, desactivamos el modo de compatibilidad para esas características específicas. Esto nos permitió realizar un seguimiento del progreso de la migración. Ahora veamos un ejemplo de cómo trasladar vue.set y vue.delete a una versión de Vue 3. Simplemente abre tu VS code y echa un vistazo a todos los vue.delete. Ya no necesitamos vue.delete, simplemente reemplázalo utilizando una función nativa de JavaScript. Y haz lo mismo para todos tus vue.delete. Y obviamente puedes hacer lo mismo para vue.set. Puedes hacerlo de esta manera.

4. Actualización de vmodels y emisión de eventos en Vue 3

Short description:

En Vue 3, es posible utilizar dos vmodels diferentes para el mismo componente. Actualiza cada componente para utilizar una sintaxis compatible con V3. Reemplaza 'value' por 'modelValue' y actualiza 'toEmitInput' por 'modelValue'. Además, especifica qué eventos emite tu componente actualizando 'this.emit' y proporcionando un array de eventos emitidos.

Una tarea importante para nosotros fue actualizar los vmodels porque, obviamente, en un proyecto grande, estamos usando vmodels mucho. Y ahora, desde Vue 3, es posible utilizar dos vmodels diferentes para el mismo componente. Así que lo que vamos a hacer es actualizar cada componente para que podamos utilizar una sintaxis compatible con V3. En lugar de utilizar 'value', debemos reemplazarlo por 'modelValue'. Haz esto para cada valor en tu componente. Y ahora, cuando quieras hacer una actualización para tu valor, tenías que hacer 'toEmitInput'. Ahora tendrás que actualizar 'modelValue'. Y cuando lo piensas, tiene sentido. Pero ahora, también hay un gran cambio en Vue 3. Necesitas especificar específicamente qué eventos emite tu componente. Nuestro componente emite 'updateModelValue'. También tenemos 'blur', 'click', etc. Así que tendrás que buscar todos tus 'this.emit' dentro de tu proyecto. Y para cada componente, especifica específicamente qué eventos emite tu componente en un array.

5. Migración de filtros de AngularJS y actualización de bibliotecas

Short description:

Venimos del mundo de AngularJS y dependíamos de los filtros. Los movimos a métodos nativos de JavaScript y los importamos como métodos globales en Vue. Reemplazamos VIF con propiedades computadas y actualizamos bibliotecas de terceros. Trello nos ayudó a gestionar las tareas. Después de 2 semanas, lanzamos la migración a Vue 3 con grandes mejoras de rendimiento.

Venimos del mundo de AngularJS y anteriormente, Crisp solía ser una aplicación de AngularJS. Por lo tanto, dependíamos mucho de los filtros y teníamos alrededor de 200 filtros. Así que tuvimos que encontrar una solución, una forma elegante de mover todas esas características a View3.

Lo que hicimos fue mover todos los filtros a métodos nativos de JavaScript. Aquí tienes un ejemplo con un filtro ColorForValue. Es una función nativa de JavaScript. Y ahora, lo que vamos a hacer es importar esta función como un método global en Vue. Creamos un objeto global $Filter, para que podamos acceder a todos nuestros filtros en cada componente. Aquí tienes un ejemplo con un filtro de mayúsculas.

Y luego, para encontrar todos los filtros que estábamos usando dentro de los componentes, hemos estado utilizando una expresión regular. Con esta expresión regular, básicamente puedes encontrar todos tus diferentes filtros. Y de esta manera puedes mover todos los filtros a una nueva sintaxis de método. También descubrimos que ya no es posible usar VIF con V4 con Vue 3. Y estoy de acuerdo, no es una buena idea usar los dos juntos. Pero de todos modos, lo hemos estado usando, así que tuvimos que reemplazar este comportamiento con propiedades computadas. Otra tarea importante fue actualizar algunas bibliotecas de terceros.

Tuvimos que bifurcar algunas bibliotecas, como Vue Chartist. Nada muy complicado, como puedes ver, mover una biblioteca externa de Vue 2 a Vue 3 no es muy complicado. Básicamente, la mayoría de las cosas están relacionadas con la API global de Vue. Solo necesitas reemplazar el constructor y algunas API. Y tuvimos que hacer eso para alrededor de 5 bibliotecas diferentes. Nos apoyamos en Trello para gestionar todas las tareas mientras nos movíamos a Vue 3. Y era importante para nosotros no pasar por alto nada. Deberías usar algo como GitHub, GitLab, JIRA o Trello para anotar todo, así no te pierdes ningún error o biblioteca.

Pudimos lanzar esta migración a Vue 3 después de casi 2 semanas. Y hasta ahora, ha sido genial, nadie ha notado nada. Para ser honesto, tuvimos algunos errores, pero nada muy importante. La buena noticia ha sido el rendimiento. De Vue 2 a Vue 3, hemos logrado reducir la carga de Jira. Y hasta ahora, la aplicación se siente más rápida y receptiva.

6. Impacto de Vue 3, Contratación y Apoyo de la Comunidad

Short description:

El nuevo sistema de reactividad de Vue 3 ha tenido un impacto significativo en la optimización de la base de código en Crisp, beneficiando a usuarios de todo el mundo, incluidos aquellos con computadoras de baja gama. A medida que la conferencia concluye, Crisp está contratando desarrolladores full-stack y fomenta el patrocinio de la Fundación Vue.js para apoyar a la comunidad y al proyecto a largo plazo. Para consultas adicionales, comuníquese a través de Crisp.chat o por correo electrónico.

Y definitivamente es gracias a Vue 3 y su nuevo sistema de reactividad. Y el impacto es muy bueno, porque en Crisp tenemos usuarios de todo el mundo y algunos usuarios utilizan computadoras de baja gama. No todos están utilizando poderosas MacBooks como los desarrolladores. Y algunas personas tienen computadoras de baja gama. Por lo tanto, es importante optimizar la base de código y Vue 3 es excelente para eso.

Así que ahora es el final de esta conferencia. Como recordatorio, Crisp está contratando desarrolladores full-stack, así que si quieres unirte a nosotros trabajando en Vue.js, puedes visitar nuestro sitio web en Crisp.chat. La mayoría de nuestro equipo trabaja de forma remota y el resto trabaja en Francia. Como confiamos mucho en Vue.js, queríamos devolverle algo a la comunidad. Por eso ahora somos patrocinadores de la Fundación Vue.js. Realmente creo que deberías hacer lo mismo si tu empresa es lo suficientemente rentable. Esto nos ayudará a hacer crecer la comunidad y a ayudar al proyecto a largo plazo.

Realmente espero que hayas disfrutado viendo el video. Puedes contactarnos en Crisp.chat. Tienes mi correo electrónico. Y estaré aquí para responder todas tus preguntas en esta comunidad de Discord. Que tengas un buen día.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
Vue.js London Live 2021Vue.js London Live 2021
20 min
Vuetify 3: Titan
Top Content
Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.