Una comparación precisa de los aspectos generales y técnicos entre Angular y React
Hay tantos artículos titulados "Angular vs React", "React vs Angular", "Angular o React" – ¡Es un milagro que hayas abierto este post! Sin embargo, lo que le falta a esos artículos, es una comparación punto por punto con Angular vs React.
Así que esto es lo que haré en este post: colocar React y Angular en yuxtaposición directa. Vamos a revisar y contrastar estos dos frameworks de JavaScript y observar cada posible característica para asegurarnos de que no nos perdemos ni un solo dato.
Al final, no voy a decirte qué tecnología elegir. Pero te daré la suficiente información para reflexionar y que así elijas la tecnología que mejor se adapte a ti y a tu proyecto.
1. Breve descripción
React
React es una librería de JavaScript para el desarrollo UI (Interfaz de usuario). Está gestionado por Facebook y una comunidad de desarrolladores de código abierto.
La librería se presentó en mayo de 2013.
Las últimas actualizaciones se lanzaron el 22 de octubre de 2020.
Angular
Angular es un framework de JavaScript de código abierto para desarrollo web y móvil. Está basado en TypeScript y está gestionada por el equipo de Angular de Google y la comunidad de desarrolladores de Angular.
Lanzada en septiembre de 2016, Angular (también conocida como Angular 2.0) es una elaboración completa de Angular JS (Angular 1.0), que se presentó en 2010.
La última versión de Angular tuvo lugar el 6 de febrero de 2020.
2. Universalidad
React
React es una librería que se utiliza tanto en desarrollo web como móvil. Sin embargo, para el desarrollo móvil, debe incoporarse con Cordova. Por otra parte, para desarrollo móvil, existe una librería adicional – React Native.
React se puede utilizar para crear aplicaciones web de página única (single-page) o de varias páginas (multiple-page).
Angular
Angular es adecuado para el desarrollo web y móvil. En el desarrollo móvil, sin embargo, Ionic realiza una gran parte del trabajo. Además, similarmente a React, Angular tiene un framework de desarrollo móvil adicional. La contraparte de React Native es NativeScript.
Angular también se puede utilizar para aplicaciones web de página única o de varias páginas.
3. Autosuficiencia
React
React es una librería para el desarrollo UI, por lo que las aplicaciones escritas con React para que puedas ser utilizadas necesitan librerías adicionales. Por ejemplo, Redux, React Router o Helmet optimizan los procesos de gestión de estado, enrutamiento e interacción con la API. Funciones como las de enlazado de datos, el enrutamiento basado en componentes, la generación de proyectos, la validación de formularios, o la inyección de dependencias requieren la instalación de módulos o librerías adicionales.
Angular
Angular es un framework completo para el desarrollo de software, el cual generalmente no requiere de librerías adicionales. Todas las funciones mencionadas anteriormente como los enlaces de datos, el enrutamiento basado en componentes, la generación de proyectos, la validación de formularios, y la inyección de dependencias, se pueden implementar con los medios proporcionados por el paquete de Angular.
4. Curva de aprendizaje
React
React es minimalista: sin inyección de dependencias, sin plantillas clásicas, sin funciones demasiado complicadas. La librería será bastante sencilla de entender si ya conoces bien JavaScript.
Sin embargo, se necesita bastante tiempo para aprender a configurar un proyecto porque no existe una estructura de proyecto predefinida. También necesitarás aprender a manejar la librería Redux, que se usa en más de la mitad de las aplicaciones de React para la gestión de estado. Las actualizaciones constantes de la librería también requieren de un esfuerzo adicional por parte del desarrollador. Además, hay muchas buenas prácticas en React, que necesitarás aprender para poder hacer las cosas bien.
Angular
Angular en sí es una librería enorme, y aprender todos los conceptos asociados llevará mucho más tiempo que en el caso de React. Angular es más complejo de entender, hay mucha sintaxis innecesaria y la administración de componentes es compleja. Algunas características más complejas están integradas en el núcleo de la librería, lo que significa que el desarrollador no puede evitar aprenderlas y usarlas. Además, hay muchas formas de resolver un único problema.
Aunque TypeScript se parece mucho a JavaScript, también lleva algún tiempo aprenderlo. Dado que el framework se actualiza constantemente, el desarrollador debe realizar un esfuerzo extra de aprendizaje.
5. Comunidad
React
React es uno de las librerías de JS más populares en todo el mundo, y la comunidad que lo apoya y desarrolla es enorme.
Al trabajar con React, debes ser un aprendiz continuamente ya que la librería se actualiza a menudo. Si bien la comunidad intenta avanzar con la documentación más reciente lo más rápido posible, mantenerse al día con todos los cambios no es tan fácil. A veces, puede faltar cierta documentación, pero el problema a menudo se resuelve con el apoyo de la comunidad en foros temáticos.
React es utilizado activamente por empresas como Facebook, Twitter, Netflix, Airbnb, Paypal, The New York Times, Yahoo, Walmart, Uber y Microsoft.
Angular
Angular es menos admirado que React y encara mucho escepticismo, en parte debido a la impopularidad de Angular 1.0. Los desarrolladores solían descartar el framework por ser demasiado complicado, ya que requería mucho tiempo para aprenderlo. Sin embargo, este framework ha sido desarrollado por Google, que trabaja a favor de la credibilidad de Angular.
Google proporciona el soporte a largo plazo del framework y lo mejora constantemente. Sin embargo, las actualizaciones son tan rápidas que la documentación a menudo de sufre retrasos.
Angular también es utilizado por empresas como McDonald's, AT&T, HBO, Apple, Forbes, Adobe, Nike y Microsoft.
6. Desempeño
React
El rendimiento de React ha mejorado enormemente con la introducción del DOM virtual. Dado que todos los árboles DOM virtuales son ligeros y están integrados en el servidor, se reduce la carga en el navegador. Además, dado que el proceso de enlace de datos es unidireccional, los enlaces no se asignan a los observadores (watchers) como en el caso de Angular. Respectivamente, no se crea una carga de trabajo adicional.
Angular
Angular rinde peor, especialmente en el caso de aplicaciones web complejas y dinámicas.
El rendimiento de las aplicaciones de Angular se ve afectado negativamente por el enlace de datos bidireccional. A cada enlace se le asigna un observador para realizar el seguimiento de los cambios, y cada ciclo continúa hasta que se verifiquen todos los observadores y los valores asociados. Debido a esto, cuantas más vinculaciones tenga, más observadores se crearán y más engorroso se volverá el proceso.
Sin embargo, la actualización más reciente de Angular ha mejorado enormemente su rendimiento y ya no pierde frente a React. Además, el tamaño de una aplicación Angular es ligeramente más pequeño que el tamaño de una aplicación React.
7. Lenguaje
React
React se basa en JavaScript ES6 + combinado con JSX script. JSX es una extensión para la sintaxis, lo que hace que un código JavaScript se parezca a un código escrito en HTML. Esto hace que el código sea más fácil de entender y los errores tipográficos son más fáciles de detectar. Para que el código JSX se compile en un navegador, React se complementa con Babel, una herramienta de traducción de código.
Angular
Angular puede usar JavaScript o TypeScript, que es un superconjunto de JS desarrollado específicamente para proyectos más grandes. TypeScript es más compacto que JavaScript, el código es más fácil de navegar y los errores tipográficos se detectan fácilmente. El proceso de refactorización de código también se vuelve más simple y rápido.
8. Estructura de la Aplicación
React
La estructura de React ofrece a los desarrolladores la libertad de elegir. No existe "una única estructura correcta" para una aplicación React. Sin embargo, la necesidad de diseñar la estructura de la aplicación al comienzo de cada proyecto hace que sea más difícil y más largo de comenzar.
Además, React ofrece solo la capa View, mientras que Model y Controller se agregan con el uso de otras librerías.
La arquitectura de una aplicación React está basada en componentes. El código está hecho de componentes React, que se renderizan con la biblioteca React DOM y se dirigen de dos maneras: funcional (con una función que devuelve JSX) ...
function Hola(props){
return <div>Hola {props.nombre}</div>
}... y basado en clases (con clases ES6).
class Hola extends React.Component {
render() {
return <h1>Hola, {this.props.nombre}</h1>;
}Angular
La estructura de Angular es fija y compleja, adecuada para desarrolladores experimentados.
Angular se basa en tres capas: Model, Controller y View. El objeto responsable del Model es inicializado por el Controller y se muestra con el View.
El código de la aplicación consta de diferentes componentes de Angular, cada uno escrito en cuatro archivos separados: un archivo TypeScript para implementar el componente, un archivo HTML para definir la vista, un archivo CSS para definir las características de estilo y un archivo especial para efectuar las pruebas. Los enlaces a estos archivos están escritos en la directiva de la aplicación (app directive), que muestra la lógica estructural de la aplicación. Respectivamente, los componentes de Angular también son reutilizables.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
9. Componentes de la interfaz de usuario (UI)
React
Las herramientas de interfaz de usuario para React son desarrolladas por la comunidad. Hay muchos componentes de IU gratuitos y de pago en el portal de React. Para usar componentes de Material design en React, tendría que instalar una librería adicional: Material-UI Library & Dependencies.
Angular
Angular tiene un Material design preconstruidos. Hay varios botones, diseños, indicadores, ventanas emergentes y controles de formulario. Debido a esto, la configuración de la interfaz de usuario (UI) se vuelve más simple y rápida.
10. Directivas
React
En React, las plantillas y la lógica se explican en un solo lugar: al final del componente. Permite al lector captar rápidamente el significado del código incluso si no conoce la sintaxis.
Angular
En Angular, cada plantilla se devuelve con un atributo: una directiva de cómo se debe configurar el objeto. La sintaxis de las directivas Angular es compleja y sofisticada, lo que la hace incomprensible para un lector sin experiencia trabajando con esta tecnología.
11. Gestión de Estado
React
En React, cada componente tiene su propio estado. Un desarrollador de React puede crear componentes especiales para mantener el estado de toda la aplicación o una parte en concreto de ella. La principal desventaja aquí consiste en el hecho de que el estado global debe almacenarse en múltiples partes diferentes de la aplicación y los datos se pasan manualmente a los diferentes niveles del árbol de componentes.
class Reloj extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>¡Hola Mundo!</h1>
<h2>Ahora es {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}Para resolver este problema, existe una librería de gestión especial del estado: Redux. La idea de está es que el estado global se representa como un único objeto con estado, que se modifica en diferentes partes de la aplicación con la ayuda de reductores: funciones especiales de Redux.
La librería de gestión de estado MobX ofrece otra solución. A diferencia de Redux con el estado global almacenado en un solo objeto con estado inmutable, MobX ofrece almacenar solo el estado mínimo requerido, mientras que el resto se puede derivar.
Angular
En Angular, los datos de los componentes se almacenan en las propiedades de los componentes. Los componentes principales (parent) pasan datos a los secundarios (child). Los cambios de estado en algunas partes se pueden identificar y recalcular, pero en una aplicación grande, pueden causar una serie de actualizaciones multidireccionales del árbol, que serán difíciles de rastrear. Las funciones se pueden mejorar con la ayuda de bibliotecas de gestión de estado, como NgRx o RxJS, que garantizarían que el flujo de datos sea unidireccional.
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
} 
12. Inyección de dependencias
React
React no es totalmente compatible con la inyección de dependencias, ya que no cumple totalmente con la idea de programación funcional e inmutabilidad de datos. En cambio, tiene un estado global para todos los componentes.
Angular
La mayor ventaja de Angular reside en el hecho de que, a diferencia de React, admite la inyección de dependencias. Por tanto, Angular permite tener diferentes ciclos de vida para diferentes almacenamientos.
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
// declaramos que este servicio debe ser creado
// por el inyector de aplicación root.
providedIn: 'root',
})
export class HeroService {
getHeroes() { return HEROES; }
}
13. Enlace de datos
React
El enlace de datos representa el proceso de sincronización de datos entre el Model y View. React debe reforzase con Redux, quien le permite trabajar con datos inmutables y hace que el flujo de datos sea unidireccional. El enlace unidireccional es predecible, lo que facilita el proceso de depuración.
Angular
Angular funciona con el enlace de datos bidireccional y datos mutables. Si bien las ventajas de los datos mutables e inmutables son tema de una acalorada discusión, definitivamente es más fácil trabajar con el enlace de datos bidireccional que con el enfoque unidireccional. Al mismo tiempo, el enlace de datos bidireccional afecta negativamente al rendimiento, ya que Angular desarrolla automáticamente un observador para cada enlace.
Las formas del enlace de datos en Angular:
{{expression}} Interpolation
[target]="expression" Property
bind-target="expression" Attribute(target)="statement" Event
on-target="statement" Event[(target)]="expression" Two-way
bindon-target="expression" Two-way
14. Cambio de Renderizado
React
React utiliza un Modelo de Objetos del Documento virtual (DOM), que permite implementar fácilmente cambios menores en los datos de un elemento sin actualizar la estructura de todo el árbol. La librería crea una memoria en caché de la estructura de datos, calcula los cambios y actualiza de manera eficiente el DOM que se muestra en el navegador. De esta manera, toda la página parece renderizarse representarse en cada cambio, mientras que en realidad, las librerías solo representan los subcomponentes modificados.
El equipo de React está mejorando constantemente Fiber, un mecanismo destinado a impulsar la productividad del renderizado de cambios.
Angular
Angular usa un DOM real, que actualiza toda la estructura del árbol incluso cuando los cambios han tenido lugar en un solo elemento. El DOM real se considera más lento y menos efectivo que el DOM virtual.
Para compensar esta desventaja, Angular utiliza la detección de cambios para identificar los componentes que deben modificarse. Por lo tanto, el DOM real en Angular funciona con la misma eficacia que el DOM virtual en React.
15. Herramientas
React
React es compatible con varios editores de código. Por ejemplo, el código en React se puede editar con Sublime Text, Visual Studio y Atom. Para iniciar un proyecto, puede usar la herramienta Create React App (CLI). A su vez, la renderizacion del lado del servidor se completa con el uso del framework Next.js.
Para probar toda la aplicación escrita en React, necesitarías varias herramientas. Por ejemplo, Enzyme para las pruebas de componentes, Jest para probar el código JS, React-unit para las pruebas unitarias, etc. Para depurar la aplicación en el modo de desarrollo, puede usar una extensión de navegador llamada React Dev Tools.
Otra herramienta interesante es React 360, que es una biblioteca utilizada para crear aplicaciones AR (realidad aumentada) y VR (realidad virtual).
Angular
De manera similar a React, Angular es compatible con una variedad de herramientas de edición de código. Por ejemplo, puedes trabajar con editores de código como Aptana, Sublime Text y Visual Studio. Un proyecto se puede configurar rápidamente con Angular CLI. La renderizacion del lado del servidor se completa con la ayuda de Angular Universal.
A diferencia de React, Angular se puede probar completamente con una sola herramienta. Para las pruebas de extremo a extremo (end-to-end) en Angular, las plataformas son Jasmine, Protractor y Karma. Otra herramienta que depura la aplicación en el modo de desarrollo es una extensión del navegador Augury.
Conclusión
Angular es un framework de desarrollo web y móvil completo. React es una librería solo para el desarrollo de UI, que se puede convertir en una solución completa con la ayuda de librerías adicionales.
React parece más simple a primera vista y lleva menos tiempo el comenzar a trabajar en un proyecto con React. Sin embargo, esa simplicidad que es la principal ventaja de React se neutraliza porque tienes que aprender a trabajar con frameworks y herramientas de JavaScript adicionales.
Angular en sí es más complejo y lleva bastante tiempo dominarlo. Sin embargo, es una herramienta poderosa que ofrece una experiencia de desarrollo web integral, y una vez que aprendes a trabajar con ella, da sus frutos.
No hay un mejor framework o una mejor librería. Ambos se actualizan continuamente para mantenerse al día con su competidor. Por ejemplo, mientras que se creía que React ganaba debido a su DOM virtual, Angular igualó la puntuación al implementar la detección de cambios. Si bien se consideró que Angular estaba ganando debido a que fue desarrollado por una empresa tan autoritaria como Google, la inmensa y devota comunidad de React compensó completamente la reputación de Google e hizo que React fuera similar a Angular.
Al final, React vs Angular es una cuestión de preferencia personal, una cuestión de habilidades y hábitos. Como principiante en programación, probablemente te beneficiarás más comenzando con React. Como desarrollador experimentado, sigue trabajando con lo que conozcas mejor.
No olvides desafiarte a ti mismo y comenzar a aprender un nuevo framework o librería, React o Angular. Como gerente de proyectos o propietario de una empresa que subcontrata a los desarrolladores, debe hablar con su equipo de desarrollo web y elegir juntos el framework o libraría marco que mejor se adapte a todos, ya sea Angular o React.
P.S.
Me gustaría agradecer a todos los que contribuyeron a este artículo, incluidos Sergey Gornostaev y Volodya Andrushchak, desarrolladores de software Full-stack @ KeenEthics.
Traducido del artículo de Oleg Romanyuk - Angular vs React: Which One to Choose for Your App