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

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.

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.

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.

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.

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.

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.