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.