Vue.js, Angular y React: Un análisis comparativo de métricas de rendimiento

Desde que empecé a trabajar he visto la lucha entre los desarrolladores para descubrir cuál es la mejor tecnología entre Angular o React, y recientemente Vue.js, basados en la velocidad de la tecnología para responder a la pregunta ¿Cuál framework debo de utilizar?. Hoy quiero mostrarles con números y detalles cuál es la tecnología más eficiente en este momento para que puedan tomar una decisión informada.

Visita mi reciente de blogpost sobre ¿Cuál framework web debo de escoger?

Resumen de las métricas de rendimiento

Las métricas de rendimiento se toman de esta sitio [insertar enlace] el cual es una herramienta que tiene varios resultados de referencia para muchas tecnologías JavaScript. Las métricas que estaremos analizando se dividen en tres categorías:

1. Duración en milisegundos ± intervalo de confianza del 95% (Desaceleración = Duración / más rápido): Esto mide el tiempo que se tarda en realizar varias operaciones como: crear, actualizar, seleccionar, eliminar intercambiar y agregar filas a una tabla muy grande.
2. Métricas de inicio (lighthouse con simulación móvil): Esto mide el tiempo que se tarda en que la aplicación se vuelva consistentemente interactiva (un TTI pesimista - cuando el CPU y la red están definitivamente muy inactivas) y el peso total en kilobytes de todos los recursos cargados en la página.
3. Asignación de memoria en MBs ± intervalo de confianza del 95%: Esto mide el uso de memoria de la aplicación durante varias operaciones como:
   1. El uso de memoria después de la carga de la página (memoria lista),
   2. El uso de memoria después de agregar 1000 filas
   3. El uso de memoria después de agregar 10.000 filas
   4. Entre otros

Importante las pruebas se realizan en un MacBook Pro 14 (32 GB RAM, 8/14 Cores, OSX 13.4.1 (c)), Chrome 115.0.5790.98 (arm64)) usando el driver de benchmark de puppeteer con trazado reducido.

Clasificación basada en métricas de rendimiento

Vamos a clasificar Vue.js, Angular y React en función de las métricas de rendimiento:

Duración en milisegundos

• Vue.js supera consistentemente a Angular y React en la mayoría de las operaciones, incluyendo la creación de filas (42.7ms), reemplazando todas las filas (45.0ms), seleccionando una fila (15.9ms), intercambiando filas (27.6ms), creando muchas filas (481.4ms), añadiendo filas a una gran tabla (94.2ms), y borrando filas (34.2ms).
• Angular se desempeña mejor que React en la creación de filas (43.2ms) y actualizaciones parciales (91.9ms) pero se queda atrás en otras operaciones como el intercambio de filas (168.0ms) y la eliminación de filas (59.8ms).
• React generalmente se desempeña más lento que Vue.js y Angular en la mayoría de las operaciones, con la excepción de las actualizaciones parciales donde supera a Vue.js con una duración de 104.9ms.

Métricas de inicio

• Vue.js es el más rápido en volverse consistentemente interactivo (2,101.5ms) y tiene el menor peso total en kilobytes (197.4KB).
• React es más rápido en volverse consistentemente interactivo (2,551.5ms) que Angular y tiene un peso total en kilobytes ligeramente menor (281.2KB) que Angular.
• Angular toma el mayor tiempo en volverse consistentemente interactivo (2,781.3ms) y tiene el mayor peso total en kilobytes (282.8KB).

Asignación de memoria

• Vue.js utiliza la menor cantidad de memoria en todas las operaciones, lo que lo convierte en el framework más eficiente en términos de memoria entre los tres.
• React utiliza más memoria que Vue.js pero menos que Angular en todas las operaciones.
• Angular utiliza la mayor cantidad de memoria en todas las operaciones.

Clasificación general

1. Vue.js: Vue.js toma la delantera en todas tres categorías, lo que lo convierte en el framework más rápido y eficiente entre los tres.
2. React: A pesar de quedarse atrás en la velocidad de operación, React es más eficiente que Angular en las métricas de inicio y la asignación de memoria.
3. Angular: Angular generalmente se desempeña más lento y utiliza más recursos que Vue.js y React, ubicándolo en tercer lugar en nuestra clasificación.

Conclusión

Basándose en estas métricas de rendimiento, Vue.js supera a Angular y React en la mayoría de las categorías, convirtiéndolo en el framework más eficiente entre los tres. Es más rápido en la realización de operaciones, tiene métricas de inicio más rápidas y utiliza menos memoria.

Sin embargo, es importante tener en cuenta que estas métricas son sólo un aspecto a considerar cuando se elige un framework. Otros factores como la curva de aprendizaje, el apoyo de la comunidad y la adecuación para el proyecto también deben tenerse en cuenta. Lee más sobre esto en esta entrada de blog

Al final, el mejor framework es el que se adapta a tus necesidades y conocimientos específicos. Ya sea Vue.js, Angular o React, cada uno de estos frameworks ha demostrado ser una herramienta poderosa para la construcción de aplicaciones web dinámicas.

Déjame saber en los comentarios ¿Qué piensas de los resultados?

--
No olvides siempre estar preparado para tú siguiente entrevista, puedes hacerlo con mi libro de 99 preguntas para un desarrollador web acá.