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.
1. Introducción a la migración de Vue 3 y sus beneficios
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
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
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
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
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
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.
Comments