Angular vs React vs Vue: qué framework elegir en 2020

2021-01-19

Angular vs React vs Vue: qué framework elegir en 2020

Hace aproximadamente un año, los desarrolladores debatían principalmente si deberían usar Angular o React para sus proyectos. Pero en el transcurso de 2018, vimos un aumento de interés en un tercer jugador llamado Vue.js. Mirando hacia 2020, esta publicación es una guía completa sobre cuál es quizás la solución adecuada para usted: Angular vs React vs Vue.

Si usted es un desarrollador que comienza un proyecto y no puede decidir qué marco JavaScript usar, esta guía lo ayudará a tomar una decisión.

Cubrimos varios aspectos de Angular, Vue y React para ver cómo se adaptan a sus necesidades. Esta publicación no es solo una guía sobre Angular vs React vs Vue, sino que tiene como objetivo proporcionar una estructura para ayudar a juzgar los marcos JavaScript front-end en general. 

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

Cómo empezó todo

Angular , desarrollado por Google, se lanzó por primera vez en 2010, por lo que es el más antiguo del lote. Es un marco JavaScript basado en TypeScript. En 2016 se produjo un cambio sustancial en el lanzamiento de Angular 2 (y la eliminación de “JS” del nombre original: AngularJS). Angular 2+ se conoce como solo Angular . Aunque AngularJS (versión 1) todavía recibe actualizaciones, centraremos la discusión en Angular. La última versión estable es Angular 7, que se lanzó en octubre de 2018.


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 dos años, Vue ha visto un cambio sustancial en la popularidad, a pesar de que no cuenta con el respaldo de una gran empresa. La versión estable actual es 2.17, lanzada en agosto de 2018. Los contribuyentes de Vue son  compatibles con Patreon . Vue 3,  actualmente en la fase de creación de prototipos,  planea  pasar a TypeScript .

React , desarrollado por Facebook, se lanzó inicialmente en 2013. Facebook usa React ampliamente en sus productos (Facebook, Instagram y WhatsApp). La versión estable actual en 16.X, lanzada en noviembre de 2018.


La historia de Angular vs React vs Vue


Licencia 

Antes de usar un marco de código abierto, asegúrese de pasar por su licencia. Curiosamente, los tres marcos utilizan la  licencia MIT , que proporciona restricciones limitadas en la reutilización, incluso en software privativo. Asegúrese de conocer las implicaciones de la licencia antes de usar cualquier marco o software.

Aquí hay  un resumen rápido de la licencia MIT  en términos simples en inglés.

Como “angular” y “react” son palabras comunes, es difícil captar su popularidad de Google Trends. Sin embargo, un buen indicador de su popularidad es  la cantidad de estrellas que obtienen sus repositorios de GitHub . Un cambio repentino en el número de estrellas de Vue ocurrió a mediados de 2016 y, recientemente, Vue ha estado a la altura de React como los marcos más populares.

Veamos cómo es el mercado laboral de Angular vs React vs Vue, que también es una buena medida de popularidad:

Las mejores fuentes de datos que indican las tendencias en el mercado laboral son las distintas bolsas de trabajo.

Como se ve en las tendencias de fines de 2018, el número de trabajos que requieren un conjunto de habilidades de Angular o React es aproximadamente el mismo, mientras que el de Vue sigue siendo solo una fracción de este número (alrededor del 20%). Esta lista definitivamente no es exhaustiva, pero ofrece una buena imagen de la industria tecnológica en general.

Si está buscando estrictamente desde el punto de vista del mercado laboral actual, su mejor opción es aprender Angular o React. Sin embargo, dado que Vue ha ganado popularidad en los últimos dos años, puede llevar algún tiempo que los proyectos usen Vue, o que los nuevos proyectos que adopten Vue alcancen un nivel de madurez que requiera un mayor número de desarrolladores.


Parte 2: comunidad y desarrollo

Ahora que está familiarizado con la historia y las tendencias de cada uno de estos marcos, analizaremos la comunidad para evaluar el desarrollo de estos marcos. Ya hemos visto que para todos los marcos, se ha enviado una versión importante en los últimos cuatro meses, lo que indica que el desarrollo está en pleno desarrollo.

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

Vue tiene una gran cantidad de observadores, estrellas y tenedores. Esto muestra su popularidad entre los usuarios y su valor al comparar Vue vs React. Sin embargo, el número de commits y contribuyentes para Vue es menor que Angular y React.

Una posible explicación es que Vue es impulsado en su totalidad 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 .

Según las estadísticas, los tres proyectos muestran una importante actividad de desarrollo, y esto seguramente continuará en el futuro, solo que estas estadísticas no pueden ser la base para no decidir usar ninguno de ellos.


Parte 3: Migraciones

A medida que trabaje con el marco de su elección, no querrá tener que preocuparse de que aparezca una actualización del marco y estropee su código. Aunque en la mayoría de los casos no encontrará muchos problemas de una versión a otra, es importante mantenerse al tanto porque algunas actualizaciones pueden ser más significativas y requieren ajustes para mantener las cosas compatibles.

Angular  planea actualizaciones importantes  cada seis meses. También hay un período de otros seis meses antes de que cualquier API importante quede en desuso, lo que le da el tiempo de dos ciclos de lanzamiento (un año) para realizar los cambios necesarios, si corresponde.

Cuando se trata de Angular vs React, Facebook ha declarado que la  estabilidad es de suma importancia  para ellos, ya que grandes compañías como Twitter y Airbnb usan 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 de preguntas frecuentes sobre migración, Vue menciona que el  90% de las API son iguales si está migrando de 1.xa 2 . Existe una  herramienta auxiliar de migración  que funciona en la consola para evaluar el estado de su aplicación.


Parte 4: Trabajar con Vue vs Angular vs React

Hay un puñado de características importantes para ver aquí, la principal de ellas es el tamaño general y 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: más de 500 KB
• React: 100 KB
• Vue: 80 KB

Aunque existe una diferencia significativa entre los tamaños de los marcos, todavía son pequeños en comparación con el tamaño promedio de la página web (2+ MB en 2018). Además, si usa un CDN popular para cargar estas bibliotecas, es muy probable que un usuario ya tenga la biblioteca cargada en su sistema local .

Componentes 

Los componentes son partes integrales de los tres marcos, no importa si estamos hablando de Vue , React o Angular. Un componente generalmente recibe una entrada y cambia el comportamiento en función de ella. Este cambio de comportamiento generalmente se manifiesta 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 denominan  directivas . Las directivas son solo marcadores en elementos DOM, que Angular también puede rastrear y adjuntar comportamientos específicos. 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 distingue cuando se mira Angular vs React.

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

Vue: En Vue, la interfaz de usuario y el comportamiento también son parte de los componentes, lo que hace que las cosas sean más intuitivas al mirar Vue vs React. Además, Vue es altamente personalizable, lo que le permite combinar la interfaz de usuario y el comportamiento de los componentes desde un script. Además, también puede  usar preprocesadores en Vue en lugar de CSS , que es una gran funcionalidad. Vue es excelente cuando se trata de integración con otras bibliotecas, como Bootstrap .

Para comparar cómo se ve la misma aplicación con diferentes bibliotecas, aquí hay una gran publicación sobre  cómo crear la misma aplicación de lista de tareas en React y Vue  y contrastar las diferencias de los dos marcos.

Curva de aprendizaje 

Entonces, ¿qué tan difícil es aprender cada uno de estos marcos?

Angular: Angular  tiene una curva de aprendizaje empinada, considerando que es una solución completa, y dominar Angular requiere que aprenda conceptos asociados como TypeScript y MVC. Aunque lleva tiempo aprender Angular, la inversión paga dividendos en términos de entender cómo funciona el front-end.

React: React ofrece una   guía de inicio que debería ayudarlo a configurar React en aproximadamente una hora. La documentación es exhaustiva y completa, con soluciones a problemas comunes ya presentes en StackOverflow. React no es un marco completo y las funciones avanzadas requieren el uso de bibliotecas de terceros. Esto hace que la curva de aprendizaje del marco central no sea tan pronunciada, pero depende de la ruta que tome con funcionalidad adicional. Sin embargo, aprender a usar React no significa necesariamente que esté utilizando  las mejores prácticas.

Vue: Vue  proporciona una mayor personalización y, por lo tanto, es más fácil de aprender que Angular o React. Además, Vue tiene una superposición con Angular y React con respecto a su funcionalidad, como el uso de componentes. Por lo tanto, la transición a Vue desde cualquiera de los dos es una opción fácil. Sin embargo, la simplicidad y flexibilidad de Vue es una espada de doble filo: 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 al dominar son ilimitados. Por ejemplo, puede integrar Angular y React  con WordPress y WooCommerce para crear aplicaciones web progresivas .

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

Hacia el final de esta publicación, recordemos los rasgos característicos de cada marco para tratar de responder la pregunta: Angular vs React vs Vue: ¿cuál debería elegir?

Angular es el más maduro de los frameworks, tiene un buen respaldo en términos de contribuyentes y es un paquete completo.

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

Angular es una buena opción para empresas con grandes equipos y desarrolladores que ya usan TypeScript.

Extra  Aquí hay algunas plantillas de panel de administración de Angular que pueden interesarle.

React tiene la edad suficiente para ser maduro y tiene una gran cantidad de contribuciones de la comunidad. Está ganando una amplia aceptación. El mercado laboral de React es realmente bueno, y el futuro de este marco se ve brillante.

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

Vue es nuevo en la arena, sin el respaldo de una gran empresa.

Sin embargo, le ha ido muy bien en los últimos años para convertirse en un fuerte competidor de Angular y React. Esto quizás esté jugando un papel con muchos gigantes chinos como Alibaba y Baidu eligiendo Vue como su principal marco de JavaScript front-end.

Sin embargo, queda por ver cómo será en el futuro y se justifica ser cauteloso con eso. Vue debería ser su elección si prefiere la simplicidad, pero también le gusta la flexibilidad.

La respuesta al debate de Angular vs React vs Vue es que no existe una elección correcta absoluta, que probablemente haya esperado.

Cada una de estas bibliotecas tiene sus propios beneficios y desventajas. Según el proyecto en el que esté trabajando y sus requisitos individuales, uno de ellos será más adecuado que los demás. Siempre es clave hacer su propia investigación antes de decidir, especialmente si va a trabajar en una empresa comercial y no en un proyecto personal