10 cosas que necesita saber sobre el marco de interfaz de Vue.js

Con el aumento continuo de los marcos de JavaScript frontend, incluido el nuevo Vue.js 3, es vital mantenerse al día con ellos y comprender todo sobre sus nuevas funciones.

En este artículo, exploraremos Vue.js 3 y sus características recién agregadas. Estas últimas incorporaciones hacen que Vue.js sea aún más robusto, lo que lo convierte en un excelente marco a considerar para su próximo proyecto. Aprenderá en detalle 10 cosas que debe saber sobre Vue.js y cómo le ayudará a ofrecer aplicaciones frontend escalables y de alto rendimiento.

¿Listo? ¡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 obstinada. Es solo una capa de interfaz, por lo que puede usarla como una función ligera en las páginas en lugar de un SPA completo «.

Quería crear un marco de interfaz que fuera tan poderoso como Angular, pero también «más ligero» y más flexible sin todos los complementos y conceptos innecesarios que vienen con Angular.

El resultado fue Vue.js, que es uno de los frameworks frontend más populares en uso en la actualidad.

Buenas noticias: las nuevas funciones agregadas a Vue.js 3 lo convierten en una opción aún mejor para su próximo proyecto 😄 Échales un vistazo en esta guía ⬇️Haz clic para tuitear

Por qué los desarrolladores usan Vue.js

Diferentes razones impulsan a un desarrollador a utilizar una tecnología en particular. Analicemos por qué creemos que debería aprender Vue.js.

Para comenzar, Vue.js es uno de los marcos más sencillos que existen para la mayoría de los desarrolladores, ya que este marco utiliza JavaScript. Por lo tanto, cualquier persona que tenga conocimientos básicos de JavaScript podrá desarrollar con Vue.js.

La herramienta Vue CLI combinada con otras herramientas de desarrollo frontend facilita la configuración de Vue.js. Está configurado con algunas funciones de forma predeterminada, pero también puede compilar 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 muy sencilla con Vue.js. Por ejemplo, puede aplicar fácilmente una directiva simple como v-if en su aplicación Vue.js.

A continuación, analicemos los principales pros y contras de Vue.js.

Pros y contras de Vue.js

Vue.js es el segundo marco más popular en uso en la actualidad. Veamos qué hace que se quede con los desarrolladores web y qué los aleja.

Ventajas de Vue.js

Comenzaremos explorando los aspectos positivos de Vue.js.

Diminuto tamaño

Vue.js tiene un tamaño descargable muy pequeño de aproximadamente 18 KB, que es excelente en comparación con otros marcos con tamaños grandes. Sin embargo, con ese tamaño, Vue.js tendrá un impacto positivo en el SEO y UX de su aplicación frontend.

Componente de archivo único y legibilidad

Vue.js utiliza una arquitectura basada en componentes, por lo que separa 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 fomenta la legibilidad y la simplicidad.

Sistema de herramientas sólidas

Vue.js admite muchas herramientas de desarrollo de frontend desde el primer momento con poca o ninguna configuración de su parte. Por ejemplo, Vue.js admite herramientas como Babel y Webpack. Además, proporciona pruebas unitarias, bibliotecas de pruebas de un extremo a otro, sistemas de enrutamiento flexibles y fáciles de usar, administradores de estado, renderización del lado del servidor (SSR) y más.

Fácil de usar

Si ha usado Vue.js antes, estará de acuerdo en que es muy fácil de usar. Moderniza el enfoque de desarrollo web habitual, lo que facilita que cualquier principiante se ponga manos a la obra y se sienta cómodo con unas pocas prácticas.

Contras de Vue.js

Ahora que hemos cubierto los pros, exploremos los aspectos negativos de Vue.js.

Complejidad de reactividad

La implementación del enlace bidireccional en Vue.js es una herramienta útil para administrar los componentes de Vue.js. El enlace bidireccional se refiere a compartir datos entre una clase de componente y su plantilla, está desarrollado para que, si los datos cambian en una ubicación, se actualicen automáticamente en las demás.

Sin embargo, hay un problema con respecto a cómo funciona la reactividad, mientras que el sistema de reactividad reproduce solo los fragmentos de datos activados. A veces, hay algunos errores durante la lectura de datos, por lo que es necesario aplanar los datos. Puede leer este problema conocido y cómo se aborda en el sitio de Vue.js.

Barrera del idioma

Inicialmente, Vue.js fue adoptado principalmente por los chinos, y grandes empresas como Xiaomi y Alibaba ayudaron a popularizar el marco y crearon demanda en el mercado laboral. Sin embargo, con la adopción significativa 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 de habla no nativa.

A partir de hoy, este ya no es el caso, ya que Vue.js ha evolucionado para incorporar soporte en muchos idiomas, pero hay algunos idiomas con menos soporte que otros.

Riesgos de exceso de flexibilidad

Como se indicó anteriormente, Vue.js es muy flexible y fácil de usar. Por lo tanto, es fácil tener muchos códigos espaguetis en todas partes, ya que todos los miembros de un equipo empresarial pueden tener diferentes opiniones sobre cómo hacer las cosas.

De los pros y los contras de Vue.js discutidos anteriormente, es posible que ya haya detectado algunas características que le encantan y otras que no funcionarán bien para usted.

10 cosas que debes saber sobre Vue.js

A continuación se muestran las diez cosas que necesita saber sobre Vue.js y por qué es esencial conocerlas.

Propiedades calculadas

Una propiedad calculada es una de las características más utilizadas en Vue.js. Una propiedad calculada le permite crear propiedades que se pueden modificar, manipular y mostrar datos de manera eficiente y legible.

Resulta útil cuando desea repetir muchos métodos pequeños para cosas como formateo, cambio de valores o un proceso extenso que necesita activar en ciertas situaciones.

Las propiedades calculadas ayudan a eliminar el exceso de lógica en su plantilla. Demasiada de esta lógica puede hacer que su código se hinche y sea difícil de mantener rápidamente.

Suponiendo que desea formatear una cadena en letras mayúsculas, así es como puede hacerlo:

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template>

¿Qué sucede si necesita cambiar el value variable en 50 lugares diferentes? Hinchado, ¿verdad? Bueno, las propiedades calculadas 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 toUpperCase() para toLowerCase(), y se reflejará todo desde un solo punto.

Manejo de eventos

Vue.js hace que la comunicación entre padres e hijos sea muy sencilla con el uso de $emit y v-on. Es fácil y sencillo manejar la comunicación entre las jerarquías de componentes.

El $emit La función acepta dos parámetros: una cadena para el nombre y un valor opcional que se emitirá.

El v-on:event-name se utiliza en el componente secundario para recibir el evento emitido por su componente principal:

<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 activa el Add botón, el onClick El método desencadena el $emit evento, que emite el add evento a un componente hijo que escucha add evento.

Echemos un vistazo a 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 add evento y responde cambiando el valor de showSaveMsg para true, que muestra el mensaje de nuevo.

Carga diferida / Componentes asíncronos

La carga diferida es uno de los mejores trucos de rendimiento para Vue.js, donde los componentes se agregan y procesan de forma asincrónica o bajo demanda, lo que reducirá significativamente el tamaño del archivo, el tiempo de respuesta de solicitud HTTP, etc.

La carga diferida se logra con las importaciones dinámicas de Webpack, que también admite la división de código.

Vue.js permite la carga diferida de componentes y se puede lograr globalmente con los siguientes scripts:

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

Puede lograrlo 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 registra un componente una vez y luego lo usa en todas partes dentro de su instancia de Vue.js.

Los componentes globales son una característica importante y pueden ahorrarle mucho tiempo al registrar los componentes individualmente cada vez, pero se puede usar incorrectamente fácilmente si se registran todos los componentes globalmente. El registro de todos los componentes a nivel mundial puede conducir fácilmente a un tamaño de construcción grande, lo que resulta en un SEO deficiente y un tiempo de carga de la página más lento.

Asegúrese siempre de registrar componentes globales que tengan muchos casos de uso en su proyecto, como se muestra a continuación:

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

Único Componente de archivo

Una de las características más poderosas de Vue.js son los componentes; le ayuda a ampliar elementos HTML, CSS y JavaScript esenciales para encapsular código reutilizable.

Los componentes pueden ayudar a dividir proyectos grandes 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 se puede dividir en .vue archivos.

<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 dentro de nuestro proyecto. Cada componente tiene su HTML, CSS y JavaScript.

Pruebas

Vue.js proporciona una de las bibliotecas de pruebas más sólidas, lo que hace que las pruebas unitarias con Jest y Mocha o las pruebas de extremo a extremo sean muy sencillas con poca o ninguna configuración.

Podría valer la pena echar un vistazo rápido a las pruebas con estas herramientas. Exploremos la instalación, configuración y prueba de un proyecto de demostración a continuación.

Si está utilizando la herramienta CLI de Vue recomendada para configurar su proyecto, ejecute 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 a continuación, 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 de Vue tiene dos excelentes opciones para probar sus componentes: Mount y Shallow.

Si desea probar un componente con aislamiento completo, utilice el shallow método. De lo contrario, si necesita trabajar en un componente con subcomponentes que desea asegurar la comunicación, el mount La opción funciona muy bien.

La poderosa herramienta CLI de Vue

Vue CLI es una excelente herramienta CLI y le da una gran cantidad de poder a cualquier desarrollador de Vue. Con él, puede probar rápidamente cualquier componente de forma aislada. Lo mejor de Vue CLI es que puede desarrollar completamente un componente de forma aislada, probarlo y aún tener acceso a la recarga en caliente mientras itera sobre ese componente en particular.

Para demostrarlo, instalemos Vue CLI globalmente:

npm install -g @vue/cli

A continuación, puede probar cualquier componente ejecutando el siguiente comando:

vue serve ./components/views/Home.vue

Si desea extraer un componente en particular para, digamos, compartirlo con sus colegas, puede lograrlo usando el siguiente comando:

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI es muy poderoso y puede ahorrar una tonelada de tiempo productivo si domina el arte de usarlo. Si desea obtener más información, puede echar un vistazo a la documentación oficial.

Gestión de accesorios

La gestión de accesorios es vital para el componente Vue, ya que se puede crear de diferentes formas. También puede validar accesorios, crear múltiples accesorios y modificarlos según sea necesario.

Para crear una nueva propiedad en un componente de Vue, puede hacerlo de varias formas diferentes. Suponiendo que tiene su componente, necesita crear el isAdmin apuntalar.

Veamos las diferentes formas en que puedes 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 realinear sus valores:

//...

methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}

//..

Para asignar valor a la propiedad en un componente principal:

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

Representación del lado del servidor (SSR)

Con todas las excelentes características y beneficios de usar Vue.js para crear aplicaciones frontend, Vue.js en sí sigue siendo una biblioteca del lado del cliente que solo procesa y manipula elementos DOM.

La representación del lado del servidor ayuda a los marcos del lado del cliente, como Vue.js, a lograr mejores resultados. Los rastreadores de motores de búsqueda verán páginas completamente renderizadas de su sitio web al rastrear.

Para que Google y Bing indexen su sitio web más rápido, su sitio web debe tener una puntuación de tiempo de contenido más rápida y más alta. Eso es lo que le ayuda a lograr la renderización del lado del servidor en Vue.js.

La renderización 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 representa en el lado del servidor, la envía al cliente como respuesta. Por lo tanto, toda la información ya se ha procesado mientras el navegador muestra la página del motor de búsqueda.

Lograr 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 archivo inflados durante el desarrollo, pero estos problemas desaparecen inmediatamente cuando enciende la producción para la implementación. 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 errores en tiempo de ejecución y más.

Vue.js hace que su proceso de implementación sea muy fácil al configurar y configurar automáticamente el entorno de producción sin ningún paso adicional por parte del desarrollador.

Para implementar su aplicación Vue.js, puede leer sus guías generales.

¿Tienes curiosidad por Vue.js 3? 👀 Aprenda cómo puede ayudarlo a entregar aplicaciones frontend escalables y de alto rendimiento en esta guía ⬇️Haz clic para tuitear

Resumen

En este artículo, hemos explorado en detalle qué es Vue.js, por qué debería usarlo, sus pros y sus contras, y las 10 cosas que debe saber al respecto.

Con suerte, ha avanzado en su conocimiento de Vue.js para ofrecer aplicaciones frontend escalables y de alto rendimiento.

¡Sigue codificando!

Si tiene preguntas o sugerencias, estamos ansiosos por escucharlo. ¡Habla con nosotros en la sección de comentarios a continuación!