React vs Angular: la comparación definitiva

¿Dificil decisión verdad? por eso te traigo esta completa comparación: React vs Angular. Cada framework tiene mucho que ofrecer y no es fácil elegir entre ellos. Tanto si eres un recién llegado tratando de averiguar por dónde empezar, como un diseñador web freelance eligiendo un framework para tu próximo proyecto, o un director de nivel empresarial planificando una visión estratégica para tu empresa, es probable que te beneficies de tener una visión educada sobre este tema.

Para ahorrarte tiempo, déjame decirte algo de antemano: este artículo no dará una respuesta clara sobre qué framework es mejor. Pero tampoco lo harán cientos de otros artículos con títulos similares. No puedo decírtelo, porque la respuesta depende de una amplia gama de factores que hacen que una tecnología en particular sea más o menos adecuada para tu entorno y tu caso de uso.

Como no podemos responder directamente a la pregunta, intentaremos algo más. Una Angular y React, para demostrar cómo se puede abordar el problema de comparar dos frameworks de una manera estructurada por sí mismo y adaptarlo a tu entorno. Ya sabes, el viejo enfoque de «enseñar a un hombre a pescar». De esta manera, cuando ambos sean reemplazados por un BetterFramework.js dentro de un año, podrás recrear el mismo tren de pensamiento una vez más.

Esta guía acaba de ser actualizada para reflejar el estado de React, Angular, y sus respectivas ventajas y desventajas en el 2020.

¿Por dónde empezar con React vs Angular?

Antes de elegir cualquier herramienta, tienes que responder a dos simples preguntas: «¿Es una buena herramienta en sí misma?» y «¿Funcionará bien para mi caso de uso?» Ninguna de ellas significa nada por sí sola, así que siempre hay que tenerlas en cuenta. De acuerdo, las preguntas pueden no ser tan simples, así que intentaremos dividirlas en otras más pequeñas.

Preguntas sobre la propia herramienta:

  • ¿Qué tan madura es y quién está detrás de ella?
  • ¿Qué tipo de características tiene?
  • ¿Qué arquitectura, patrones y paradigmas de desarrollo emplea?
  • ¿Cuál es el ecosistema que lo rodea?

Preguntas para la reflexión:

  • ¿Podremos yo y mis colegas aprender esta herramienta con facilidad?
  • ¿Encaja bien con mi proyecto?
  • ¿Cómo es la experiencia del desarrollador?

Usando esta serie de preguntas, puedes empezar tu evaluacion de cualquier herramienta, y basaremos nuestra comparacion de React y Angular en ellas tambien.

¿Es justo hacer una comparación de React vs Angular?

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 características, mientras que React es sólo una biblioteca de componentes UI. Para igualar las probabilidades, hablaremos de React en conjunto con algunas de las bibliotecas que se usan a menudo con él.

Madurez

Una parte importante de ser un desarrollador hábil es ser capaz de mantener el equilibrio entre los enfoques establecidos y probados a lo largo del tiempo y la evaluación de la nueva tecnología punta. Como regla general, debes tener cuidado al adoptar herramientas que aún no han madurado debido a ciertos riesgos:

  • La herramienta puede ser un fracaso e inestable.
  • Puede ser abandonada inesperadamente por el distribuidor.
  • Puede que no haya una gran base de conocimientos o comunidad disponible en caso de que necesites ayuda.
  • Tanto React como Angular provienen de buenas familias, así que parece que podemos confiar en este sentido.

React

React es desarrollado y administrado por Facebook y utilizado en sus productos, incluyendo Instagram y WhatsApp. Existe desde el año 2013, así que no es exactamente nuevo. También es uno de los proyectos más populares de GitHub, con más de 150.000 estrellas en el momento de escribir este artículo. Algunas de las otras empresas que usan React son Airbnb, Uber, Netflix, Dropbox y Atlassian.

Angular

Angular existe desde 2016, lo que lo hace un poco más joven que React, pero tampoco es un novato en el tema. Es administrado por Google y, como mencionó Igor Minar, incluso en 2018 fue usado en más de 600 aplicaciones en Google como la Base de Datos de Fire, Google Analytics, Google Express, la plataforma de nube de Google y más. Fuera de Google, Angular es usado por Forbes, Upwork, VMWare y otros.

Características de ambos: React vs Angular

Como mencioné antes, Angular tiene más características que Reaccionar. Esto puede ser algo bueno y malo, dependiendo de cómo se mire. Ambos frameworks comparten algunas características claves en común: componentes, unión de datos, y plataforma de representación agnóstica.

Angular

Angular proporciona muchas de las características requeridas para una aplicación web moderna nada más sacarla de la caja. Algunas de las características estándar son:

  • Inyección para dependencia
  • Plantillas, basadas en una versión extendida de HTML
  • Componentes de clase con ganchos de ciclo de vida
  • Enrutamiento, proporcionado por @angular/router
  • Solicitudes de Ajax usando @angular/common/http
  • @angular/forms para construir formularios
  • Encapsulación del componente CSS
  • Protección XSS
  • División del código y carga perezosa
  • Corredor de prueba, marco y utilidades para la prueba de la unidad.

Algunas de estas características están incorporadas en el núcleo del framework y no tienes la opción de no usarlas. Esto requiere que los desarrolladores estén familiarizados con características como la inyección de dependencia para construir incluso una pequeña aplicación Angular. Otras características como el cliente HTTP o los formularios son completamente opcionales y pueden ser añadidas según sea necesario.

React

Con React, estás empezando con un enfoque más minimalista. Si estamos viendo sólo a React, esto es lo que tenemos:

  • En lugar de las plantillas clásicas, tiene JSX, un lenguaje similar a XML construido sobre JavaScript
  • Componentes de clase con ganchos de ciclo de vida o componentes funcionales más simples
  • Gestión del estado usando setState y ganchos.
  • Protección XSS
  • División del código y carga perezosa
  • Error en el manejo de los límites
  • Utilidades para los componentes de pruebas unitarias

Fuera de la caja, React no proporciona nada para la inyección de dependencia, el enrutamiento, las llamadas HTTP o el manejo avanzado de formularios. Se espera que elijas cualquier librería adicional para añadirla en base a tus necesidades, lo cual puede ser tanto bueno como malo dependiendo de la experiencia que tengas con estas tecnologías. Algunas de las bibliotecas populares que se utilizan a menudo junto con React son:

  • React-router para el enrutamiento
  • Fetch (o axios) para peticiones HTTP
  • Una amplia variedad de técnicas para la encapsulación de CSS
  • Biblioteca de Pruebas para utilidades adicionales.

Los equipos con los que he trabajado han encontrado liberadora la libertad de elegir sus bibliotecas. Esto nos da la capacidad de adaptar nuestra pila a los requisitos particulares de cada proyecto, y no hemos encontrado el costo de aprender nuevas bibliotecas tan alto.

Lenguajes, paradigmas y patrones

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

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 frameworks, React no tiene un lenguaje de plantillas separado. En lugar de seguir el enfoque clásico de separar el marcado y la lógica, React decidió combinarlos dentro de los componentes utilizando JSX, un lenguaje similar al XML que permite escribir el marcado directamente en el código JavaScript.

Aunque los méritos de mezclar el marcado con JavaScript pueden ser discutibles, tiene un beneficio indiscutible: el análisis estático. Si cometes un error en tu marcado JSX, el compilador emitirá un error en lugar de continuar en silencio. Esto ayuda al detectar instantáneamente errores de escritura y otros errores tontos. El uso de JSX atrapado en diferentes proyectos – como MDX, que permite usar JSX en archivos de marcas de revisión.

Componentes

En React puede definir los componentes utilizando funciones y clases.

Los componentes de clase permiten escribir el código usando clases ES y estructurar la lógica del componente en métodos. También te permiten utilizar los métodos tradicionales del ciclo de vida de React para ejecutar la lógica personalizada cuando un componente se monta, actualiza, desmonta, etc. A pesar de que esta escritura es más fácil de entender para las personas familiarizadas con la programación OOP, es necesario ser consciente de todos los sutiles matices que tiene JS – por ejemplo, cómo funciona, y no olvidar de vincular los controladores de eventos.

Los componentes de funciones se definen como funciones simples. A menudo son puros y proporcionan un claro mapeo entre los apoyos 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 de ciclo de vida.

Hay una tendencia entre los desarrolladores de React a abandonar los componentes de clase en favor de componentes funcionales más simples, pero como los ganchos son una característica más reciente, normalmente se verá una mezcla de ambos enfoques en los proyectos más grandes de React.

Ganchos

Los ganchos son una nueva característica de React que se introdujo en la versión 16.8. Son funciones que permiten clasificar el estado de los componentes y las características del método de ciclo de vida en componentes funcionales. Hay dos ganchos proporcionados por React: useState para gestionar el estado, y useEffect para crear efectos secundarios – como la carga de datos o la edición manual del DOM.

Los ganchos han sido introducidos para hacer los componentes funcionales más simples y más compatibles. Ahora se pueden dividir las grandes funciones en partes atómicas más pequeñas, lo que permite dividir las piezas funcionales relacionadas, separándolas de la lógica de representación y reutilizándolas en diferentes componentes. Los ganchos son una alternativa más limpia a la utilización de componentes de clase y otros patrones, como las funciones de renderizado y los componentes de orden superior, que pueden complicarse demasiado rápidamente.

React ofrece formas de estructurar su aplicación sin implicar muchas capas de complicadas abstracciones. La utilización de componentes funcionales junto con los ganchos te permite escribir código que es más simple, más atómico y reutilizable. Aunque la idea de combinar el código y las plantillas pueda parecer controvertida, la separación de la lógica de presentación y de aplicación en diferentes funciones permite obtener resultados similares.

Angular

Angular también tiene algunas cosas interesantes bajo la manga, empezando por las abstracciones básicas como componentes, servicios y módulos, hasta TypeScript, RxJS y Angular Elements, así como su enfoque de la gestión del estado.

Conceptos principales

Angular tiene un nivel de abstracción más alto que React, introduciendo así más conceptos fundamentales con los que familiarizarse. Los principales son:

  • Componentes: definidos como clases ES especialmente decoradas que se encargan de ejecutar la lógica de la aplicación y de renderizar la plantilla
  • Servicios: clases responsables de la implementación de la lógica de negocio y de aplicación, utilizadas por los componentes
  • Módulos: esencialmente Contenedores de DI para el cableado de componentes relacionados, servicios, canalizaciones y otras entidades juntas.

Angular hace un uso intensivo de clases y conceptos como DI, que son menos populares en el mundo del desarrollo front-end, pero que deberían ser familiares para cualquiera con experiencia en el desarrollo back-end.

TypeScript

TypeScript es un nuevo lenguaje construido sobre JavaScript y desarrollado por Microsoft. Es un superconjunto de JavaScript ES2015 e incluye características de las nuevas versiones del lenguaje. Puedes 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 tu 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 tus desarrolladores tienen una formación en uno de estos lenguajes, es probable que encuentren que TypeScript es más fácil de aprender que el simple JavaScript (observa cómo cambiamos de la herramienta a tu entorno personal). Aunque Angular fue el primer gran framework en adoptar activamente el TypeScript, ahora está obteniendo impulso en muchos otros proyectos también, como Deno (un tiempo de ejecución nativo de TypeScript), Puppeteer, y TypeORM.

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

RxJS

RxJS es una biblioteca de programación interactiva que permite un manejo más flexible de las operaciones y eventos asíncronos. Es una combinación de los patrones observador e interrogador mezclados con programación funcional. RxJS 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 realizas una petición HTTP, devuelve un observable en lugar de la promesa habitual. Este enfoque abre la puerta a interesantes posibilidades, como la capacidad de cancelar una petición, reintentarla varias veces, o trabajar con flujos de datos continuos como WebSockets. Pero esto es sólo la superficie. Para dominar el RxJS, necesitarás conocer los diferentes tipos de Observables, Sujetos, así como un centenar de métodos y operadores.

Gestión del Estado

De manera similar a React, Angular Elements 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 se quiere compartir el estado a través de la aplicación, se puede pasar a un servicio de estado que más tarde se puede inyectar en los componentes. Dado que la programación reactiva y el RxJS es un ciudadano de primera clase en Angular, es común hacer uso de observables para recalcular partes del estado basado en alguna entrada. Esto, sin embargo, puede ser complicado en aplicaciones más grandes ya que el cambio de algunas variables puede desencadenar una cascada multidireccional de actualizaciones que es difícil de seguir. Hay bibliotecas para Angular que permiten simplificar el manejo de los estados a escala. Las veremos con más detalle más adelante.

Angular Elements

Angular Elements proporcionan una forma de empaquetar los componentes angulares como elementos personalizados. También conocidos como componentes web, los elementos personalizados son una forma estandarizada de crear elementos HTML personalizados que son controlados por su código JavaScript. Una vez que definas tal elemento y lo agregues al registro del navegador, se mostrará automáticamente en todos los lugares a los que se haga referencia en el HTML. Angular Elements proporcionan una API que crea la envoltura necesaria para implementar la API de componentes personalizados y hacerla funcionar con el mecanismo de detección de cambios de Angular. Este mecanismo puede utilizarse para incrustar otros componentes o aplicaciones enteras de Angular en su aplicación host, potencialmente escrita en un marco de trabajo diferente con un ciclo de desarrollo distinto.

Hemos encontrado que TypeScript es una gran herramienta para mejorar la mantenibilidad de nuestros proyectos, especialmente aquellos con una gran base de código o un dominio complejo/lógica de negocios. El código escrito en TypeScript es más descriptivo, y más fácil de seguir y refactorizar. Incluso si no va con Angular, te sugerimos que lo consideres para tu próximo proyecto de JavaScript. RxJS introduce nuevas formas de manejar el flujo de datos en su proyecto, pero requiere que tengas una buena comprensión del tema. De lo contrario, puede traer una complejidad no deseada a tu proyecto. Angular Elements tienen el potencial de reutilizar los componentes angulares, y es interesante ver cómo se desarrolla esto en el futuro.

Ecosistema

Lo bueno de los frameworks de código abierto es el número de herramientas creadas a su alrededor. A veces, estas herramientas son incluso más útiles que el propio framework. Echemos un vistazo a algunas de las herramientas y bibliotecas más populares asociadas a cada framework.

Angular

Angular CLI

Una tendencia popular con los frameworks modernos es tener una herramienta CLI que te ayuda a arrancar tu proyecto sin tener que configurar la estructura por ti mismo. Angular tiene Angular CLI para eso. Te permite generar y ejecutar un proyecto con sólo un par de comandos. Todos los scripts responsables de construir la aplicación, iniciar un servidor de desarrollo y ejecutar pruebas están ocultos en node_modules. También puedes usarlo para generar nuevo código durante el desarrollo e instalar dependencias.

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

Ionic framework

Ionic es un framework muy popular para el desarrollo de aplicaciones móviles híbridas. Proporciona un contenedor de Córdova que está bien integrado con Angular y una bonita biblioteca de componentes materials. Usándolo, se puede configurar y construir fácilmente una aplicación móvil. Si prefieres una aplicación híbrida a una nativa, esta es una buena elección.

Angular universal

Angular universal es un proyecto que agrupa diferentes herramientas para permitir la representación del lado del servidor para las aplicaciones Angular. Está integrado con Angular CLI y soporta varios frameworks Node.js, como Express y Hapi, así como con el núcleo .NET.

Augury

Augury es una extensión del navegador para Chrome y Firefox que ayuda a depurar las aplicaciones Angular que se ejecutan en modo de desarrollo. Puedes usarlo para explorar tu árbol de componentes, monitorizar la detección de cambios y optimizar los problemas de rendimiento.

React

Create React App

Create React App es una utilidad CLI para que React pueda crear rápidamente nuevos proyectos. Similar a la Angular CLI, 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, soporta el perfilado de la aplicación utilizando variables de entorno, proxies de back-end para el desarrollo local, TypeScript, Sass, PostCSS, y muchas otras características.

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 estándar de React que están unidos a sus contrapartes nativas. También permite crear sus componentes y vincularlos a código nativo escrito en Objective-C, Java o Swift.

Next.js

Next.js es un framework para el renderizado del lado del servidor de las aplicaciones de React. Proporciona una forma flexible de renderizar total o parcialmente tu aplicación en el servidor, devolver el resultado al cliente y continuar en el navegador. Trata de hacer más fácil 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 características y requisitos para la estructura de tu proyecto.

React-admin

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

Tomando una decisión: React vs Angular

Ya habrán notado que cada framework tiene su propio conjunto de capacidades, tanto con sus lados buenos como malos. Pero este análisis se ha hecho fuera de cualquier contexto particular y, por lo tanto, no proporciona una respuesta sobre qué framework debes elegir. Para decidirlo, tendrás que revisarlo desde la perspectiva de tu proyecto. Esto es algo que tendrás que hacer por tu cuenta.

2 comentarios en «React vs Angular: la comparación definitiva»

  1. En mi caso me decido por React, ¿razones técnicas? ninguna, pero viendo el mercado laboral parece que hay más demanda internacional que Angular o Vue por ejemplo.

    Responder
    • Hola Samuel!

      si, estoy totalmente de acuerdo, actualmente hay muchas ofertas de trabajo por React, así que por eso principalmente, me decantaría por el.

      Un saludo y gracias por el comentario 🙂

      Responder

Deja un comentario

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)