Angular y React JS, dos pesos pesados del frontend

Hola comunidad, tengan todos ustedes un cordial saludo de mi parte.
Retomando el tema de los tutoriales, quise aprovechar el reto sugerido por el profesor Eduardo Ibarra y poder entonces, comparar Angular y React JS como elegidos (2 pesos pesados sin desmeritar lo que la comunidad hace en pro de Vue JS).

Dado que fue precisamente Angular el framework reactivo con el cual inicié, no quise que mi opinión estuviese sesgada por este framework ya que en lo personal, fue un amor a primera vista.
Sentí que de alguna manera estaba traicionando y contradiciendo lo que había plasmado en la agenda desde un inicio: “React JS”.

Si bien es cierto que la aplicación de Platzi está desarrollado en esta potente librería soportada por Facebook (motivo principal por el que en la agenda estaba primero React), y la línea base de especialización está inclinada a dicha librería, fue Angular mi primer amor. No obstante, intantaré en este Tutorial dejar a un lado
esta preferencia, y centrarme en las características, algunas ventajas y desventajas de cada una para ser lo más objetivo posible, resaltando las cualidades en términos generales sin profundizar mucho.

Antes de comenzar con las diferencias entre Angular y React como primer punto, me pregunté: ¿Y porque no comenzar con las similitudes?

Así que dicho esto, comenzaré con las similitudes entre ambos:

SIMILITUDES:

Open Source

• Ambas tecnologías son consideradas Open Source, ya que la mayor parte del código implementado se puede mostrar a los desarrolladores de manera pública para realizar mejoras, modificaciones o variaciones; Por lo general, es en github donde se alberga gran cantidad de material y recursos relativos a Angular y React, incluso sobre otros temás también, como el caso de Vue que no cubre este tutorial.

Entorno cambiante

• Sea Angular o sea React, el navegador es un entorno que cambia constantemente a causa de las necesidades propias de lo que se está utilizando
  hoy en día, esto, para ofrecer herramientas y facilidades a los programadores para poder desarrollar aplicaciones más robustas y complejas de la manera más sencilla posible.

Generador de proyectos

• Tanto Angular como React, tienen un generador de proyectos, es decir, un cliente de consola para no tener que crear un proyecto netamente desde cero, ya que esto implica un esfuerzo extra por parte del desarrollador frontend a la hora de comenzar un proyecto. Al comienzo era bastante complicado cuando se tenía que crear desde cero los artefactos o archivos necesarios para poder funcionar en un entorno real; Definir la estructura básica.
  Ahora, las herramientas de líneas de comando permiten crear una estructura general de archivos necesarios para poder correr la aplicación con lo básico. Es decir, se genera un proyecto con una configuración profesional por defecto.

Concepto de componentes y modularidad

• Una aplicación grande se podrá dividir en partes pequeñas, en dichas partes se podrá entonces encapsular la lógica necesaria relativo a un aspecto visual de una página dada. Los componentes son una solución viable para poder tener un dominio sobre dichas partes y sobre la interacción entre éstas.

Transpilación o transformación de código

• Tanto Angular mediante (TypeScript), así como React a través de JSX que es un lenguaje de dominio específico, se convierte el código a un estandar que pueda ser perfectamente entendible por el navegador y permita el correcto funcionamiento de una aplicación dada para poder que funcione sin problemas en todos los navegadores.

Compatible con versiones modernas de Javascript

• Tanto Angular como React, trabajan con la última versión de Javascript como estandar. Javascript es sin duda alguna, la base como lenguaje de programación del lado del frontend. Así que si se tiene cierto dominio sobre Javascript, llevarás un buen terreno ganado para aprovecharlo al máximo, sea para el caso de Angular o React.

Agnósticos al Backend

• Angular y React, se enfocan principalmente al Frontend, siendo agnóstico al Backend, es decir, se podrá entonces crear dicho Backend con el lenguaje de programación de preferencia y sus detalles más comunes en cuanto al mecanismo de persistencia (acceso al motor de bases de datos dado, etc).

Uso de Node.JS a nivel básico.

• Tanto React como Angular, requieren inicialmente de Node.js para poder configurar en primera instancia la aplicación en terminos de paquetes a utilizar. No se requiere un conocimiento profundo de Node.js para comenzar con Angular o React.

Soporte

• Importantes empresas soportan tanto a Angular como a React, mientras Google brinda soporte a Angular, Facebook da un soporte continuo a React. Dos grandes (pesos pesados)en la industria.

Rendimiento

• Como ámbos están en constante movimiento, sus actualizaciones atacan problemas precisos en cuestiones de redimiento (Performance como usualmente se hace referencia).

DIFERENCIAS PRINCIPALES Y CARACTERÍSTICAS:

Angular

• En si mismo, es un framework completo, es decir, a diferencia de React, se tiene todo un set de bibliotecas instaladas por defecto, todas estas funcionalidades están internas para poder utilizar una vez se inicie con un proyecto base a través del cliente de Angular.
  Typescript (desarrollado por microsoft) es un superset mejorado luego por el equipo de Google, y que es característico de Angular y que viene por defecto.
• Viene por defecto con paquetes para crear animaciones, peticiones http a un servidor y un set para desarrollar pruebas unitarias, todo esto ya instalado.
• Se pueden desarrollar aplicaciones móviles hibridas utilizando a Angular como Framework, Ionic, es muy conocido para crear aplicaciones móviles utilizando Angular, las aplicaciones móviles con datos intensivos quizás las aplicaciones híbridas no sea la mejor opción. NativeScript podría ser una alternativa para crear también aplicaciones nativas como complemento, apoyado con typescript.

React

• Facebook pensó muy bien en el rendimiento para aplicaciones nativas precisamente, siendo una biblioteca simple y eficiente, permite crear funcionalidades de una manera fácil y sobre todo, el hecho de poderlas mantener lo hace muy potente.

• Actualmente React es la librería más popular para implementar interfaces de usuario (UI User Interface).

• Tal como lo hace Angular, en React se puede complementar a otras bibliotecas para manjear el estado, bibliotecas para el enrutamiento y animaciones, gestión con datos de formularios y generadores de template, es decir, el desarrollador es libre de elegir qué conectar a la aplicación, cómo extenderla y cómo incluirla.

• En react se tiene la libertad de poder crear estructuralmente el proyecto como más guste. Incluyendo dichas bibliotecas externas.

• JSX (javascript con XML) se usa por react para crear interfaces de usuario, podremos directamente hacer uso de las etiquetas básicas de HTML dentro de Javascript, suena un poco fuerte al comienzo pero dando un enfoque netamente práctico, esto podría resultar bastante útil.

• Se pueden crear aplicaciones nativas haciendo uso de ReactNative, para un entorno móvil (convertir a una aplicación nativa y NO hibrida), teniendo entonces casí el mismo rendimiento que de una aplicación nativa se tratara una vez esté en producción.

• Con React, se pueden crear aplicaciones para otros tipos de plataformas, como por ejemplo aplicaciones de escritorio con React Windows, realidad aumentada (React AR/VR) e internet de las cosas ( React IoT).

• En aplicaciones innovadoras para crear ciertos tipos de patrones, React es la solución ideal ya que brinda mucha libertad para organizar/gestionar los artefactos.

Rendimiento gracias al DOM virtual:

• Las operaciones que realiza React cuando se ejecutan las aplicaiones, suelen ser más rápidas porque se llevan a cabo antes sobre el DOM VIRTUAL, que cargado en la memoria, permite actualizaciones de hasta 60 frames por segundo, dando como resultado la sensación de fluidez y rapidéz por parte del usuario final.

Angular

• Del lado del HTML, en Angular se puede apreciar una sustancial diferencia en relación a la separación de responsabilidades y un lenguaje de marcado de hipertexto semánticamente legible al ojo humano, se aprecia una estructura clara teniendo en cuenta el uso de directivas como: *ngIf, *ngFor que son las más comunes. Dicho esto, se aprecia entonces una clara separación de responsabilidades desde el punto de vista de ficheros.

React

• Claramente se observa que la lógica de la vista está inmersa justo antes de renderizar el componente (visualmente hablando), dando la sensación de que se está mezclando código tipo spaghetti como se hacía años atrás, pero esto realmente lo veo como una ventaja ya que todo está encapsulado en un solo fichero, siendo más fácil dar soporte o mantener ciertos componentes.

Las diferencias en cuanto al uso de librerías para realizar un aplicación se resumen de manera tabulada e ilustrada en la siguiente imágen:

Diferencias desde el punto de vista de Arquitectura:
Angular

• Maneja una arquitectura básica MVC (Modelo Vista Controlador), dispone de compoentes para la vista, el enrutador para la capa de control, y servicios para la capa de Backend dentro de este frontend, el paradigma usado es orientado a componentes.

React

• maneja una arquitectura llamada Flux, que es similar a MVC, ya que también consta de modelo, vistas y controladores; La gran diferencia es que FLUX, está pensada en un flujo unidireccional,es decir, los datos viajan desde la vista por medio de acciones y llegan a un elemento llamado Store desde el cual se actualizará nuevamente la vista.
  el Store sería lo más cercano al modelo, guardando los datos y estado de la aplicación.
  La implementación de esa arquitectura la realiza Flux/Redux:

Ahora, no podía dejar pasar una captura de pantalla de cómo se ve un componente (visual) y la lógica detrás del mismo, tanto en Angular como en React:

NOTA:cabe mencionar que solo es un fragmento de código para que se pueda observar rápidamente las diferencias en el uso de tags/directivas entre otros elementos que difieren entre Angular y React, por tanto, no se incluye la totalidad del fichero para cada caso.
Componente:

Lógica/código fuente detrás del componente:

Diferencias desde el punto de vista de la actividad en los repositorios:

• Angular en github:
  

• React en github:
  

CICLO DE VIDA DE LOS COMPONETES (Angular y React)

En la definición más breve posible, el ciclo de vida de un componente hace referencia a los eventos que se van a lanzar dependiendo del estado de un componente para poder ejecutar funciones o declarar lógica, lo cual permite al desarrollador tener un estricto control sobre el proceso de renderizado de dichos componentes.

React

• El ciclo de vida se puede dividir en 3 fases, el montado, la actualización y el desmontado del componente. Cada método tiene un prefijo (will o did) para identificar si ocurre antes o después de una determinada acción.

EL MONTADO:
Esta fase ocurre una sola vez por componente cuando éste es creado y se monta sobre la interfaz de usuario (UI), la cual a su vez, está dividido en 4 funciones:

constructor(props)
Este mpetodo es ejecutado al instanciar un componente, ello con el fin de poder definir el estado inicial del componente, hacer “bind” de métodos y definir propiedades internas en las que podremos guardar datos. (parsear datos, ejecutar un validador, etc.).

componentWillMount()
Este método se ejecuta cuando el componente está por renderizar, pero aún no lo ha hecho, es posible en este punto el hecho de poder modificar el estado de los componentes sin causar una actualización. No se recomienda entonces realizar peticiones HTTP para evitar problemas de memoria.

render()
En esta fase, es donde se van a tomar las propiedades el estado y contexto que se van a generar en la UI (inicio del componente). No se aconseja en este punto, actualizar el estado de un componente (evitar ciclos infinitos de renderizados).

componentDidMount()
Este es el último método de la fase de montado y se ejecuta una vez que el componente se renderizó en el navegador, es ideal para realizar peticiones HTTP, también, nos permite interactucar con el DOM (Document Object Model) o las otras APIs del navegador tales como geolocalización, notificaciones, etc.

ACTUALIZACIÓN:
Esta fase puede ocurrir repetidas veces, tantas sean necesarias cuando una propiedad, un estado o el contexto se modifican y ello hace que la UI se vuelva a generar para poder representar dicho cambio (reflejar en la vista). Los métodos en esta fase son:

componentWillReceiveProps(nextProps)
Este método se ejecuta justo después de que el componente reciba nuevas propiedades. Se podrá entonces actualizar el estado para que refleje el cambio de propiedades, ya sea reiniciando su valor inicial o cambiando dicho valor por uno nuevo.
Es de vital importancia, mencionar acá que si las propiedades NO cambiaron, el método es ejecutado.
Haciendo referencia a la famosa frase: “validar que las nuevas propiedades (nextProps) sean diferentes de las anteriores (this.props)”.

componentWillUpdate(nextProps, nextState)
Este método se ejecuta si y solo si el método anterior (componentWillReceiveProps) devuelve TRUE. Se podrá entonces realizar cualquier tipo de preparación antes de que la UI se actualice.

render()
¿wtf? ¿Luego este método no estaba en el montado?, así es. Acá se va a generar la UI, pero esta vez con los datos que hayan cambiado.

componentDidUpdate(prevProps, prevState)
Este método corresponde a la última parte de la actualización de un componente, ocurre justo después de que se renderiza en el DOM un componente. Al igual que con el método componentDidMount(), acá es posible intereactuar con el DOM y cualquier API de los navegadores.

DESMONTADO:
Esta es la última fase el ciclo de vida y solo contiene 1 método el cual se ejecuta antes de que un componente se elimine/desmonte de la UI de nuestra aplicación.

componentWillUnmount()
Este método (único) en esta fase, permite realizar cualquier tipo de limpieza antes de eliminar/remover el componente.
Por lo general, es útil para dejar de escichar eventos (window, documento o el DOM), desuscribirse de un WebSocket o Store, así como también, poder cancelar peticiones HTTP que quizás hayan quedado pendientes.

Angular

Por lo regular, en el ecosistema de Angular los métodos del ciclo de vida se conocen también como “Hooks”, haciendo referencia a eventos que se ejecutan en un momento dado del ciclo de vida del componente. Conceptualmente no difiere de React. A diferencia de React precisamente hablando, no se tiene una clasificación tan definida. Por tanto los métodos son los siguientes:

ngOnInit
Este método se ejecuta justo cuando cargamos la directiva de nuestro compoennte, es el primer mpetodo ejecutado justo después de lanzar el constructor de la clase del componente.
Para poder implementar código en este método, es necesario implementar la interfaz en la definición de la clase base del componente de la siguiente manera:

exportclassComponenteDeEjemploimplementsOnInit{ ... }

al implementar la interfaz, será necesario entonces, definir el método:

ngOnInit(){ console.log('Metodo on init lanzado'); }

DoCheck
Este método se ejecuta cada vez que se produce algún cambio en el componente o en la aplicación de Angular y este método se estará ejecutando frecuentemente. Para utilizarlo, de igual manera debe implementarse esta interfaz en la definición de la clase base del componente:

exportclassEjemploComponentimplementsDoCheck{

Posterior a la implementación anterior, se debe definir entonces el método el cual se ejecutará cuando se produzca cualquier cambio o evento:

ngDoCheck(){ console.log('Método DoCheck lanzado'); }

OnDestroy
Este Hook o método del ciclo de vida, se ejecuta justo antes de eliminar la instancia de un componente, dicho método es:

ngOnDestroy(){ ... }

Cabe mencionar que también se debe implementar la interfaz de la siguiente manera:

exportclassComponenteDeEjemploimplementsOnDestroy{ ... }

Posterior a la implementación de esta interfaz en la clase base (y previamente haber importaado en la cabecera del fichero TypeScript), se define el método:

ngOnDestroy() { // acciones de destrucción }

A diferencia de React, con Angular se reduce bastante los métodos (de momento coloco los básicos sin afirmar que son los únicos), dando la sensación de que es mucho más sencillo y simple. Este concepto puede diferir de cada quien, ya que podría decirse también, que a mayor métodos existentes en el ciclo de vida, se tiene más control (React).

DESVENTAJAS

Como último apartado de este breve Tutorial, menciono algunas desventajas a mi parecer entre Angular y React:

React

• Ésta librería es un software (React) parcialmente propietario, sujeto a las patentes de Facebook. Éste tema inquietaría en cierto modo ya que Facebook podría cancelar un proyecto dado al determinar que se violó de alguna manera su licencia de uso (Primer golpe bajo para React sin ser subjetivo), a diferencia de Angular que es de tipo MIT, sin este tipo de problemas.

Angular

• Justo al momento de estar creando un proyecto medianamente complejo o simple, estamos cargando todo un framework o super set con gran cantidad de librerías, mientras que con React, prácticamente se elige que aspectos se van armando conforme la complejidad o las necesidades propias del proyecto, así lo requiera.

React

• Puede resultar un poco intimidante la sintáxis JSX para un maquetador web que únicamente haya tenido acercamientos desde el punto de vista de maquetación web y que NO tenga mucha experiencia con Javascript, aunque en este punto, es muy extraño que un maquetador web de experiencia NO esté familiarizado con Javascript. Pero dependiendo de como esté implementado desde el punto de vista de UI, puede resultar complejo extender funcionalidades a priori.

Angular

• En cuanto a la gestión del cambio por parte del equipo de Angular para nuevas versiones, da la sensación de que no hay una plena estabilidad en función del Core, estar sacando una versión cada 6 meses resulta un poco intimidante para aquellos que no son muy amigos de la documentación (suele ser extraño porque un buen desarrollador frontend es muy amigo de la documentación), pero como todo en esta vida es probable, hay quienes no, y por ende cualquier funcionalidad medianamente compleja podría estar expuesta a fallos a causa de un cambio dado en alguna parte crucial en una de sus tantas librerías internas

React

• Si no se tiene buen manejo y experiencia en los métodos que forman parte del ciclo de vida de un componente en React, fácilmente se prestará para cometer errores en componentes que dependen de un componente principal al momento de actualizar los datos del estado, al implementar peticiones HTTP por ejemplo en un método que no debe implementarse.

Angular

• Da la sensación de que no se tiene pleno control en el ciclo de vida de un componente, a diferencia de React donde existen varios métodos según el estado en que se encuentre un componente dado.

Conclusiones:

Tanto el Framework Angular, como la librería React, tienen sus ventajas y desventajas. La intención de este Tutorial fue precisamente desnudar lo más básico de ambos mundos en un “cuadrilátero” tecnológico donde ahora si daré mi opinión subjetiva de quien se lleva hoy por hoy el trofeo.

Para mi, el ganador es:

…

Empate técnico.

Tengan un buen día y hasta la próxima con otro Tutorial.
Un saludo.

Fuentes (imágenes):
https://codearmy.co/comparación-react-contra-angular-2402f761b14e
https://www.sitepoint.com/react-vs-angular
Fuentes (conceptuales):

• Fazt (youtuber)
• Victor Robles
• Sergio Xalambrí (miembro de Platzi)