React vs Angular vs Vue.js: ¿qué elegir?

Finalmente hemos llegado a la conclusión de esta mini serie sobre 3 de los frameworks del lenguaje JavaScript más famosos que existen actualmente. Después de presentarlos y hablar sobre su historia en Vue.js al microscopio, Angular al microscopio y React al microscopio, es hora de compararlos, con sus fortalezas y sus defectos. 

El objetivo es intentar dar una respuesta a la duda sobre el correcto framework para comenzar un nuevo proyecto. A menudo esta elección no está guiada por un correcto análisis, con el riesgo de no poder satisfacer las necesidades de la aplicación durante el desarrollo. 

Empezaremos con un rápido resumen de las funcionalidades más importantes, ofreciendo también detallados benchmarks de sus prestaciones.

¿Por qué Angular?

A pesar de que en los últimos años Angular ha perdido popularidad, logra mantener una posición de liderazgo entre las diversas comunidades y rankings. 

Esto no se debe solo al hecho de que como es un producto de Google constantemente lo están mejorando, sino por el hecho de que Angular ofrece una estructura increíble, ofreciendo una fácil conexión de datos, un modelo MVVM (model view viewModel), un sistema de módulos integrados, un óptimo routing unido a un sistema de dependency injection y otras funcionalidades interesantes.

Pros y beneficios de Angular

Angular divide los componentes en diferentes chunks, es decir paquetes lógicos que permiten una mayor optimización de los tiempos de carga y mejor rendimiento. Además, los pattern MVVM facilita y acelera el desarrollo, integrando un two way data binding entre las view y las viewModel, permitiendo la propagación automática del estado de la aplicación.

Por esto y mucho más, Angular atrae a muchas empresas y desarrolladores web, especialmente gracias a su ayuda continua y al ecosistema rico en funciones ya integradas que eliminan casi por completo la necesidad de instalar paquetes de terceros. 

Problemas de Angular

Uno de los problemas comunes y conocidos de Angular es su difícil curva de aprendizaje.

A diferencia de sus competidores como React y Vue.js, Angular requiere más tiempo para dominar y requiere habilidades básicas por encima de la media, entonces no se aconseja a los principiantes. 

Además, dada su naturaleza para ofrecer múltiples funcionalidades out-of-the-box, es decir, disponibles inmediatamente, produce bundle pesados, con el resultado de generar aplicaciones a veces más lentas que las de sus competidores.

¿Por qué React?

React, al contrario que Angular y Vue.js, nace como una biblioteca con el objetivo de crear componentes reutilizables para integrar en los propios proyectos web.

Dada su naturaleza de biblioteca, React no proporciona un diseño arquitectónico, que se deja al libre albedrío de su usuario. Para ser claros, no implementa un patrón como MVC, pero el desarrollador web puede decidir implementarlo.

Pros y beneficios de React

La misión principal de React es la de ofrecerse como un framework fácil de usar y rápido, que permita escalar cualquier proyecto con agilidad mediante la creación de componentes personalizados reutilizables y modulares. 

Una de sus grandes ventajas son las performance, una característica que desde el inicio lo ha hecho popular. Otras características importantes son el uso de un Virtual Dom, que agiliza y mejora las operaciones de escritura y actualización, la ayuda al tree-shaking para reducir al mínimo las dimensiones del bundle final.

Problemas de React

Al contrario de Angular, que ofrece un completo entorno de desarrollo, React no implementa ningún patrón, ofreciendo plena libertad al desarrollador para instalar bibliotecas de terceros para estados y modelos. Esto provoca una falta de documentación, ya que, debido a sus constantes actualizaciones y la gran cantidad de desarrollo de bibliotecas de terceros que la respaldan, muchas veces es difícil alinear la documentación con detalle.  

 ¿Por qué Vue.js?

Vue.js es un framework progresivo, ideal para adaptarse de forma incremental en su proyecto, a diferencia de los framework monolíticos como Angular. A contrario de los competidores, Vue.js no tiene una gran empresa que lo respalde (piensa en Google en el caso de Angular y Facebook para React). A pesar de esto, es uno de los framework JavaScript más populares en Github.

Pros y beneficios de Vue.js

Cuando se habla de Vue.js es fácil confrontarlo con React, debido a algunas de sus características similares. Por ejemplo, ambos framework usan un Virtual Dom y están orientados hacia el desarrollo de componentes reutilizables.

Otro punto a favor de Vue.js son las prestaciones en términos de velocidad y bundle size. Además, dado que es fácil de aprender, es ideal tanto para principiantes como para profesionales. Su documentación está constantemente actualizada y, gracias a su facilidad para integrarse, permite comenzar a usarlo casi al instante. 

Problemas de Vue.js

Una de las desventajas de Vue.js es que, no teniendo una gran empresa que lo respalde, se rige gracias a la comunidad y a los patrocinadores que, afortunadamente, contribuyen constantemente a su desarrollo. Sin embargo, esta situación puede asustar a un gran número de empresas y desarrolladores que optarán por soluciones más “seguras” desde este punto de vista.

Entonces, ¿Angular, React o Vue.js?

Después de este breve resumen, analicemoslo específicamente para poder elegir la mejor herramienta para nuestras exigencias.

Los criterios que analizaremos se refieren a la manipulación del DOM, a los tiempos de inicio y la cantidad de memoria requerida: tres criterios muy importantes cuando se habla de desarrollo web.

El desempeño respecto a la manipulación del DOM es un índice de evaluación esencial para aplicaciones que requieren una gran cantidad de interacciones con el DOM; los tiempos de inicio son importantes para las aplicaciones que requieren rapidez en la fase de startup; la asignación de memoria es importante en los casos en que se gestionan grandes cantidades de datos.

Todos los puntos de referencia presentados provienen del repositorio Github de Stefan Krause.

¡Empezamos!

P.D. El color verde indica performance, mientras que el rojo y el amarillo performance menor

Manipulación DOM 

Como puedes observar en la tabla de arriba, Vue.js resulta ser el más eficiente, seguido de Angular y después React. Estos análisis se realizan sobre versiones muy recientes de frameworks: de hecho, en las versiones anteriores fue Angular el que ocupó el podio en el campo de la manipulación DOM.

Tiempos de inicio

Incluso en este caso es Vue.js el que está en el podio. Seguramente el bundle size muy contenido facilita esta primera fase. Como puedes comprobar, también React tiene un rendimiento similar, mientras que Angular es el que más lucha.

Memoria ocupada

Viendo estos valores, inmediatamente llama la atención que siempre es Vue.js el que ocupa el podio, seguido de React y, finalmente, de Angular.

React y Vue.js no tienen diferencias muy significativas en términos de rendimiento, sin embargo Angular parece estar luchando un poco en este aspecto, aunque parece obvio después de haberlo explorado en detalle.

¿Qué framework tendría que elegir?

Aunque los benchmarks son bastante claros y declaran ganador a Vue.js, la elección del framework más adecuado debe tener en cuenta otras situaciones.

Por ejemplo, es oportuno usar Angular cuando se habla de aplicaciones a nivel de enterprise, que gestionan y conectan una gran cantidad de datos, donde la modificación de una información tiene impactos en múltiples componentes y produce una serie de behaviours que, sin un control adecuado del estado, sería difícil de seguir.

La naturaleza monolítica de Angular puede ir bien en aplicaciones de grandes dimensiones pero no es apta para pequeñas y medianas aplicaciones, porque solo causaría ralentizaciones. 

React y Vue.js son muy similares, ambos ofrecen una manera rápida y eficiente de desarrollar, son versátiles y tienen buen rendimiento. Además, React puede presumir de una comunidad más amplia y un soporte más seguro con Facebook detrás, mientras que Vue.js además de la velocidad puede presumir también de ligereza, que lo convierte más adecuado para ser integrado en el desarrollo, haciendo coexistir, sin problemas, el código existente con componentes Vue.js cuando un proyecto ya está iniciado: ¡imagina Startups!   

Esperemos que esta mini serie de React, Angular y Vue.js haya sido de agrado y te haya ayudado en la elección del principal framework JavaScript para utilizar para tus futuros proyectos. Entonces, ¿cuál elegirías?