Angular vs React vs Vue

En este artículo damos respuesta a una pregunta que es muy frecuente entre desarrolladores, ¿cuál es el mejor framework? Para ello, tomamos en consideración tres frameworks de los más sobresalientes en los últimos años: Angular, React y Vue.

Vamos a realizar una comparativa de estos tres framework en los siguientes puntos:

1. Puntos generales

   • Filosofía

   • Sintaxis

2. Escritura de código

   • Facilidad de aprendizaje

   • Rendimiento

3. Popularidad y futuro

   • Aceptación y popularidad

   • Evolución del framework

1. Puntos generales

Antes de comenzar a destacar los puntos, cabe resaltar los diferentes antecedentes de cada framework.

Angular

Google está a cargo de desarrollar y mantener Angular con un equipo internacional de desarrolladores.

React

En este caso el grupo internacional que desarrolla y mantiene React es Facebook.

Vue

Para el caso de Vue, es algo diferente ya que no cuenta con una empresa internacional para su desarrollo y mantenimiento, si no que es a través de un equipo de colaboradores a nivel mundial, siendo el principal Evan You como su creador.

1.1. Filosofías

Con en esto en mente, exploremos ahora las distintas filosofías para cada framework.

Angular

La principal filosofía tras Angular es tener todo lo que el desarrollador necesita, por así decirlo, ya que Angular es un framework con muchas características ya integradas, tales como: validaciones de formularios, envíos de solicitudes http, enrutamiento, manejo de estado y muchos más.

Debido a esto muchos han llamado a Angular una plataforma, más que un framework, por la gran cantidad de funciones integradas que tiene. Y no solo por las funciones o características que se pueden usar a nivel de desarrollo si no también en su ecosistema en el cual su núcleo (que es manejado por el equipo de desarrollo y mantenimiento de Google,) tiene herramientas adicionales como: línea de comandos, interfaces para el manejo y creación de proyectos, es fácil de agregar soporte para las páginas web progresivas (PWA), etc.

En la sección features de la web oficial angular.io, se puede profundizar más sobre las funciones integradas, además de contar con la guía de documentación dónde está el amplio catálogo de características de Angular.

Todo esto nos deja ver que es muy poco probable encontrarnos con un problema donde el mismo Angular no tenga una función integrada para solucionarlo.

React

A diferencia de Angular, React es lo opuesto, se enfoca en lo más minimalista posible con enfoque en el desarrollo de la interfaz de usuario, por lo tanto, se considera más una librería que un framework mismo. De hecho, React se hace llamar librería. A pesar de que tiene también una documentación detallada para el uso de sus características, React tiene muchas menos funciones integradas a diferencia de Angular.

Por lo tanto, al desarrollar un proyecto, se terminan utilizando muchos paquetes o dependencias de terceros, ya sea por enrutamiento, manejo de estado, envío de solicitudes http, etc.

Esto puede llevar a pros y contras, debido a que muchos prefieren lo minimalista que es React, pero otros que ya el framework tenga todo a la mano para comenzar a trabajar. A pesar de esto la comunidad de React es amplía, así que si surgen problemas, probablemente haya algún paquete o dependencia que ayude a solucionarlo.

Vue

Podríamos decir que Vue está entre Angular y React, ya que es un framework que ofrece algunas funciones integradas pero no tantas como Angular. Se enfoca principalmente en las funciones integradas que son necesarias para escribir código, por ejemplo: enrutamiento y manejo de estado que son mantenidos por el equipo de Vue, pero otras funciones cómo validación de formularios no está integrada y depende de un paquete de terceros. Por lo tanto sería más que React pero menos que Angular, con respecto a las funciones integradas.

Vue se enfoca en el código y, a pesar de tener una buena interfaz de línea de comandos, no son tantas herramientas como Angular, aunque un poco mejor que React.

Como resumen, Angular tiene muchas funciones integradas, React es minimalista al respecto y Vue estaría entre ambos. Pero todos estos framework y librerías se enfocan en construir interfaces de usuarios desde componentes reutilizables y esto no cambia independientemente si trabajas con uno u otro, ya que se enfocan en hacer el desarrollo de aplicaciones más potente y fácil para los desarrolladores, por ende adoptan el concepto de construir interfaces de usuarios desde componentes.

Esta es una filosofía que los 3 frameworks comparten, bien cierto con diferentes núcleos y sintaxis.

1.2. Sintaxis

Vue

Utiliza JavaScript puro donde hay una separación entre la parte HTML y el código JavaScript que pertenece a ese HTML ya que Vue conecta el código HTML con el código JavaScript, y dinámicamente se puede manipular el contenido del HTML con un Template de sintaxis específica que Vue entiende cuando renderiza el código HTML. La idea principal es que se tenga JavaScript puro, casi HTML puro con algunas instrucciones específicas las cuales al final Vue hará automáticamente por ti.

Esto es algo que encontraremos en los tres frameworks, no se escribirá código que le de instrucciones a JavaScript para crear algún elemento y agregarlo en alguna parte del DOM. Mayormente se escribirá el código de una forma que le indique al framework lo que debe renderizar al usuario, tanto las partes estáticas, como las partes dinámicas, las cuales se actualizarán cuando algo cambie en la data, o alguna acción.

Ejemplo:

Angular

Al igual que Vue, Angular utiliza un Template HTML con una sintaxis de instrucciones específicas, que el framework mismo se encarga de entender y renderizar. Pero con la diferencia que está estrictamente separado en un archivo diferente. Ya que para la lógica o código JavaScript se encuentra en otro archivo y que Angular se encarga de enlazar o conectar estos dos archivos para así de esta forma manipular la información del template cuando sea necesario.

Algo que cabe mencionar es que Angular utiliza TypeScript como agregado a JavaScript, para agregarle funcionalidades extras, y así terminar pareciendo un lenguaje fuertemente tipeado.

Ejemplo

Archivo html

Archivo JavaScript+TypeScript

Resultado

React

Para este caso, es muy diferente a los dos anteriores, ya que no comparte la misma estructura de Template HTML y lógica JavaScript. Si no que más bien todo es escrito en funciones o clases JavaScript pero con un agregado especial que se hace llamar JSX. Que es muy similar a HTML pero dentro del código JavaScript para describirle a React cual contenido HTML debe eventualmente renderizar en el DOM, basados en ciertas condiciones.

Así que sería como una mezcla entre HTML y JavaScript para React. Para Angular y Vue un separación entre el HTML y JavaScript.

Ejemplo

2. Escritura de código

2.1. Facilidad de aprendizaje

Angular

Para Angular se pudiera decir que tiene un aprendizaje extenso debido a:

• Complejidad al crear el proyecto: no se puede simplemente comenzar a escribir código Angular en cualquier proyecto web, debido a que utiliza TypeScript, optimizaciones, etc, Por ende se necesita crear el proyecto con una estructura específica. De allí que Angular creara su CLI para facilitar la creación del proyecto.
• TypeScript: se debe manejar este lenguaje de programación o aprenderlo en caso de no saberlo. No es difícil, pero tiene sus peculiaridades.
• Entendimiento general: la sintaxis de Angular es algo por considerar, saber que el template HTML está separado del archivo JavaScript + TypeScript, la forma en como se comunican, entre otros.

React

Quizá no sea al inicio tan difícil aprender React pero luego puede volverse un poco complejo:

• Complejidad al crear proyecto: a pesar de que se puede escribir directamente JavaScript, para poder utilizar las herramientas de React como el JSX igualmente hay que crear un proyecto con características especiales, para ello al igual que Angular, React tiene su propio CLI para facilitar este proceso.
• JSX: esta mezcla de HTML y JavaScript puede complicar el aprendizaje al inicio debido a lo extraño y enredado de leer al principio.
• Entendimiento general: de igual manera se tiene que aprender a pensar en React, y nuevos conceptos de herramientas, y sobre todo la mezcla JSX.

Vue

Muchos argumentan que Vue, es más fácil de aprender que React y Angular considerando que:

• Complejidad al crear proyecto: esta característica en Vue no siempre es requerida, quizá para grandes proyectos donde se requieran más herramientas complejas, sea necesario, y para esto al igual que los dos anteriores Vue también tiene su CLI para facilitar este proceso.
• Sintaxis: Vue utiliza JavaScript, incluso se puede usar también TypeScript si se desea, y al igual que Angular separa el template HTML del código JavaScript, aunque en un mismo archivo a diferencia de Angular, que son dos por separado.
• Entendimiento general: con saber JavaScript y HTML adicionando las características especiales para el template de Vue, ya se podría comenzar a desarrollar, de allí se diga que a nivel general es más sencillo.

2.2. Rendimiento

Para comenzar, se puede mencionar que en el rendimiento hay dos sub categorías, rendimiento de arranque y rendimiento de ejecución.

El rendimiento de arranque quiere decir o indica cuan rápido la aplicación demora en iniciar y cargar todos los componentes necesarios hasta que el usuario pueda ver el contenido e interactuar con la aplicación. Esto es principalmente afectado por el tamaño del bundle (compilación) que se necesita descargar, y esto incluye tanto el código escrito por el desarrollador como también el código adicional agregado en la compilación del núcleo del framework.

Algo importante que tomar en cuenta es que el rendimiento de arranque puede verse afectado tanto por el tamaño de la aplicación como su optimización, dando como resultado que una aplicación pequeña funcione bien, pero cuando se aplica la optimización a una aplicación mucho más grande, no produce los resultados esperados.

Adicionalmente es notorio señalar que las aplicaciones Angular suelen tener un bundle más grande que React y Vue, pero por lo general los tres framework en aplicaciones grandes, tiene un bundle grande relativo entre ellos. Pero no habría mayor problema y más si se siguen las buenas prácticas para mejorar el rendimiento.

Por otro lado, el rendimiento de ejecución tiene que ver con lo rápido que la aplicación responde a las interacciones de los usuarios, cuan bien se mueve en los distintos dispositivos, ya sea web o móviles.

Esto lo influencia tanto el código escrito por el desarrollador como también el código del framework en sí. Por lo tanto los tres framework, Angular, React y Vue han hecho un buen trabajo para que el rendimiento de ejecución sea el mejor, y esto sigue mejorando, ya que los tres framework continuan en desarrollo y mejoras.

3. Popularidad y futuro

3.1. Aceptación y popularidad

Para poder evaluar esto consideramos fijarnos principalmente en tres áreas, Google Trends, Descargas de npm, Trabajos,  aunque también se puede considerar: Estrellas de Github, Preguntas de Stackoverflow, etc.

Google Trends

Como podemos ver, desde inicios del 2020 tanto React cómo Vue eran tendencia, posteriormente a mediados del 2020 y mediados de 2021 React fue el más popular entre los tres, dejando por debajo a Angular y Vue, pero más recientemente en el último trimestre del 2021 Vue ha cobrado mayor interés disminuyendo el de React.

Debemos recordar que estas son solo búsquedas realizadas por usuarios, no significa que efectivamente la persona que busque información esté utilizando el framework.

Descargas npm

Este gráfico nos indica la cantidad de descarga que tiene un paquete desde npm para su utilización. Podemos observar que React tiene mucha más demanda que Vue, y Angular, y que de hecho Vue ha estado aumentando más que Angular.

Algo que mencionar es que Angular también se distribuye de forma diferente a clientes por ende las descargas de su paquete no están reflejadas en npm, además de que para el uso interno de Google, tampoco descargan Angular desde npm.

Trabajos

Para esta comparación, utilizamos resultados de búsqueda en el portal de empleos infojobs.net e indeed.com ambos para España

• Angular
  • infojobs.net: 690
  • indeed.com: 1.539
• React
  • infojobs.net: 408
  • indeed.com: 1.742
• Vue
  • infojobs.net: 200
  • indeed.com: 649

Como podemos ver, tanto React como Angular tienen más demanda laboral que Vue, y esto es debido a que Angular y React han estado más tiempo en el ámbito de programación Vue, es como más nuevo. Otra razón es que a React y Angular los respalda empresas grandes Facebook y Google respectivamente, en cambio Vue solo depende de la mayor participación de sus colaboradores.

Esto nos ayuda a tener una perspectiva general de la popularidad de estos frameworks, React es popular, Vue está incrementando y Angular se ha mantenido, aunque a la hora de ofertas laborares React y Angular tienen mayor demanda sobre Vue.

3.2. Evolución del framework

Los tres framework están listos para ser usados en producción y además se encuentran actualmente en desarrollo, y es algo bueno, porque los framework evolucionan paso a paso, nuevas funciones se agregan, pero también que funciones que existen actualmente puedan ser removidas más adelante. Aunque implica que como desarrolladores tengamos que estar actualizando y aprendiendo funciones nuevas, es lo que conlleva a que un framework esté actualizado, y funcione no solo hoy sino también en el futuro.

Por lo tanto podemos aprovechar las nuevas mejoras que se hagan a los frameworks y debido a que su evolución es lo suficientemente lenta, permite que nadie se quede desactualizado.

Resumen

Cada framework es único a su manera, con sus distintivas características, pero los tres son excelentes frameworks que podemos usar. ¿cuál aprender? Los tres de ser posible, o al menos dos, no hace daño al menos tener un poco de conocimiento sobre otros frameworks en particular, y esta es la única forma de comprobar que tan útil y bueno nos puede parecer un framework, y para ello simplemente podemos ingresar a la documentación oficial de cada uno, donde hay muchos ejemplos y paso a paso de como iniciar con el framework.

De esta forma podremos mejorar como desarrolladores, y tomar mejores decisiones educativas o laborales al final y así contar con el framework que mejor se adapte a nuestras preferencias.