Vue.js es sin duda uno de los frameworks más populares del ecosistema web, y tras bastante tiempo de espera, por fin tenemos todos los cambios de la tercera versión disponibles para usar en producción, así que este es un buen momento para repasar todos los cambios que Vue 3 ha traído.
El año anterior trajo muchas novedades para la comunidad de Vue. El lanzamiento de la tercera versión significó un cambio importante en muchos sentidos, sobre todo para quienes criticaron a la nueva Composition API desde su primera aparición, cuando fue propuesta por Evan You, creador de Vue, en el año 2019.
Al inicio, la propuesta tomó por sorpresa a la comunidad, puesto que Composition API se alejaba bastante de la forma de escribir componentes hasta ese momento, con la ahora conocida cómo Options API, la sintaxis original de Vue.
Sin embargo, gracias a que se realizó el desarrollo y lanzamiento de esta nueva versión de un modo bastante cuidadoso, la comunidad pudo adaptarse y aceptar los cambios de forma positiva. En especial, porque se aclaró que Options API seguirá siendo una sintaxis válida, mientras que Composition API permitirá escribir el código con una mejor sintaxis, pero completamente opcional.
El mismo equipo detrás de Vue aclaró que todo el conocimiento de la segunda versión sigue siendo aplicable para la tercera versión, a excepción de unos cuantos cambios.
Las únicas características que ya no estarán disponibles son aquellas que ya se habían marcado cómo obsoletas en la versión anterior, y otras que ya no serían realmente necesarias en la versión actual, así que nada de qué preocuparse.
Cómo ya te podrás imaginar, Composition API es el cambio más importante entre versiones. Esta nueva API permitirá dejar atrás la definición de componentes por medio de un objeto de configuración, para dar paso a una sintaxis de programación funcional, aunque manteniendo las facilidades de reactividad que caracterizan a este framework.
Composition API permitirá crear componentes mejor estructurados y código más limpio, además, se reescribió todo el framework en TypeScript, lo que significa que si bien no es obligatorio usar Vue con TypeScript, ahora es 100% compatible para quienes deseen utilizarlos juntos.
Otra punto importante sobre Composition API es que su sintaxis funcional nos abre un nuevo universo de posibilidades sobre la reutilización de código entre componentes, y gracias a que ahora la reactividad funciona de forma independiente al resto del framework, también nos permite pensar en nuevas y mejores formas de realizar el manejo de estado.
Como la nueva sintaxis es más funcional y se reescribió todo el framework, todas las librerías del ecosistema tendrán que actualizarse para dar soporte y ser compatibles, y las librerías de manejo de estado no serán la excepción.
Vuex es la librería de manejo de estado más relevante para la segunda versión de Vue, y una de las pocas librerías con soporte oficial de la misma comunidad. Pero ahora se abre paso una nueva alternativa llamada Pinia, que es una reinterpretación de Vuex usando la nueva sintaxis para hacer nuestro código todavía más fácil, limpio y reutilizable.
Es fundamental mencionar que Pinia se creó cómo una propuesta para lo que en el futuro podría ser Vuex 4, y es muy probable que más adelante la próxima versión de Vuex integre lo que ahora es un proyecto separado.
Este es un gran cambio en el ecosistema, ya que hasta hace unos meses Vuex era tan importante que nadie podría haber imaginado que habría algo mejor. Esto nos demuestra que el cambio de versión traerá consigo una nueva ola de oportunidades, innovaciones y nuevas ideas para mejorarlo todo.
Nuxt.js es otra herramienta del ecosistema que también se actualiza, y de la misma manera que se reescribió todo el core de Vue, el equipo de Nuxt tomó nueve largos meses en reconstruir todo y hacer, Nitro, su nuevo core.
La nueva versión de Vue podría hacer innecesario el uso de un proyecto como lo era Nuxt en su versión anterior, pero la nueva versión, ya en beta, agrega un sin fin de nuevas características que sin duda harán que esta herramienta consiga un nuevo y mayor impulso en la comunidad.
Otro proyecto es Vitesse que llega cómo una alternativa a Nuxt más ligera, pero muy potente; una excelente herramienta que aumentará nuestra productividad gracias a su amplia variedad de funcionalidades que nos hacen la vida más fácil.
Adicionalmente, entra un nuevo jugador a la cancha, el nuevo favorito de la comunidad, Vite. 💚
Vite es una herramienta de desarrollo para proyectos frontend, no solamente basados en Vue, sino para cualquier otro framework que lo necesite. Viene siendo una alternativa bastante más rápida y ligera que otros cómo Webpack, Rollup y Parcel.
El impacto de Vite ha sido tan bueno para la comunidad que se convirtió en la herramienta mejor valorada y más querida por el ecosistema de JavaScript en la edición 2021 de State of JS, una de las encuestas más importantes del ecosistema de JavaScript en general.
Por último, pero no menos importante, cabe destacar que como todo cambio de versión, Vue 3 entra en un periodo de transición.
Mucho código y tutoriales están escritos para la versión dos, así cómo la mayoría de librerías de componentes y demás herramientas. Pasará algún tiempo mientras la comunidad crea nuevas alternativas o actualiza las ya existentes a la nueva versión.
Aun así, la comunidad de Vue es una de las más propositivas, y las soluciones no se han hecho esperar, ya que es posible encontrar algunas librerías que permiten adaptar componentes generados para la versión 2, las cuales funcionan en la tercera versión.
No obstante, es crucial para el ecosistema comenzar a migrar su código existente, ya que la versión dos ha dejado de ser la versión por defecto y la nueva versión será la que reciba atención especial por parte del core team de Vue.
Aunque el Options API de la versión dos de Vue sigue siendo parte del framework, eso no significa que la versión dos aún sea recomendable, ahora que la versión tres es la versión por defecto, todas las actualizaciones y parches de seguridad se realizarán sobre esta versión.
Es mejor tomar precauciones y migrar a la versión más reciente, siempre.
Como puedes ver, el cambio de versión en realidad es un cambio importante, y aunque la mayoría de lo que ya sabías sobre Vue sigue vigente, es necesario que te actualices para no tener que sufrir por el legacy code. 😬
Ahora que finalmente Vue 3 es la versión por defecto, si te interesa aprenderlo por primera vez, o ya lo conoces, pero deseas actualizarte, este es el mejor momento para comenzar a hacerlo, y la verdad, es que todos los nuevos cambios hacen que Vue sea un framework mucho mejor. 💚
Ahora que finalmente Vue 3 es la versión por defecto, es el mejor momento para aprenderlo, ya sea por primera vez o para actualizar tus conocimientos, y qué mejor que empezar por los conceptos básicos en el nuevo Curso de Vue.js: Introducción y Fundamentos, dónde aprenderás las bases de esta librería en su versión más reciente, te veo en clases. ✌
Hicieron un live sobre esto verdad?
Lo admito, yo soy el xocas
Excelente artículo, tengo planeado tomar el curso, aprendí VueJS 2 y lo usé en el trabajo por 1 año. Pero sin dudas la versión 3 tiene una mejor reusabilidad del código y mucho parecido a los hooks de React.
Para los que vienen de React, será relataviamente fácil migrar.
Me gusta mucho Vue, le voy a dar una oportunidad y ver que se le puede extraer al framework (tengo conocimientos básicos)
Voy con todo a perfeccionar el desarrollo con Vue.js
Que ganas de aprender Vue, cuando complete mi ruta en Backend con python sin duda la dare un vistazo.
Excelente información.
No queda de otra mas que actualizar los conocimientos y seguir el paso al progreso de VUE
alguien me puede ayudar a crear una buena ruta de aprendizaje Full Stackdesde cero con: Vue js, Node js, Express y Postgres SQL, por favor.
De antemano les agradezco su ayuda y espero que también sus comentarios sirvan como una guía para otras personas que entren a este blog y no sepan muy bien donde comenzar.
buena info!