Con el continuo aumento de los frontend JavaScript frameworks, incluido el nuevo Vue.js 3, se ha vuelto vital mantenerse al día y entender todas sus nuevas características.
En este artículo, exploraremos Vue.js 3 y sus nuevas características. Estas últimas adiciones hacen que Vue.js sea aún más robusto, convirtiéndolo en un gran framework a considerar para tu próximo proyecto. Aprenderás en detalle 10 cosas que debes saber sobre Vue.js y cómo te ayudará a entregar aplicaciones frontend escalables y de alto rendimiento.
¿Preparados? Vamos.
¿Qué es Vue.js?
Según Evan You, el creador de Vue.js:
«Vue.js es una solución más flexible y menos opinable. Es solo una capa de interfaz, por lo que puedes usarla como una función ligera en las páginas en lugar de una SPA completa».
Quería crear un frontend framework que fuera tan potente como Angular, pero también más «ligero» y flexible sin todos los plugins y conceptos innecesarios que vienen con Angular.
El resultado fue Vue.js, que es uno de los frontend frameworks más populares en la actualidad.
Por qué los desarrolladores utilizan Vue.js
Diferentes razones impulsan a un desarrollador a utilizar una tecnología en particular. Vamos a discutir por qué creemos que deberías aprender Vue.js.
Para empezar, Vue.js es uno de los frameworks más sencillos para la mayoría de los desarrolladores, ya que este framework utiliza JavaScript. Por lo tanto, cualquiera que tenga conocimientos básicos de JavaScript podrá desarrollar con Vue.js.
La herramienta Vue CLI combinada con otras herramientas de desarrollo frontend hace que la configuración de Vue.js sea muy fácil. Está configurado con algunas funcionalidades por defecto, pero también puedes construir código con una lógica y estructura DRY (Don’t Repeat Yourself).
La reactividad también está integrada en Vue.js. Eso significa que la funcionalidad en tiempo real que era popular en el marco Angular es una brisa con Vue.js. Por ejemplo, puedes aplicar fácilmente una simple directiva como v-if en tu aplicación Vue.js.
A continuación, vamos a discutir los principales ventajas y desventajas de Vue.js.
Ventajas y desventajas de Vue.js
Vue.js es el segundo framework más popular en uso hoy en día. Veamos por qué le gusta a los desarrolladores web y por qué se alejan de él.
Ventajas de Vue.js
Empezaremos explorando los aspectos positivos de Vue.js.
Tamaño pequeño
Vue.js tiene un tamaño de descarga muy pequeño, de unos 18 KB, que es excelente en comparación con otros frameworks de gran tamaño. Sin embargo, con ese tamaño, Vue.js tendrá un impacto positivo en el SEO y la UX de tu aplicación frontend.
Componente de un solo archivo y legibilidad
Vue.js utiliza una arquitectura basada en componentes, separando así grandes trozos de código en componentes más pequeños. Además, en Vue.js, todo es un componente, y cada componente está escrito con HTML, CSS y JavaScript, lo que favorece la legibilidad y la simplicidad.
Sistema de herramientas sólidas
Vue.js es compatible con muchas herramientas de desarrollo de front-end directamente desde la caja, con poca o ninguna configuración por tu parte. Por ejemplo, Vue.js soporta herramientas como Babel y Webpack. Además, proporciona pruebas unitarias, bibliotecas de pruebas de extremo a extremo, sistemas de enrutamiento flexibles y fáciles de usar, gestores de estado, renderización del lado del servidor (SSR), y más.
Fácil de usar
Si has usado Vue.js antes, estarás de acuerdo en que es muy fácil de usar. Moderniza el enfoque habitual de desarrollo web, lo que hace que cualquier principiante pueda saltar directamente y sentirse cómodo con sólo unas pocas prácticas.
Desventajas de Vue.js
Ahora que hemos cubierto los pros, vamos a explorar los negativos de Vue.js.
Complejidad de la reactividad
La implementación del two-way binding en Vue.js es una herramienta muy útil para gestionar los componentes de Vue.js. La vinculación bidireccional se refiere a compartir datos entre una clase de componente y su plantilla, está desarrollada de manera que si los datos cambian en un lugar, automáticamente se actualizan los otros.
Sin embargo, hay un problema relacionado con el funcionamiento de la reactividad, ya que el sistema de reactividad sólo devuelve los trozos de datos activados. A veces, hay algunos errores durante la lectura de los datos, por lo que requiere que los datos sean aplanados. Puedes leer este problema conocido y cómo se soluciona en el sitio de Vue.js.
Barrera lingüística
Inicialmente, Vue.js fue adoptado principalmente por los chinos, con grandes empresas como Xiaomi y Alibaba que ayudaron a popularizar el framework y a crear demanda en el mercado laboral. Sin embargo, con la importante adopción de muchas empresas chinas, muchos foros, canales de discusión y similares estaban principalmente en chino, lo que dificultaba la adopción para los desarrolladores no nativos.
A día de hoy, esto ya no es así, ya que Vue.js ha evolucionado para incorporar soporte en muchos idiomas, pero hay algunos idiomas que tienen menos soporte que los demás.
Riesgos de exceso de flexibilidad
Como se ha dicho anteriormente, Vue.js es muy flexible y fácil de usar. Por lo tanto, es fácil tener un montón de código espagueti en todas partes, ya que todo el mundo en un equipo de la empresa puede tener diferentes opiniones sobre cómo hacer las cosas.
A partir de los pros y los contras de Vue.js comentados anteriormente, es posible que ya hayas detectado algunas características que te encantan y otras que no te servirán.
10 cosas que deberías saber sobre Vue.js
A continuación, las diez cosas que debes saber sobre Vue.js y por qué es esencial conocerlas.
Propiedades calculadas
Una propiedad computada es una de las características más utilizadas en Vue.js. Una propiedad calculada te permite crear propiedades que pueden ser modificadas, manipuladas y mostrar datos de una manera eficiente y legible.
Es muy útil cuando quieres repetir muchos métodos pequeños para cosas como el formato, el cambio de valores, o un vasto proceso que necesitas activar en ciertas situaciones.
Las propiedades computadas ayudan a eliminar el exceso de mucha lógica en la plantilla. Demasiada lógica puede hacer que tu código se infle y sea difícil de mantener rápidamente.
Suponiendo que quieras formatear una cadena a mayúsculas, así es como podrías hacerlo:
<template>
<div>
<p> I love {{ value.toUpperCase() }} </p>
</div>
</template>
¿Qué pasa si necesitas cambiar la variable de value en 50 lugares diferentes? Es muy complicado, ¿verdad? Bueno, las propiedades computadas están aquí para ayudar:
<template>
<div>
<p> I love {{ value }} </p>
</div>
</template>
<script>
export default {
computed:{
value(){
return this.value.toUpperCase()
}
}
}
</script>Puedes cambiar fácilmente de toUpperCase() a toLowerCase(), y se reflejará todo desde un único punto.
Manejo de eventos
Vue.js hace que la comunicación entre el hijo y el padre sea muy fácil con el uso de $emit y v-on. La comunicación entre las jerarquías de componentes se realiza sin esfuerzo y de forma sencilla.
La función $emit acepta dos parámetros: una cadena para el nombre y un valor opcional a emitir.
El v-on:event-name se utiliza en el componente hijo para recibir el evento emitido por su componente padre:
<template>
<section>
<button @click="onClick">Add </button>
</section>
</template>
<script>
export default {
name: "AddEvent",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>Una vez que se activa el botón Add, el método onClick activa el evento $emit, que emite el evento add a un componente hijo que escucha el evento add.
Veamos cómo escuchar un evento:
<template>
<section>
<p v-show="showSaveMsg">This component is listening to the ADD event</p>
<add-event v-on:add="onAdd"></add-event>
</section>
</template>
<script>
export default {
data(){
return {
showSaveMsg: false
}
},
components:{
AddEvent: () => import('./AddEvent')
},
methods: {
onAdd() {
this.showSaveMsg = true;
}
}
}
</script>El código anterior escucha el evento add y responde cambiando el valor de showSaveMsg a true, lo que muestra el mensaje de nuevo.
Lazy Loading / Componentes asíncronos
La lazy loading es uno de los mejores hacks de rendimiento para Vue.js, en el que los componentes se añaden y renderizan de forma asíncrona o bajo demanda, lo que reducirá significativamente el tamaño del archivo, el tiempo de petición-respuesta HTTP, etc.
Lazy loading se consigue con las importaciones dinámicas de Webpack, que también admite la división del código.
Vue.js permite lazy loading de los componentes y puede lograrse globalmente con los siguientes scripts:
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Puedes conseguirlo localmente con un componente como el siguiente:
<template>
<div>
<component></component>
</div>
</template>
<script>
export default {
components: {
'Component': () => import('./Component')
}
}
</script>Componentes globales
Podemos lograr una reutilización significativa en Vue.js con componentes globales, donde se registra un componente una vez y luego se utiliza en todas partes dentro de su instancia Vue.js.
Los componentes globales son una característica importante y pueden ahorrarte mucho tiempo registrando componentes individualmente cada vez, pero puede ser fácilmente mal utilizado registrando todos los componentes globalmente. Registrar todos los componentes globalmente puede conducir fácilmente a un gran tamaño de construcción que resulta en un pobre SEO y un tiempo de carga de la página más lento.
Asegúrate de registrar siempre los componentes globales que tienen muchos casos de uso en tu proyecto, como se muestra a continuación:
import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));Componente de archivo único
Una de las características más potentes de Vue.js es Components; te ayuda a extender elementos esenciales de HTML, CSS y JavaScript para encapsular código reutilizable.
Los componentes pueden ayudar a dividir los grandes proyectos en piezas más pequeñas y reutilizables que podemos extender a todo el proyecto, fomentando así el principio DRY (Don’t Repeat Yourself) de la ingeniería de software.
Puede proporcionar organización y encapsulaciones para grandes proyectos, código reutilizable, y puede ser separado en archivos .vue.
<template>
<section>
<button @click="onClick">Add</button>
</section>
</template>
<script>
export default {
name: "CustomButtom",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>
<style scoped>
button{
/** Button Styles */
}
</style>Los scripts anteriores crean un componente de botón personalizado que podemos reutilizar en nuestro proyecto. Cada componente tiene su HTML, CSS y JavaScript.
Prueba
Vue.js proporciona una de las bibliotecas de pruebas más robustas, lo que hace que las pruebas unitarias con Jest y Mocha o las pruebas de extremo a extremo sean muy sencillas sin apenas configuración.
Un rápido vistazo a las pruebas con estas herramientas podría valer la pena para usted. Así que vamos a explorar la instalación, configuración y prueba de un proyecto de demostración a continuación.
Si estás usando la herramienta recomendada Vue CLI para configurar tu proyecto, ejecuta los siguientes comandos:
vue add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
A continuación, después de la configuración, incluya el código siguiente, que demuestra cómo probar un componente simple:
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ message }}</p>',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})La biblioteca de pruebas Vue tiene dos grandes opciones para probar sus componentes: Mount y Shallow.
Si quieres probar un componente con un aislamiento completo, utiliza el método shallow. De lo contrario, si necesitas trabajar en un componente con subcomponentes que quieres asegurar la comunicación, la opción de mount funciona muy bien.
La potente herramienta Vue CLI
Vue CLI es una excelente herramienta CLI y da una buena cantidad de poder a cualquier desarrollador de Vue. Con ella, puedes probar rápidamente cualquier componente de forma aislada. Lo mejor de Vue CLI es que puedes desarrollar completamente un componente de forma aislada, probarlo y seguir teniendo acceso a la recarga en caliente mientras iteras sobre ese componente en particular.
Para demostrarlo, vamos a instalar Vue CLI de forma global:
npm install -g @vue/cliA continuación, puedes probar cualquier componente ejecutando el siguiente comando:
vue serve ./components/views/Home.vueSi deseas extraer un componente concreto para, por ejemplo, compartirlo con tus colegas, puedes conseguirlo utilizando el siguiente comando:
vue build --target lib --name goldenRule ./components/views/HomeVue CLI es muy potente y puede ahorrar una tonelada de tiempo productivo si dominas el arte de usarlo. Si quieres aprender más, puedes echar un vistazo a la documentación oficial.
Gestión de props
La gestión de los props es vital para el componente Vue, ya que se pueden crear de diferentes maneras. También puedes validar props, crear múltiples props y modificarlos según sea necesario.
Para crear una nueva propiedad en un componente Vue, puedes hacerlo de varias maneras. Asumiendo que tienes tu componente, necesitas crear la prop isAdmin.
Veamos las diferentes formas de hacerlo:
<template>
<section>
<component v-if="isAdmin"></component>
</section>
</template>
<script>
export default {
name: 'Component',
// One
props: {
isAdmin: {
type: Boolean,
default: false,
required: true
}
},
// Two
props: ['isAdmin'],
// Three
props: {
isAdmin: Boolean
}
}
</script>Validar tu prop es muy importante. Por suerte, también es muy sencillo:
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...Por último, modificar los accesorios es tan fácil como reajustar sus valores:
//...
methods: {
isAdmin() {
this.isAdmin = true;
}
}
//..
Para asignar el valor a la prop en un componente padre:
<template>
<section>
<component :isAdmin="true"></component>
</section>
</template>Renderización del lado del servidor (SSR)
Con todas las grandes características y beneficios de usar Vue.js para crear aplicaciones frontend, Vue.js en sí mismo sigue siendo una biblioteca del lado del cliente que sólo renderiza y manipula elementos del DOM.
El renderizado del lado del servidor ayuda a los frameworks del lado del cliente, como Vue.js, a obtener mejores resultados. Los rastreadores de los motores de búsqueda verán las páginas de tu sitio web completamente renderizadas cuando las rastreen.
Para que tu sitio web sea indexado más rápido, por Google y Bing, tu sitio web necesita tener una puntuación más rápida y más alta de tiempo de contenido. Eso es lo que el renderizado del lado del servidor en Vue.js te ayuda a conseguir.
El renderizado del lado del servidor (SSR) es una técnica popular para renderizar una aplicación de una sola página (SPA) del lado del cliente en el servidor y luego enviar una página completamente renderizada al lector.
Cuando la página se renderiza en el lado del servidor, éste la envía al cliente como respuesta. Por lo tanto, toda la información ya se ha renderizado mientras el navegador muestra la página del buscador.
Lograr el SSR en Vue.js es difícil para los principiantes. Será más fácil usar Nuxt.js, que tiene un SSR incorporado y una curva de aprendizaje muy baja.
Despliegue
Vue.js presentará muchas advertencias, errores y tamaños de archivos hinchados durante el desarrollo, pero estos problemas desaparecen inmediatamente cuando se activa la producción para el despliegue. Vue.js configurará automáticamente las herramientas de compilación de Webpack, las minificaciones, la extracción y purga de CSS, el almacenamiento en caché, el seguimiento de los errores en tiempo de ejecución y mucho más.
Los clientes de Kinsta pueden plantearse utilizar la función de minificación de código integrada a la que pueden acceder directamente en el panel de control de MyKinsta. Esto les permite habilitar fácilmente la minificación automática de CSS y JavaScript con un simple clic.
Vue.js hace que tu proceso de despliegue sea muy fácil al configurar y establecer automáticamente el entorno de producción sin ningún paso adicional por parte del desarrollador.
Para desplegar tu aplicación Vue.js, puedes leer sus guías generales.
Resumen
En este artículo, hemos explorado en detalle qué es Vue.js, por qué deberías usarlo, sus pros y sus contras, y las 10 cosas que deberías saber sobre él.
Con suerte, habrás avanzado en tus conocimientos de Vue.js para ofrecer aplicaciones frontend escalables y de alto rendimiento.
Sigue codificando!
Si tienes alguna pregunta o sugerencia, estamos deseando escucharla. Habla con nosotros en la sección de comentarios más abajo.
Soy un Ingeniero de Software y Creador de Contenidos orientado a crear productos innovadores y de alto rendimiento siguiendo las mejores prácticas y los estándares del sector. También me encanta escribir sobre ello en Masteringbackend.com. Sígueme en X, LinkedIn y About Me
Deja una respuesta