Angular vs. React, dos herramientas poderosas en la Web
Tags: angular, react, web, javascript
Published: 2023-06-15 19:27:13


Para crear aplicaciones **Web** tenemos a nuestra disposición innumerables frameworks y librerías; entre las herramientas de tendencia en la actualidad tenemos una librería como **React** y un framework como **Angular**, que son populares entre los desarrolladores y siempre hay muchos temas para hablar de ellos. Ambas, comparten similitudes, como su arquitectura basada en componentes: son código abierto, y tienen un buen rendimiento.

Existen muchos interrogantes entre **Angular** y **React**, por ejemplo: ¿En qué se diferencian?, ¿Qué retos tienen? ¿Cómo puedo abordar cada uno de los conceptos y compararlos entre herramientas?, ¿Qué tipo de aplicaciones puedo realizar con respecto a la otra? En este artículo pretendo ayudar a responder algunas de esas preguntas.

## Arquitectura, enfoque y filosofia


**Angular** y **React** permiten una arquitectura basada en componentes. La principal diferencia entre ambos radica en que el primero es un framework de diseño de aplicaciones completo, además de ser una plataforma de desarrollo, y el segundo es una librería para crear interfaces de usuario. En otras palabras, **Angular** por defecto es una herramienta potente y completa para la creación de aplicaciones, y **React** nos permite desempeñarnos muy bien la capa de presentación.

**Angular**, tiene más funcionalidades, con una curva de aprendizaje mayor respecto a React. Al ser robusto, generamos aplicaciones escalables y mantenibles a gran escala.

**React** permite una flexibilidad en el desarrollo, y libertad a la hora de escoger estructura de carpetas, creación de componentes, e integración con otras librerías, lo que la hace una herramienta fácil de usar y elegir a la hora de generar aplicaciones en **JavaScript** o **TypeScript**.

En **Angular** el flujo de datos es two-way data binding o bi-direccional, (aunque tambien se puede one-way) los cambios en el modelo se reflejan en la interfaz y viceversa de manera automática. El desarrollo puede ser más práctico y rápido, pero en aplicaciones más grandes a la larga puede ocasionar considerar medidas para el rendimiento y manejo de la complejidad.

En **React** el flujo de datos es one-way-data-binding o una-dirección, de padre a hijo. Aunque de necesitar el flujo de datos two-way binding, React provee de un sugar syntactic o “azúcar sintáctico” que era usado hasta la version 15 y, apartir de la 16 algunos hooks ayudan en este flujo, para permitir integrar ese patrón sin problema.

En cuanto a la actualización y mantenibilidad de ambos, **Angular** contiene una CLI (interfaz de línea de comandos) que permite por medio de un comando realizar la actualización **Angular**. Dependiendo de la versión a la que se desee migrar se puede hacer de manera gradual, para evitar algún tipo de inconveniente en la última versión. React podría tomar más tiempo, debido a que al crear una aplicación comúnmente se hace uso de varias librerías, las cuales antes de actualizar debe revisarse su compatibilidad en relación con la versión que deseamos usar.

**Angular** utiliza **TypeScript**, como su lenguaje, el cual implementa clases, decoradores, interfaces estáticas, observables, entre otros, permitiendo que el código sea más robusto, identificando errores comunes y permitiendo su eliminación, pero requiere cierto conocimiento para poder identificar correctamente esos elementos para su utilización. En cuanto a **React** emplea por defecto **JavaScript**, (aunque también permite utilizar **TypeScript**), es de más accesibilidad para los desarrolladores web, en su aprendizaje.

En el ciclo de vida, **Angular** posee unos métodos para su manejo y **React** los Hooks que son funciones con las que podemos controlar el estado de los componentes.

**React**, a partir de la versión 16 adoptó los hooks, permitiendo así la necesidad de no utilizar Clases en los componentes para el control del estado y usar funciones. Los hooks permiten que el código sea más fácil de leer, y aunque el nombre de algunos de ellos, como **useEffect**, no explique su uso o el proceso de ciclo de vida que interviene, es necesario el conocimiento de manera individual de los hooks, para comprender correctamente su implementación.

**Angular** utiliza clases en sus componentes (pero se espera poder usar funciones en versiones posteriores) y su ciclo de vida usa varios métodos, que puede resultar en un proceso más estructurado, que va a cambiar en versiones posteriores, minimizando la cantidad de métodos y creando más legibilidad en el código. En este momento, a opinión de algunos desarrolladores, es necesario el uso de varios métodos para el control de cada fase del ciclo de vida en **Angular**, incluso para trabajar en el rendimiento de un proceso en específico.

En **React**, algunos hooks realizan varias acciones en el ciclo de vida, por lo que puede ser criticado por algunos desarrolladores que no cumple el principio de separation of concerns o de “separaciones de intereses”, al estar todo en una misma función. Y así como las críticas, hay comentarios positivos en que es amigable, al haber hecho posible el empleo de solo funciones para componentes que manejen el estado. Y aunque se puedan usar funciones, **React** sigue permitiendo la utilización de Clases, en el escenario de requerirse funcionalidades mucho más complejas.

## Como puede un desarrollador de Angular migrar a React y viceversa

Hablando desde mi experiencia como dev **Angular**, cuando pasé a **React**, inicié con la asociación de conceptos. Ambas comparten similitudes en conceptos de componentes, como por ejemplo: identificar un componente Smart y Dumb de **Angular**, que en React podría tener otro nombre como Statefull y Stateless, y diferencias en el template, generación de componentes, sintaxis, manejo del ciclo de vida, flujo de datos, la comunicación entre padre e hijo, que algunos de ellos en **Angular** requieren de más boilerplate y en React dependiendo de las prácticas puede ser desarrollado desde una forma sencilla hasta compleja.

Conocer conceptos prácticos de **JavaScript** y **TypeScript**, ayudan a que el proceso de aprendizaje no sea tan complejo. Además de patrones de diseño del software y principios. Aunque adicional, es importante conocer los conceptos básicos de cada herramienta, ya que por defecto cada una maneja bases que consideraron en su construcción y conocerlas te ayudan mucho en el desarrollo, como fue en mi caso.

En **React** se puede integrar diferentes librerías, por lo que a la hora de no conocer alguna de ellas, lo recomendable es hacer un POC (proof of concept) prueba de concepto, para probar la herramienta y verificar su mantenibilidad, a la hora de incluirla en el proyecto, para evitar luego dolores de cabeza manteniendo una librería que podría morir con el tiempo y tenga que ser soportada por el equipo de desarrollo, además de la aplicación que se está construyendo.

## Retos y desafíos en el aprendizaje

Pueden haber muchos, desde aprender los conceptos, y aplicarlos de acuerdo con las necesidades. Tal vez, pasar de un framework a una librería y viceversa, pueda tomarte algo de tiempo al inicio. Mi recomendación es no forzar el aprendizaje, conocer tus límites y siempre mantener la motivación en el proceso. Porque podría convertirse en un desafío más grande lidiar con la frustración del cambio que aceptarla y eso permitirte moverte como pez en el agua con las dos herramientas.

## Recomendaciones para aprender alguna de las dos herramientas

En el caso de no conocer alguno de los lenguajes que usan por defecto, lo principal es aprenderlo, leer la documentación oficial, artículos, observar videos, y sobre todo, explorarlo, ya que la práctica constante es la que nos ayuda a convertirnos en expertos en alguna práctica, o arte.

Aprender las bases de la herramienta es fundamental, mientras que hacer pequeños proyectos, puede ayudarte a ampliar la visión de uso, cuando tengas que enfrentarte a proyectos reales: grandes o pequeños.

No sobra recomendar aprender los patrones de diseños y principios, el solo aprendizaje de ellos no basta, es importante aplicarlos en los proyectos que estás construyendo, para que puedas identificar posibles errores que estabas siguiendo en tus prácticas, o mejorarlas si es posible.

En mi caso yo aprendo practicando, lo más difícil es encontrar para mí el proyecto práctico que deseo implementar y de identificar el proyecto, descubro cuáles conceptos necesito aprender o reforzar y esto me lleva a la investigación y más práctica individual de esos conceptos, para luego integrarlos en lo que voy construyendo. Además, me resulta muy útil leer artículos, observar videos, escribir las notas de lo que se está aprendiendo y compartir ese conocimiento, es lo que me ha ayudado a mí para reforzar una herramienta o aprender una nueva.

## Conclusion

Siempre que comparemos dos herramientas nos encontraremos con varias dudas y más si nuestro interés es probar o migrar de una a la otra. Angular y React, son herramientas muy útiles para crear muy buenas aplicaciones Web, el uso que desees darle para el proyecto que necesites, dependerá de las necesidades, tanto en infraestructura como en decisiones del equipo respecto al conocimiento que ya se posee; en el caso de no tenerlo, es muy importante estimar cuanto tiempo tomaría adquirirlo para la implementación de la aplicación deseada.

Gracias por leer mi artículo, si te gusta puedes compartirlo y seguirme. Sígueme en redes, me encuentras como **vanessamarely**.