React vs Angular: una comparación en profundidad

Compararemos Angular y React para demostrar cómo puede abordar el problema de comparar dos marcos de forma estructurada por su cuenta y adaptarlo a su entorno. Ya sabes, el viejo enfoque de "enseñar a un hombre a pescar". De esa manera, cuando ambos sean reemplazados por un BetterFramework.js dentro de un año, podrá volver a crear el mismo hilo de pensamiento una vez más.

¿Dónde empezar?

Antes de elegir cualquier herramienta, debe responder dos preguntas simples: “¿Es esta una buena herramienta per se? ”y“ ¿Funcionará bien para mi caso de uso?” Ninguno de ellos significa nada por sí solo, por lo que siempre debe tenerlos en cuenta a ambos. Muy bien, las preguntas pueden no ser tan simples, por lo que intentaremos dividirlas en otras más pequeñas.

Con este conjunto de preguntas, puede comenzar su evaluación de cualquier herramienta, y también basaremos nuestra comparación de React y Angular en ellas.

Hay otra cosa que debemos tener en cuenta. Estrictamente hablando, no es exactamente justo comparar Angular con React, ya que Angular es un marco completo y rico en funciones, mientras que React es solo una biblioteca de componentes de UI. Incluso para las probabilidades, hablaremos de React junto con algunas de las bibliotecas que a menudo se usan con él.

Hay otra cosa que debemos tener en cuenta. Estrictamente hablando, no es exactamente justo comparar Angular con React, ya que Angular es un marco completo y rico en funciones, mientras que React es solo una biblioteca de componentes de interfaz de usuario. Para igualar las probabilidades, hablaremos sobre React junto con algunas de las bibliotecas que se usan a menudo con él.

React

React es desarrollado y mantenido por Facebook y se utiliza en sus productos, incluidos Instagram y WhatsApp. Ha existido desde 2013, por lo que no es exactamente nuevo. También es uno de los proyectos más populares en GitHub, con más de 150 000 estrellas en el momento de escribir este artículo. Algunas de las otras compañías notables que usan React son Airbnb, Uber, Netflix, Dropbox y Atlassian. Suena bien para mí.

Angular

Angular ha existido desde 2016, lo que lo hace un poco más joven que React, pero tampoco es un chico nuevo en el bloque. Lo mantiene Google y, como lo menciona Igor Minar , incluso en 2018 se usó en más de 600 aplicaciones en Google, como Firebase Console, Google Analytics, Google Express, Google Cloud Platform y más. Fuera de Google, Forbes, Upwork, VMWare y otros utilizan Angular .

Características

Como mencioné anteriormente, Angular tiene más funciones listas para usar que React. Esto puede ser tanto bueno como malo, dependiendo de cómo se mire.

Ambos marcos comparten algunas características clave en común: componentes, enlace de datos y representación independiente de la plataforma.

Lenguajes, Paradigmas y Patrones

Dando un paso atrás en las características de cada marco, veamos qué tipo de conceptos de alto nivel son populares con ambos marcos.

React

Varias cosas importantes vienen a la mente cuando se piensa en React: JSX, componentes y ganchos.

JSX

A diferencia de la mayoría de los marcos, React no tiene un lenguaje de plantillas separado. En lugar de seguir un enfoque clásico de separar el marcado y la lógica, React decidió combinarlos en componentes usando JSX , un lenguaje similar a XML que le permite escribir marcado directamente en su código JavaScript.

Si bien los méritos de mezclar marcado con JavaScript pueden ser discutibles, tiene un beneficio indiscutible: el análisis estático. Si comete un error en su marcado JSX, el compilador emitirá un error en lugar de continuar en silencio. Esto ayuda al detectar errores tipográficos y otros errores tontos al instante. El uso de JSX se popularizó en diferentes proyectos, como MDX , que permite usar JSX en archivos de rebajas.

Componentes

En React puedes definir componentes usando funciones y clases.

Los componentes de clase le permiten escribir su código usando clases ES y estructurar la lógica del componente en métodos. También le permiten usar los métodos de ciclo de vida tradicionales de React para ejecutar una lógica personalizada cuando se monta, actualiza, desmonta un componente, etc. Aunque esta notación es más fácil de entender para las personas familiarizadas con la programación OOP, debe tener en cuenta todos los matices sutiles que tiene JS, por ejemplo, cómo this funciona y sin olvidar vincular los controladores de eventos.

Los componentes funcionales se definen como funciones simples. Suelen ser puros y proporcionan un mapeo claro entre los accesorios de entrada y la salida renderizada. El código funcional suele estar menos acoplado y es más fácil de reutilizar y probar. Antes de la introducción de los ganchos, los componentes funcionales no podían tener estado y no tenían una alternativa a los métodos del ciclo de vida.

Hay una tendencia entre los desarrolladores de React a deshacerse de los componentes de clase en favor de componentes funcionales más simples, pero dado que los ganchos son una característica más nueva, generalmente verá una combinación de ambos enfoques en proyectos de React más grandes.

Hooks

Hooks son una nueva característica de React introducida en la versión 16.8. Son funciones que le permiten clasificar el estado de los componentes y las características del método del ciclo de vida en componentes funcionales. Hay dos ganchos proporcionados por React: useState para administrar el estado y useEffect para crear efectos secundarios, como cargar datos o editar manualmente el DOM.

Se han introducido ganchos para hacer que los componentes funcionales sean más simples y componibles. Ahora puede dividir funciones grandes en partes atómicas más pequeñas, lo que le permite dividir piezas de funcionalidad relacionadas, separándolas de la lógica de representación y reutilizándola en diferentes componentes. Los ganchos son una alternativa más limpia al uso de componentes de clase y otros patrones, como funciones de representación y componentes de orden superior, que pueden volverse demasiado complicados rápidamente.

React proporciona formas de estructurar su aplicación sin involucrar muchas capas de abstracción complicadas. El uso de componentes funcionales junto con ganchos le permite escribir código que es más simple, más atómico y reutilizable. Aunque la noción de combinar el código y las plantillas puede parecer controvertida, separar la presentación y la lógica de la aplicación en diferentes funciones le permite lograr resultados similares.

TypeScript

TypeScript es un nuevo lenguaje creado sobre JavaScript y desarrollado por Microsoft. Es un superconjunto de JavaScript ES2015 e incluye funciones de versiones más nuevas del lenguaje. Puede usarlo en lugar de Babel para escribir JavaScript de última generación. También cuenta con un sistema de escritura extremadamente poderoso que puede analizar estáticamente su código usando una combinación de anotaciones e inferencia de tipos.

También hay un beneficio más sutil. TypeScript ha sido fuertemente influenciado por Java y .NET, por lo que si sus desarrolladores tienen experiencia en uno de estos lenguajes, es probable que encuentren TypeScript más fácil de aprender que JavaScript simple (observe cómo cambiamos de la herramienta a su entorno personal) . Aunque Angular fue el primer marco importante en adoptar activamente TypeScript, ahora también está ganando terreno en muchos otros proyectos, como Deno (un tiempo de ejecución nativo de TypeScript), Puppeteer y TypeORM.

También es posible (y conveniente) usar TypeScript junto con React.

RxJS

RxJS es una biblioteca de programación reactiva que permite un manejo más flexible de operaciones y eventos asincrónicos. Es una combinación de los patrones Observer e Iterator combinados con programación funcional. RxJS le permite tratar cualquier cosa como un flujo continuo de valores y realizar varias operaciones en él, como mapear, filtrar, dividir o fusionar.

La biblioteca ha sido adoptada por Angular en su módulo HTTP también para algún uso interno. Cuando realiza una solicitud HTTP, devuelve un Observable en lugar de la Promesa habitual. Este enfoque abre la puerta a posibilidades interesantes, como la capacidad de cancelar una solicitud, volver a intentarlo varias veces o trabajar con flujos de datos continuos como WebSockets. Pero esto es solo la superficie. Para dominar RxJS, deberá conocer los diferentes tipos de Observables, Sujetos, así como alrededor de cien métodos y operadores.

Elementos angulares

Similar a React, los componentes angulares tienen un concepto de estado de componente. Los componentes pueden almacenar datos en sus propiedades de clase y vincular los valores a sus plantillas. Si desea compartir el estado en toda la aplicación, puede moverlo a un servicio con estado que luego se puede inyectar en los componentes. Dado que la programación reactiva y RxJS son ciudadanos de primera clase en Angular, es común hacer uso de observables para volver a calcular partes del estado en función de alguna entrada. Sin embargo, esto puede ser complicado en aplicaciones más grandes, ya que cambiar algunas variables puede desencadenar una cascada multidireccional de actualizaciones que es difícil de seguir. Existen bibliotecas para Angular que le permiten simplificar la administración del estado a escala. Los veremos más de cerca más adelante.

Administración del Estado

Los elementos angulares proporcionan una forma de empaquetar componentes angulares como elementos personalizados. También conocidos como componentes web, los elementos personalizados son una forma estandarizada independiente del marco para crear elementos HTML personalizados que están controlados por su código JavaScript. Una vez que defina dicho elemento y lo agregue al registro del navegador, se representará automáticamente en todos los lugares a los que se hace referencia en el HTML. Los elementos angulares proporcionan una API que crea el contenedor necesario para implementar la API del componente personalizado y hacer que funcione con el mecanismo de detección de cambios de Angular. Este mecanismo se puede usar para incrustar otros componentes o aplicaciones angulares completas en su aplicación host, potencialmente escritas en un marco diferente con un ciclo de desarrollo diferente.

Descubrimos que TypeScript es una excelente herramienta para mejorar la capacidad de mantenimiento de nuestros proyectos, especialmente aquellos con una gran base de código o una lógica comercial o de dominio compleja. El código escrito en TypeScript es más descriptivo y más fácil de seguir y refactorizar. Incluso si no opta por Angular, le sugerimos que lo considere para su próximo proyecto de JavaScript. RxJS presenta nuevas formas de administrar el flujo de datos en su proyecto, pero requiere que tenga una buena comprensión del tema. De lo contrario, puede traer una complejidad no deseada a su proyecto. Los elementos angulares tienen el potencial de reutilizar componentes angulares, y es interesante ver cómo se desarrolla esto en el futuro.

Ecosistema

Lo mejor de los marcos de código abierto es la cantidad de herramientas creadas a su alrededor. A veces, estas herramientas son incluso más útiles que el propio marco. Echemos un vistazo a algunas de las herramientas y bibliotecas más populares asociadas con cada marco.

Angular

CLI angular

Una tendencia popular con los marcos modernos es tener una herramienta CLI que lo ayude a iniciar su proyecto sin tener que configurar la compilación usted mismo. Angular tiene Angular CLI para eso. Le permite generar y ejecutar un proyecto con solo un par de comandos. Todos los scripts responsables de crear la aplicación, iniciar un servidor de desarrollo y ejecutar pruebas están ocultos para usted en node_modules. También puede usarlo para generar código nuevo durante el desarrollo e instalar dependencias.

Angular presenta una nueva e interesante forma de administrar las dependencias de su proyecto. Al usar ng add, puede instalar una dependencia y se configurará automáticamente para su uso. Por ejemplo, cuando ejecuta ng add @angular/material, Angular CLI descarga Angular Material del registro npm y ejecuta su script de instalación que configura automáticamente su aplicación para usar Angular Material. Esto se hace usando esquemas angulares. Schematics es una herramienta de flujo de trabajo que permite que las bibliotecas realicen cambios en su base de código. Esto significa que los autores de la biblioteca pueden proporcionar formas automáticas de resolver problemas de compatibilidad con versiones anteriores que podría enfrentar al instalar una nueva versión.

Bibliotecas de gestión estatal

Si las capacidades de administración del estado nativo no son suficientes para usted, hay varias bibliotecas populares de terceros disponibles en esta área.

El más popular es NgRx. Está inspirado en Redux de React, pero también utiliza RxJS para observar y recalcular datos en el estado. El uso de NgRx puede ayudarlo a aplicar un flujo de datos unidireccional comprensible, así como a reducir el acoplamiento en su código.

NGXS es ​​otra biblioteca de administración de estado inspirada en Redux. A diferencia de NgRx, NGXS se esfuerza por reducir el código repetitivo mediante el uso de características modernas de TypeScript y la mejora de la curva de aprendizaje y la experiencia de desarrollo en general.

Akita es un niño más nuevo en el bloque, lo que nos permite mantener el estado en varias tiendas, aplicar actualizaciones inmutables y usar RxJS para consultar y transmitir los valores.

Marco iónico

Ionic es un marco popular para desarrollar aplicaciones móviles híbridas. Proporciona un contenedor Cordova que está muy bien integrado con Angular y una bonita biblioteca de componentes de material. Utilizándolo, puede configurar y crear fácilmente una aplicación móvil. Si prefiere una aplicación híbrida a una nativa, esta es una buena opción.

Angular universal

Angular universal es un proyecto que agrupa diferentes herramientas para habilitar la representación del lado del servidor para aplicaciones Angular. Está integrado con Angular CLI y es compatible con varios marcos Node.js, como Express y Hapi, así como con .NET core.

Augurio

Augury es una extensión de navegador para Chrome y Firefox que ayuda a depurar aplicaciones angulares que se ejecutan en modo de desarrollo. Puede usarlo para explorar su árbol de componentes, monitorear la detección de cambios y optimizar los problemas de rendimiento.

Compodoc

Compodoc es un generador de documentación estática para Angular. Al igual que otros generadores de documentación, puede crear documentación HTML estática basada en los comentarios de TSDoc en su código. Compodoc, sin embargo, viene con características convenientes específicamente para Angular, como explorar la estructura de su módulo, rutas y clasificar clases en componentes, servicios, etc.

Ngx-administrador

Ngx-admin es un marco popular para crear tableros personalizados con Angular y usar Nebular o Angular Material como bibliotecas de componentes.

Hay muchas otras bibliotecas y herramientas disponibles en la lista de Awesome Angular.

Reaccionar

Crear aplicación de reacción

Create React App es una utilidad CLI para React para configurar rápidamente nuevos proyectos. Similar a Angular CLI, le permite generar un nuevo proyecto, ejecutar la aplicación en modo de desarrollo o crear un paquete de producción. Utiliza Jest para pruebas unitarias, admite la creación de perfiles de aplicaciones utilizando variables de entorno, proxies de back-end para desarrollo local, TypeScript, Sass, PostCSS y muchas otras características.

Bibliotecas de gestión estatal

La introducción de ganchos sin duda ha sacudido la gestión estatal en React. Hay debates en curso si incluso existe la necesidad de una biblioteca de administración estatal de terceros. Aunque los ganchos abordan la necesidad inmediata de trabajar con el estado, otras bibliotecas aún pueden impulsar esto más allá al permitirnos usar patrones de implementación probados, muchas bibliotecas adicionales y herramientas de desarrollo.

Redux es una biblioteca de gestión de estados inspirada en Flux, pero con algunas simplificaciones. La idea clave de Redux es que todo el estado de la aplicación está representado por un solo objeto, que es mutado por funciones llamadas reductores. Los reductores en sí mismos son funciones puras y se implementan por separado de los componentes. Esto permite una mejor separación de las preocupaciones y la capacidad de prueba.

MobX es una biblioteca alternativa para administrar el estado de una aplicación. En lugar de mantener el estado en una sola tienda inmutable, como lo hace Redux, lo alienta a almacenar solo el estado mínimo requerido y deriva el resto de él. Proporciona un conjunto de decoradores para definir observables y observadores e introducir lógica reactiva a su estado.

Tipos de propiedad

PropTypes es una función opcional de React que le permite introducir la validación de accesorios en tiempo de ejecución de componentes. En contraste con el uso de la verificación de tipos estáticos con TypeScript, PropTypes realizará verificaciones de tipos cuando su aplicación se esté ejecutando. Esto es especialmente útil cuando se desarrollan bibliotecas cuando no puede estar seguro de que sus clientes estén usando TypeScript, incluso si usted lo está. Desde React 15.5, los tipos de accesorios se han movido a una biblioteca de tipos de accesorios separada y ahora son completamente opcionales. Teniendo en cuenta sus beneficios, le recomendamos que lo utilice para mejorar la confiabilidad de su aplicación.

React Native

React Native es una plataforma desarrollada por Facebook para crear aplicaciones móviles nativas utilizando React. A diferencia de Ionic, que produce una aplicación híbrida, React Native produce una interfaz de usuario verdaderamente nativa. Proporciona un conjunto de componentes React estándar que están vinculados a sus contrapartes nativas. También le permite crear sus componentes y vincularlos a código nativo escrito en Objective-C, Java o Swift.

Siguiente.js

Next.js es un marco para la representación del lado del servidor de las aplicaciones React. Proporciona una forma flexible de representar total o parcialmente su aplicación en el servidor, devolver el resultado al cliente y continuar en el navegador. Intenta facilitar la compleja tarea de crear aplicaciones universales, por lo que la configuración está diseñada para ser lo más simple posible, con una cantidad mínima de nuevas primitivas y requisitos para la estructura de su proyecto.

Reaccionar administrador

React-admin es un marco para crear aplicaciones SPA de estilo CRUD sobre las API REST o GraphQL existentes. Viene con características útiles, como una interfaz de usuario creada con Material Design, internacionalización, tematización, validación de datos y más.

Entornos de desarrollo de interfaz de usuario

Una tendencia importante en el desarrollo front-end durante los últimos años ha sido el auge de las herramientas de desarrollo que le permiten desarrollar, probar y documentar su componente de forma interactiva y por separado de la aplicación. Storybook se ha establecido como uno de los líderes en esta área, con soporte para React y Angular. Sin embargo, existen otras alternativas para React.

React Styleguidist , de manera similar a Storybook, le permite crear documentación interactiva de sus componentes. A diferencia de Storybook, la interfaz de usuario generada se parece más a un archivo Léame interactivo que a un conjunto separado de historias. Mientras que Storybook brilla como un entorno de desarrollo, Styleguidist es más una herramienta de documentación.

También hemos mencionado MDX en este artículo. Le permite darle vida a sus archivos Markdown agregando componentes JSX interactivos.

Ayudantes de prueba

La prueba de los componentes de la interfaz de usuario generalmente implica tener que representarlos en un entorno de espacio aislado, simular la interacción del usuario y validar los resultados de salida. Estas tareas rutinarias se pueden simplificar utilizando los ayudantes de prueba apropiados. Para Angular, este es el TestBed incorporado . Para React, hay dos candidatos populares: Enzyme y Testing Library.

Enzyme es la opción estándar de facto. Le permite renderizar sus componentes en un DOM completo o superficial, así como interactuar con el componente renderizado. Principalmente sigue un enfoque de prueba de caja blanca, donde sus pruebas pueden hacer referencia a algunas de las partes internas del componente, como sus componentes secundarios, accesorios o estado.

Testing Library sigue un enfoque diferente y lo empuja a interactuar con sus componentes como lo haría un usuario, sin conocer la implementación técnica. Las pruebas creadas de esta manera suelen ser menos frágiles y más fáciles de mantener. Aunque es más popular con React, Testing Library también está disponible para Angular.

gatsby

Gatsby es un generador de sitios web estáticos que utiliza React.js. Le permite usar GraphQL para consultar los datos de sus sitios web definidos en Markdown, YAML, JSON, API externas y sistemas de administración de contenido populares.

reaccionar 360

React 360 es una biblioteca para crear aplicaciones de realidad virtual para navegadores. Proporciona una API React declarativa que se basa en las API del navegador WebGL y WebVR, lo que facilita la creación de experiencias 360 VR.

Herramientas de desarrollo de reacción

React Dev Tools es una extensión del navegador para Chrome para depurar aplicaciones React que le permite recorrer el árbol de componentes React y ver sus propiedades y estado.

Hay muchas otras bibliotecas y herramientas disponibles en la lista de Awesome React.

Adopción, curva de aprendizaje y experiencia de desarrollo

Un criterio importante para elegir una nueva tecnología es la facilidad de aprendizaje. Por supuesto, la respuesta depende de una amplia gama de factores, como su experiencia previa y una familiaridad general con los conceptos y patrones relacionados. Sin embargo, aún podemos intentar evaluar la cantidad de cosas nuevas que necesitará aprender para comenzar con un marco determinado. Ahora, si asumimos que ya conoce ES6+, herramientas de compilación y todo eso, veamos qué más necesita comprender.

React

Con React, lo primero que encontrarás es JSX. Parece incómodo escribir para algunos desarrolladores. Sin embargo, no agrega tanta complejidad: solo expresiones, que son JavaScript y una sintaxis especial similar a HTML. También deberá aprender a escribir componentes, usar accesorios para la configuración y administrar el estado interno. No necesita aprender una nueva sintaxis de plantilla, ya que todo esto es JavaScript simple. Si bien React admite componentes basados ​​en clases, con la introducción de ganchos, el desarrollo funcional se está volviendo más popular. Esto requerirá que comprenda algunos patrones básicos de desarrollo funcional.

El tutorial oficial es un excelente lugar para comenzar a aprender React. Una vez que haya terminado con eso, familiarícese con el enrutador. El React Router puede ser un poco complejo y poco convencional, pero no hay de qué preocuparse. Según el tamaño, la complejidad y los requisitos de su proyecto, deberá encontrar y aprender algunas bibliotecas adicionales, y esta podría ser la parte difícil. Pero después de eso, todo debería ir viento en popa.

Nos sorprendió genuinamente lo fácil que fue comenzar a usar React. Incluso las personas con experiencia en desarrollo back-end y experiencia limitada en desarrollo front-end pudieron ponerse al día rápidamente. Los mensajes de error que puede encontrar en el camino suelen ser claros y proporcionan explicaciones sobre cómo resolver el problema subyacente.

La desventaja es que deberá invertir tiempo en elegir las bibliotecas para respaldar sus actividades de desarrollo. Dada la cantidad de ellos que hay, esto puede representar un desafío. Pero esto se puede hacer junto con sus actividades de desarrollo una vez que se haya familiarizado con el marco en sí.

Aunque no se requiere TypeScript para React, le recomendamos encarecidamente que lo evalúe y lo adopte en sus proyectos.

Angular

Learning Angular te presentará más conceptos nuevos que React. En primer lugar, deberá familiarizarse con TypeScript. Para los desarrolladores con experiencia en lenguajes de tipos estáticos como Java o .NET, esto puede ser más fácil de entender que JavaScript, pero para los desarrolladores de JavaScript puro, esto puede requerir un poco de esfuerzo. Para comenzar tu viaje, podemos recomendarte el tutorial Tour of Heroes.

El marco en sí es rico en temas para aprender, desde los básicos como módulos, inyección de dependencia, decoradores, componentes, servicios, canalizaciones, plantillas y directivas, hasta temas más avanzados como detección de cambios, zonas, compilación AoT y Rx. .js. Todo esto está cubierto en la documentación. Rx.js es un tema pesado por sí solo y se describe con mucho detalle en el sitio web oficial. Si bien es relativamente fácil de usar en un nivel básico, se vuelve más complicado cuando se pasa a temas avanzados.

En general, notamos que la barrera de entrada para Angular es más alta que para React. La gran cantidad de nuevos conceptos puede ser abrumadora para los recién llegados. E incluso después de haber comenzado, la experiencia puede ser un poco difícil, ya que debe tener en cuenta cosas como la administración de suscripciones de Rx.js, el rendimiento de detección de cambios y bananas en una caja (sí, este es un consejo real de la documentación). A menudo nos encontramos con mensajes de error que son demasiado crípticos para entenderlos, por lo que tuvimos que buscarlos en Google y orar por una coincidencia exacta.

Puede parecer que estamos a favor de React aquí, y definitivamente lo estamos. Hemos tenido experiencia en la incorporación de nuevos desarrolladores a proyectos de Angular y React de tamaño y complejidad comparables, y de alguna manera con React siempre fue más fluido. Pero, como dije antes, esto depende de una amplia gama de factores y podría funcionar de manera diferente para usted.

Angular

Ambos marcos son muy populares y tienen comunidades de seguidores y defensores. También hay numerosos artículos que sugieren usar una u otra tecnología, en su mayoría resaltando sus aspectos positivos. Veamos si podemos encontrar una forma más objetiva de representar la popularidad de cada proyecto y la satisfacción del desarrollador.

Las estadísticas de descarga de npm muestran casi cinco veces más descargas para React que para Angular. Las tendencias de Google también informan más búsquedas de React en todo el mundo.

El informe Estado de JavaScript de 2019 enumera a React como el marco de trabajo front-end más popular, siendo Angular el penúltimo, precediendo solo a Ember. El 71% de los participantes dijeron que habían usado React y que lo volverían a usar. Solo el 21 % de los participantes dijo lo mismo sobre Angular, y el 35 % dijo que había usado Angular y que no lo volvería a usar (solo el 8 % dijo lo mismo sobre React).

Las tendencias de contratación de Hacker News para 2019 enumeran a React como la tecnología más buscada entre los empleados durante más de 31 meses seguidos.

Stack Overflow enumera a React como el segundo marco más popular después de jQuery. Angular aparece como el tercero. Su informe de Frameworks web más amados, temidos y buscados pinta una imagen similar a los demás.

El informe State of Developer Ecosystem 2020 de Jet Brains confirma la posición de React como el marco front-end más popular.

¿Un marco para gobernarlos a todos?

Una vez que haya elegido un marco para un proyecto, tendrá la tentación de usar exactamente la misma pila tecnológica para sus próximos proyectos. No. Aunque es una buena idea mantener la coherencia de su pila de tecnología, no use ciegamente el mismo enfoque cada vez. Antes de comenzar cada proyecto, tómese un momento para responder las mismas preguntas una vez más. Tal vez para el próximo proyecto, las respuestas sean diferentes o el panorama cambie. Además, si tiene el lujo de hacer un proyecto pequeño con una pila de tecnología desconocida, hágalo. Tales experimentos le proporcionarán una experiencia invaluable. Mantén tu mente abierta y aprende de tus errores. En algún momento, cierta tecnología se sentirá natural y correcta.