Si usted es un desarrollador Front-end, tarde o temprano, estará pensando en comenzar a aprender un marco JS en particular. En ese momento, diríamos, entra en juego el miedo a hacer una elección equivocada. No querrá encontrarse aprendiendo tecnologías obsoletas o herramientas irrelevantes.

Una preocupación similar puede surgir en el cliente, lo que se traduce en una reducción del número de desarrolladores que utilizan dichas tecnologías y, en consecuencia, aumenta el coste de soporte de un producto construido sobre ellas.

Ahora intentaremos explicar por qué habiendo probado los mejores frameworks de JS, nos limitamos a Vue.js.

Primero, unos breves antecedentes

En 2014, a un ingeniero de Google se le encomendó la tarea de crear prototipos de interfaces rápidamente. En ese momento, Angular ya estaba en pleno apogeo, y React acaba de aparecer. Pero ninguna de las herramientas existentes cumplía con los requisitos de la tarea en su totalidad. Así es como surgió la idea de crear una herramienta propia, dando como resultado Vue.js que es ahora uno de los tres principales frameworks de JS.

Pero, ¿qué es exactamente lo que hace que Vue.js sea tan popular?

La razón más obvia es la baja barrera de entrada. Para escribir en Vue.js basta con saber JS, HTML y CSS. El desarrollador no se enfrenta a la necesidad de aprender TypeScript (como ocurre con Angular), y no se sentirá incómodo debido a la falta de conocimiento de ES6 + estándares (como puede ser con React). Vue es algo entre React y Angular. Su autor ha tomado las mejores prácticas de estos dos frameworks y ha creado una herramienta fácil, rápida y flexible.

El componente más sencillo de Vue consta de tres bloques: plantilla, script y estilo. Aquí está un poco más detallado.

  • Template es básicamente una plantilla de diseño, un simple HTML, que permite al desarrollador utilizar cualquier preprocesador HTML (como PUG, Haml), lo que hace que el desarrollo sea más rápido. No causará ningún inconveniente a los que hayan cambiado desde Angular, ya que este enfoque se utiliza ampliamente en el entorno de Angular. Vue.js también permite utilizar la sintaxis JSX, lo que simplificará enormemente la migración de los desarrolladores desde React.
  • Style es un bloque con estilos escritos en CSS. Al igual que con las plantillas de diseño, al escribir hojas de estilo, un desarrollador puede utilizar preprocesadores CSS(SASS, Less), lo que permite aumentar la productividad.
  • Script es un bloque de código JS que se representa como un objeto JS, cada campo del cual es un bloque de datos o un gancho del ciclo de vida del componente en forma de función. Dado que se utiliza JS puro para este bloque, el desarrollador puede escribir fácilmente código en un estándar conveniente para ES o TypeScript y convertirlo a través de Babel.

Ahora, vamos a enumerar las razones para elegir Vue.js

  1. Cualquier desarrollador que tenga una pila mínima de tecnología Front-end puede escribir en Vue. La estructura que ofrece Vue es bastante obvia y reduce significativamente el tiempo dedicado al soporte de código, la mejora de la funcionalidad y la búsqueda de errores.
  2. Otra ventaja de Vue.js es su ecosistema. No tiene una gran comunidad en comparación con React, pero puede ser para mejor, ya que a menudo es difícil encontrar una opción que funcione entre la variedad de plugins y paquetes de React. Y si hay uno, es difícil ampliarlo o personalizarlo. Con Vue, los principales paquetes (como Vuex o VueRouter), sin los cuales no habrá ningún proyecto importante, están profundamente integrados con Vue. Esto protege al desarrollador de los errores causados por la incompatibilidad de las bibliotecas, ya que los desarrolladores de Vue.js mantienen actualizados todos los componentes del ecosistema. Cada uno de estos componentes se describe en detalle en la documentación de Vue.js.
  3. Ladocumentación, es por lo que Vue.js obtiene un plus extra. Dispone de documentación traducida a 8 idiomas, con multitud de ejemplos detallados de uso del código. Y a los que no entienden la información escrita se les ofrecen cursos de formación en vídeo.
  4. Merece la pena destacar el alcance de Vue.js, sobre todo porque este marco de trabajo ha ido mucho más allá de los navegadores. Pero empezaremos con los navegadores. Vue es ideal tanto para escribir paisajes sencillos como para un CMS completo. Dependiendo de los requisitos del proyecto, la forma de utilizar Vue puede variar. Los proyectos más sencillos o las aplicaciones web que no implican una gran transmisión de datos con el servidor es mejor implementarlos en formato SPA, lo que afecta negativamente al time-to-content (el principal volumen de datos se descarga al cliente en la primera carga de la página) y al SEO (el sitio web es un único documento y el contenido es generado por JS).

    Para resolver este tipo de problemas, y para proyectos a gran escala, la documentación de Vue sugiere implementar el enfoque SSR. Con dicha implementación, cada página se genera en un servidor que acelera el tiempo de contenido, ya que sólo se envían al cliente los datos necesarios. En consecuencia, con el enfoque SSR, el SEO también es mayor porque todos los metadatos necesarios vienen con el contenido de la página. Para la implementación de SSR, Vue recomienda utilizar el framework Nuxt.js o Quasar. El mencionado Quasar también permite escribir aplicaciones PWA completas en Vue. Quasar es un entorno de desarrollo basado en Node.js y Webpack, que proporciona al desarrollador una serie de herramientas para el desarrollo de aplicaciones, para trabajar con el navegador y en dispositivos móviles y de escritorio.

  5. Vue acelera el proceso de desarrollo. Y el principal mérito aquí no es que pueda utilizar una gran variedad de tecnologías, sino que no es necesario utilizarla. Se trata de un mecanismo de anclaje de datos en dos direcciones o de reactividad. En otras palabras, Vue hace un seguimiento de los cambios que se producen en los datos inicializados. Esto significa que el desarrollador no necesita manipular el DOM.

    Frameworks como React y Angular tienen su propio sistema de reactividad. Pero si en Vue para mutar una variable concreta basta con reasignarla a un nuevo valor (por ejemplo: this.someVar = "new value"), en React hay que utilizar un método especial setState (por ejemplo: this.setState (() => ({ someVar: "new value"}))). La ventaja de Vue se percibe sobre todo cuando se realizan mutaciones de arrays u objetos. En Vue, basta con utilizar el método estándar de arrays para añadir un nuevo elemento a un array. Por ejemplo: this.someArr.push ("nuevo valor")), mientras que en React es necesario actualizar el valor anterior (Por ejemplo: this.setState (state => ({someArr: [... state.someArr, "Nuevo valor"]}))). Debido a que Vue fue escrito bajo la influencia de Angular, la interfaz de dos lados en ambos frameworks se implementa de manera similar, pero la simplicidad de Vuejs sigue prevaleciendo.

  6. Otra ventaja que acelera el proceso de desarrollo es la capacidad de implementar un enfoque de componentes. Hablando en términos globales, la conclusión es que hay una copia maestra de Vue, que es el punto de entrada a la aplicación, y todo el proyecto se divide en componentes más pequeños que se incluyen en la copia maestra o en otro componente.

    El enfoque por componentes ofrece muchas ventajas. La primera, y probablemente la más importante, es la posibilidad de escribir componentes versátiles que pueden reutilizarse en todo el proyecto (o incluso en otros proyectos) simplemente pasándole el conjunto de parámetros necesarios. En este caso, si necesita cambiar la funcionalidad de alguna parte de la aplicación, lo que ocurre en varios lugares, no es necesario iterar sobre todo el código. Bastará con realizar los cambios en un solo componente. Si imagina que la aplicación contiene componentes que son similares en un 90%, y tienen algunas diferencias mínimas, entonces las propiedades del sistema (props, parámetros de entrada del componente) le ayudarán. Al pasar ciertos parámetros del componente padre, puede cambiar el comportamiento interno del componente (polimorfismo a ojos de Vuejs). La herencia de Vue se implementa a través de ranuras, es decir, puede crear un determinado componente abstracto con algún conjunto de funcionalidades, y a través del sistema de ranuras, crear módulos más avanzados sobre su base.

    El enfoque de los componentes acelera obviamente el desarrollo. También reduce la probabilidad de que se produzcan errores de copia-pega. El código es extensible y puede reutilizarse. Además, la estructura del proyecto es lo suficientemente obvia y comprensible como para que cualquier novato tenga un buen dominio de ella (un buen complemento es Vue-devtools, una extensión especial para el navegador desarrollada por los autores de Vuejs que permite ver la estructura del proyecto a través de chrome-devtools. Por supuesto, el enfoque de componentes existe tanto en React como en Angular, pero en lo que a mí respecta, es mucho más fácil de implementar en Vue.js. Aunque es una cuestión de gustos.

Comparación de las estadísticas de Vue.js vs. Angular.js vs. React.js

Gracias a recursos como stateofjs.com, tenemos la oportunidad de ver cómo los frameworks captan la audiencia de los desarrolladores. Es obvio que React.js es el que tiene más adeptos, pero a juzgar por las estadísticas, Vue.js es el que más ha aumentado su número de seguidores en los últimos 3 años. El número de personas que han utilizado este framework y van a seguir utilizándolo ha aumentado un 20% y, para mí, es el principal indicador de la satisfacción de los usuarios con el producto. En cambio, el número de los que han utilizado el framework y no quieren seguir usándolo es el más bajo entre los 3 primeros.

Al mismo tiempo, el porcentaje de los que han oído hablar del framework y están interesados en utilizarlo es el más alto. En el caso de Vue, esta cifra disminuye gradualmente debido principalmente a los que ya han empezado a utilizar este framework. Mientras que en el caso de Angular, el número de interesados se ve compensado por el número de desarrolladores insatisfechos. Y en React el número de interesados disminuye, en parte a costa de los que ya están usando o están insatisfechos con este framework.

Las estadísticas de las encuestas muestran que React tiene el mayor número de usuarios. Sin embargo, si se miran los repositorios el resultado es ligeramente diferente: el repositorio de Vue en github tiene más de 146.000 estrellas (este es el número de personas que han expresado su satisfacción), React tiene más de 134.000 estrellas, Angular – más de 50.000 estrellas.

Vue.js

Angular.js

React.js

Obviamente, Vue.js está sólo al principio de su expansión en el mundo del desarrollo web, y sin embargo ya hay bastantes proyectos serios escritos con este framework. Los más famosos son:

  • gitlab.com – una plataforma web para el control de versiones de código
  • wizzair.com – Wizzair utiliza Vuejs en su sitio web oficial para gestionar la reserva de vuelos, hoteles y taxis
  • fontawesome. com – un recurso que ofrece fuentes gráficas para aplicaciones web y de escritorio
  • laravel. com – Sitio oficial del framework backend Laravel. Además, Laravel instala Vue.js como herramienta de escritura del lado del cliente por defecto.

Resumiendo

Definiríamos Vue.js como un framework que se desarrolla de forma muy dinámica e incluso agresiva. Los desarrolladores que han intentado escribir en Vue.js se convierten muy a menudo en devotos de este framework. La simplicidad y la flexibilidad atraen.

Aunque la gama de tareas que cubre esta herramienta abarca la mayor parte del desarrollo Front-end, el lanzamiento de Vue.js 3.0 que se espera en un futuro próximo promete muchas sorpresas agradables para los desarrolladores.

Por supuesto, antes de realizar cualquier tarea, es necesario analizar qué herramientas utilizar. Basándonos en este artículo, estamos seguros de que la mayoría de las tareas están totalmente dentro de la capacidad de Vue.js.