Mi experiencia con Vue 3

30 de mayo de 2024 Roberto Magalhães

Nuestro desarrollador UX/UI y Frontend, Gustavo Nering, comparte sus ideas sobre por qué le encanta este marco.

Vue es un marco encantador. Confieso que no fue mi primera opción como desarrollador frontend, pero una vez que lo tuve en mis manos no hubo vuelta atrás. Esto se debe a que hay mucho que amar aquí, especialmente su increíble documentación y el hecho de que obliga al desarrollador a dividir las cosas en fragmentos de código más pequeños, lo que en última instancia ayuda con el desarrollo y la depuración.

Comencé con Vue 2 y refactoricé una aplicación de Vue 3 en los últimos meses. En principio, es como usar cualquier otro marco, con la diferencia de que toma gran parte de la forma de pensar de Vue en una nueva forma de organizar y llamar propiedades.

Ahora que he usado Vue 3, puedo decir con seguridad que este es un marco excelente . Estas son algunas de las razones:

API de composición

Como principiante con Vue, existe una curva de aprendizaje considerable.

La API de opciones tiene una forma muy estructurada de organizar el código. En última instancia, un desarrollador utiliza un objeto grande con propiedades de datos, propiedades calculadas y métodos (hay más propiedades para escenarios específicos) donde cada propiedad tiene su propia particularidad.

Una gran ventaja de Vue es que el código es muy visual. Es fácil saber qué es un accesorio, qué es un evento y qué son datos reactivos porque la API de opciones organiza un objeto con estos atributos en mente. Esto hace que sea más fácil comprender lo que sucede en el código.

La gran desventaja es que el código es muy Vue. Estás escribiendo una combinación de Vue y JavaScript, por lo que hay una curva de aprendizaje más grande en comparación con algo en React donde la parte JS es JS puro con algunos ayudantes de React para hacer que la lógica de la interfaz de usuario funcione.

Este es un problema que resuelve la API de composición.

Puede agregar una etiqueta de configuración a la etiqueta del script y tener JavaScript puro con algunos asistentes de Vue para que la lógica de la interfaz de usuario funcione. Todo ello sin perder la fácil comprensión de lo que sucede en el código. Los ayudantes incluso marcan su código, lo que ayuda al desarrollador de Vue a descubrir qué sucede en el componente.

Como ya no trabajará con un objeto grande, si necesita llamar a una variable, simplemente llámela. Ya no es necesario guardar el componente para luego descubrir que no funciona porque olvidó agregarlo antes de la propiedad.

Pero si un equipo está enamorado de la API de opciones, le alegrará saber que todavía es compatible. El equipo de Vue tiene la amabilidad de mantener todo funcionando sin romper lo que funcionaba antes.

enlace v en CSS

Me encanta CSS. En serio, no estoy mintiendo. A veces necesitamos hacer que algo en nuestro componente tenga un estilo dinámico.

En Vue 2, hay una manera de hacer esto usando una combinación de propiedades personalizadas de CSS con una propiedad calculada de Vue. Pero esta es una solución. Funciona, pero es un poco complicado y un poco difícil de entender cuando lo lees.

En Vue 3 puedes llamar a v-bind en tu CSS. Simplemente agregue su propiedad de datos entre paréntesis y el estilo estará listo para ser dinámico.

Por el amor de Pinia

Al igual que Vue, VueX tiene una opinión sólida sobre cómo organizar su tienda. Necesita mutaciones para cambiar un estado, por lo que cada acción implica una confirmación que se llama en otro archivo, lo cual es muy exigente para el desarrollador.

Pinia elimina la necesidad de mutaciones. También te pide mantener todas las tiendas en un solo archivo, haciendo la experiencia del desarrollador mucho más placentera. Esto obliga al equipo a pensar más en cómo organizar su tienda.

Puedo contarles una anécdota personal para ilustrar la importancia de esto. Mi equipo empezó a trabajar sin pensarlo mucho en una aplicación en la que trabajaba mucha gente. Entonces solo había una tienda con muchas cosas que hacer. Para que fuera más fácil de entender, mi equipo se reunió y dividió esa gran tienda en tiendas específicas más pequeñas, lo que ayudó mucho a comprender de dónde venía un pedazo de estado.

Cuando no hay mutación, es mucho más rápido depurar un problema porque sólo hay 2 lugares donde las cosas pueden salir mal: en un captador o en una acción. Y como no necesitamos usar captadores todo el tiempo, el problema probablemente esté en la acción.

TypeScript mandona

Eso es un gran problema. Y no es sólo una nueva forma de organizar el código, es otra forma de pensar en JavaScript.

JavaScript puede volverte perezoso porque solo quiere hacer las cosas. Entonces aceptará una cadena cuando debería ser un número y simplemente la ejecutará. Mientras la aplicación funcione, ese será el problema de otra persona en el futuro.

Como señala mi ejemplo, este es un comportamiento de JavaScript tanto bueno como malo.

Cuando empiezas a usar TypeScript, esa sensación de "¿Por qué necesito hacer esto?" Es simplemente más código para IntelliSense que te deja cansado porque algunos errores no tienen sentido. Básicamente, estaba acostumbrado al afán de JavaScript por hacer que mi código se ejecutara lentamente. Pero tiene sentido evitar los problemas potenciales de que algo no esté definido o que un punto final no recupere datos.

Tomé la decisión consciente de dejar de luchar contra la adopción de TypeScript y, en cambio, comenzar a aceptarlo como algo que está aquí para ayudar. El tipo hace que su código sea más confiable, lo que hace que su aplicación sea menos propensa a errores misteriosos. En última instancia, ayuda a crear un mejor producto y una mejor experiencia de usuario para los usuarios finales.

¿Deberías optar por Vue 3?

Como todo, depende.

Como desarrollador, la experiencia de desarrollo de trabajar con la API de composición aporta muchos beneficios. Teniendo en cuenta que la mayoría de los desarrolladores frontend provienen de React, Vue 3 parece mucho más familiar que la API de opciones.

Además, TypeScript aporta muchos beneficios al definir estructuras de objetos directamente en el código. Cuando se trabaja con componentes, es bastante común utilizar un objeto como soporte. TypeScript requiere que cree un tipo con la estructura de objeto de esta propiedad. Si no tiene suficiente tiempo para crear documentación adecuada sobre cómo usar este componente, el tipo puede ayudarlo a comprender qué espera este soporte. Trabajar con Vue es una experiencia increíble y Vue 3 sólo hace que la experiencia sea aún mejor. Entonces, deberías probarlo para ver cómo te va.

Si le gustó esto, asegúrese de consultar nuestros otros artículos de Vue.