Sadot Hernández

Este artículo es una guía completa sobre la que quizá es la solución adecuada para ti: Angular vs React vs Vue.

Hace tiempo, muchos de los desarrolladores estaban debatiendo sobre si deberían usar Angular vs React para sus proyectos, pero en el transcurso de los últimos dos años vimos un crecimiento en el interés por un tercer jugador llamado Vue.js.

Si eres un desarrollador que comienza un proyecto y no puedes decidir qué Framework de JavaScript usar, este artículo* debe ayudarte a tomar una decisión, pues no solo es una guía sobre Angular vs React vs Vue, sino que tiene como objetivo proporcionar una estructura para ayudarte a juzgar los Framework de JavaScript front-end en general.

Así, en caso de que llegue un nuevo Framework el próximo año, sabrás exactamente qué parámetros analizar.

• En este artículo, se asume que tienes conocimientos básicos de JavaScript y que has utilizado algún Framework del mismo.

Una breve historia sobre Vue vs React vs Angular

Antes de entrar en los detalles técnicos, hablemos primero de la historia detrás de estos Framework, así podrás apreciar mejor su filosofía y su evolución a lo largo del tiempo.

¿Cómo empezó todo?

Angular, desarrollado por Google, fue lanzado por primera vez en 2010, por lo que es el más antiguo del lote. Es un Framework de JavaScript basado en TypeScript. Su primer cambio sustancial ocurrió en 2016 con en el lanzamiento de Angular 2 (y la caída de la "JS" del nombre original – AngularJS). A esta versión se le conoce solo como Angular y, aunque  su versión original todavía recibe actualizaciones, centraremos la discusión en esta. La última actualización estable es Angular 10, que fue lanzada en junio de 2020.

React, desarrollado por Facebook, fue lanzado inicialmente en 2013. Esta compañía utiliza React ampliamente en sus productos (Facebook, Instagram y WhatsApp). La versión estable actual es 16.X, lanzada en noviembre de 2018 (con actualizaciones incrementales más pequeñas desde entonces).

Vue, también conocido como Vue.js, es el miembro más joven del grupo. Fue desarrollado por el ex empleado de Google, Evan You, en 2014. En los últimos tres años, Vue ha visto un cambio sustancial en su popularidad a pesar de que no tiene el respaldo de una gran empresa. Su versión estable actual es 2.6, lanzada en febrero de 2019 (con algunas pequeñas versiones incrementales desde entonces). Los colaboradores de Vue son apoyados por Patreon. La versión 3 de Vue, actualmente en fase alfa, está planeando pasar a TypeScript.

Aquí un breve resumen de Angular vs React vs Vue, en términos de su estado e historia:

Licencia

Antes de usar un software o Framework de código abierto, asegúrate de revisar las implicaciones de su licencia. Curiosamente, los tres Framework utilizan la licencia MIT, que proporciona restricciones limitadas en la reutilización, incluso en el software propietario.

Popularidad

Como "angular" y "react" son palabras comunes, es difícil comprender su popularidad en Google Trends. Sin embargo, una buena referencia es el número de estrellas que obtienen sus repositorios de GitHub.

Un ejemplo de esto es el cambio repentino en el número de estrellas de Vue, el cual ocurrió a mediados de 2016 y, recientemente, Vue ha estado allí con React entre los frameworks más populares.

Número de estrellas en proyectos de GitHub para Angular, React y Vue

Vamos a comprobar cómo es el mercado laboral para Angular vs React vs Vue, que también es una buena medida de popularidad.

Las mejores fuentes de datos que indican las tendencias en este mercado son las distintas bolsas de trabajo:

Mercado laboral para Angular vs React vs Vue a finales de 2018

Como se ve en las tendencias de finales de 2018, el número de puestos de trabajo que requerían un conjunto de habilidades de Angular o React era aproximadamente el mismo, mientras que el de Vue era todavía solo una fracción de este (alrededor del 20%).

Si deseas un análisis más actualizado, puedes probar esta búsqueda de GoogleTrends, que desglosa las tendencias de búsqueda en los últimos 12 meses para los trabajos de React,  Angular y los de Vue.

Google Trends también desglosa las tendencias de búsqueda de empleo por ubicación geográfica, de esta manera puedes consultar las de tu área.

Si quieres basarte estrictamente en el punto de vista del mercado laboral actual, tu mejor apuesta es aprender Angular o React. Dado que Vue ha ganado popularidad a partir de los últimos tres años, los proyectos pueden tardar un tiempo en utilizar este framework, o requerirá alcanzar un mayor nivel de popularidad que les permita tener más desarrolladores.

Comunidad y desarrollo

Ahora que estás familiarizado con la historia y las tendencias recientes de cada uno de estos frameworks, examinaremos a la comunidad para evaluar el desarrollo de estos. Ya hemos visto que, para todas estas bibliotecas, las versiones incrementales se han enviado regularmente durante el último año, lo que indica que el desarrollo está sucediendo en pleno apogeo.

Echemos un vistazo a Angular vs React vs Vue con respecto a las estadísticas en sus repositorios gitHub:

Al comparar Vue vs React, Vue tiene un gran número de observadores, estrellas y bifurcaciones. Esto muestra su popularidad entre los usuarios y el valor que tiene en comparación con React. Sin embargo, el número de contribuyentes para Vue es menor que Angular y React.

Una posible explicación es que Vue es impulsado enteramente por la comunidad de código abierto, mientras que Angular y React tienen una parte significativa de los empleados de Google y Facebook que contribuyen a los repositorios.

A partir de las estadísticas, los tres proyectos muestran una actividad de desarrollo significativa, y esto seguramente va a continuar en el futuro. Aun así, es importante que no bases tu decisión en estos parámetros, sino que te centres en el framework que te agrade más y que se acomode mejor al proyecto que estás realizando.

Una métrica adicional que querrás tener en cuenta es la insignia "Used By" (Usado por) de GitHub, que debe habilitar el autor del repositorio. Esto muestra cuántos otros repositorios en GitHub dependen de ese repositorio.

El repositorio GitHub de Angular aún no ha habilitado esta característica, React muestra actualmente casi 4,000,000, mientras que Vue registra más de 93,000. Si bien existe una enorme diferencia entre los dos,  esto se debe en gran parte a que Vue es el framework más nuevo y no cuenta el panorama completo a petición general.

Migraciones

Puedes trabajar con el framework de tu elección, no tienes por qué preocuparte por una de sus actualizaciones y estropear el código. En la mayoría de los casos no se deberían encontrar muchos problemas entre una versión u otra.

Angular planea liberar actualizaciones importantes cada seis meses. También hay un período de otros seis meses antes de que las APIs principales estén en desuso, lo que te da el tiempo de dos ciclos de lanzamiento (un año) para realizar los cambios necesarios si los hay.

Cuando se trata de Angular vs React, Facebook ha declarado que la estabilidad es de suma importancia para ellos, ya que grandes empresas como Twitter y Airbnb utilizan React. Las actualizaciones a través de versiones son generalmente las más fáciles en React, con scripts como react-codemod que le ayudan a migrar.

En la sección Migración de las preguntas frecuentes, Vue menciona que el 90% de la API es la misma si va a migrar de 1.x a 2. Hay una  herramienta auxiliar de migración que funciona en la consola para evaluar el estado de la aplicación.

Trabajar con Vue vs Angular vs React

Hay varias características importantes a considerar, las principales son el tamaño general, los tiempos de carga, los componentes disponibles y la curva de aprendizaje.

Tamaño y tiempos de carga

Los tamaños de las bibliotecas son los siguientes:

• Angular 4+: A partir de esta versión depende del tamaño del paquete producido
• React: 116 KB
• Vue: 91 KB

Aunque puede haber una diferencia significativa entre los tamaños de los frameworks, siguen siendo pequeños en comparación con el tamaño medio de la página web (alrededor de 2 MB según los datos más recientes). Además, si utilizas una red CDN popular para cargar estas bibliotecas, es muy probable que un usuario ya la tenga guardada en su navegador, por lo que el tiempo de respuesta será aún más rápido.

Componentes

Los componentes son partes integrales de los tres frameworks, no importa si estamos hablando de Vue,  React o Angular. Un componente generalmente obtiene una entrada y cambia el comportamiento en función de ella. Este cambio de comportamiento suele manifestarse como un cambio en la interfaz de usuario de alguna parte de la página. El uso de componentes facilita la reutilización del código. Un componente puede ser un carrito en un sitio de comercio electrónico o un cuadro de inicio de sesión en una red social.

Angular:

En Angular los componentes se conocen como directivas. Estas son marcadores en elementos DOM a los que se les puede rastrear y adjuntar un comportamiento específico. Por lo tanto, Angular separa la parte de la interfaz de usuario de los componentes como atributos de las etiquetas HTML y sus comportamientos en forma de código JavaScript. Esto es lo que lo diferencia cuando se compara Angular vs React.

React:

React combina la interfaz de usuario y el comportamiento de los componentes. Por ejemplo, este es el código para crear un componente hello world en React. Aquí, la misma parte del código es responsable de crear un elemento de interfaz de usuario y dictar su comportamiento.

Vue:

En Vue la interfaz de usuario y el comportamiento también son una parte de los componentes, lo que hace que las cosas sean más intuitivas. Es altamente personalizable, lo que le permite combinar la interfaz de usuario y el comportamiento de los componentes desde dentro de un script. También puede utilizar pre-procesadores en Vue en lugar de CSS, que es una gran funcionalidad. Vue es genial cuando se trata de integración con otras bibliotecas, como Bootstrap.

Para comparar cómo se ve la misma aplicación con diferentes bibliotecas, puedes leer Crea exactamente la misma aplicación en React y Vue, donde podrás contrastar las diferencias de los dos frameworks.

Curva de aprendizaje

¿Qué tan difícil es aprender cada uno de estos frameworks?

Angular:

Angular tiene una curva de aprendizaje empinada, teniendo en cuenta que es una solución completa, y dominarlo requiere que aprendas conceptos asociados como TypeScript y MVC. A pesar de que se necesita tiempo para aprenderlo, la inversión vale la pena en términos de entender cómo funciona el front-end.

React:

React ofrece una guía de introducción  que puede ayudarte a configurarlo en aproximadamente una hora. La documentación es exhaustiva y completa, con soluciones a problemas comunes ya presentes en Stack Overflow.

React no es un framework completo y las características avanzadas requieren el uso de bibliotecas de terceros. Esto hace que la curva de aprendizaje del framework principal no sea tan empinada, pero depende de la ruta que tomes con la función adicional. Puede que aunque sepas usar React no lo estés haciendo de la forma correcta, por lo que te sugerimos consultar las prácticas recomendadas.

Vue:

Vue proporciona una mayor personalización, por lo que es más fácil de aprender. Además tiene una superposición con Angular y React con respecto a su funcionalidad, como el uso de componentes. El salto a Vue desde cualquiera de los dos es una opción fácil, pero esta simplicidad y flexibilidad es una espada de doble filo, ya que permite un código deficiente, lo que dificulta la depuración y la prueba.

Aunque Angular, React y Vue tienen una curva de aprendizaje significativa, sus usos sobre el dominio son ilimitados. Por ejemplo, puedes integrar Angular y React con WordPress y WooCommerce para crear aplicaciones web progresivas.

Angular vs React vs Vue: ¿Quién gana?

Hagamos un recuento de las características de cada framework para tratar de responder a la pregunta: Angular vs React vs Vue, ¿cuál deberías elegir?

Angular es el más maduro de los framework, tiene el respaldo de grandes compañías y es una paquetería muy completa.

Sin embargo, la curva de aprendizaje es empinada y los conceptos de desarrollo en Angular pueden desconcertar a los nuevos desarrolladores.

En resumen, Angular es una buena opción para empresas con grandes equipos y desarrolladores que ya utilizan TypeScript.

React es lo suficientemente mayor como para ser maduro y tiene un gran número de contribuciones de la comunidad. Ha ganado una aceptación generalizada. El mercado laboral de React es realmente bueno, y el futuro de este framework se ve brillante.

React parece una buena opción para alguien que comienza con frameworks de JavaScript front-end, startups y desarrolladores a los que les gusta cierta flexibilidad. La capacidad de integrarse con otros frameworks de trabajo sin problemas le da una gran ventaja a aquellos que desean cierta flexibilidad en su código.

Vue es lo más nuevo en el campo y pese a no contar con el respaldo de una gran empresa, se ha posicionado como un fuerte competidor para Angular y React. Una muestra de esto es que grandes compañías chinas lo han elegido como su framework de JavaScript front-end principal.

Sin embargo, queda por ver cómo lo hace en el futuro, por lo que ser cauteloso no está de más. Vue es muy versátil y puede ser tu opción tanto si prefieres la simplicidad como si buscas flexibilidad.

La respuesta al debate de Angular vs React vs Vue es que no hay una elección correcta absoluta, una conclusión que probablemente esperabas.

Cada una de estas bibliotecas tiene sus propios beneficios e inconvenientes. Basado en el proyecto en el que estés trabajando y tus requisitos individuales, uno de estos va a ser más adecuado que los demás. Siempre es clave hacer tu propia investigación antes de decidir, especialmente si vas a trabajar en un negocio y no en un proyecto personal.

¿Qué framework crees que es el ganador aquí: Angular, React o Vue?

Referencia:

Daityari, Shaumik. Angular vs React vs Vue: Which Framework to Choose in 2020. CodeinWP. Recuperado de codeinwp.com