Empate técnico: React vs Angular 2

Lo primero que hay que tener claro es lo siguiente: React de por sí NO es un framework y Angular 2 SÍ. Pero, entonces, ¿por qué compararlos? son dos formas de trabajar y de hallar soluciones con un nexo en común: un modelo de interfaces basado en componentes.

NOTA: Este artículo lo publiqué originalmente en: https://medium.com/@FerCortesF/el-empate-en-las-caracter%C3%ADsticas-de-react-y-angular-2-c18f9c0c9247

Comodidad vs Libertad

Para mí, este punto es un empate. Angular 2 aporta la comodidad de tener un framework completo que dispone de todas las herramientas necesarias para llevar a cabo una aplicación, permitiendo que te despreocupes de tener que buscar la forma de implementar funcionalidades, lo que hace que todo tengas que hacerlo "a su manera". Mientras que React aporta la flexibilidad y la libertad de seleccionar las herramientas con las que deseas trabajar, aumentando así la carga de decisiones tecnológicas que tomar. Esta filosofía permite ir reemplazando librerías que permitan soluciones más modernas para resolver problemas conocidos.

El DOM Virtual

Algo que me gustó mucho de React cuando oí hablar de él fue el DOM Virtual. Una solución muy interesante para resolver problemas de rendimiento en frameworks anteriores (como Angular 1.x). El DOM virtual es una representación del DOM que permite comparar el DOM activo con el nuevo DOM resultante. Gracias a esta comparación se puede establecer el número menor de instrucciones que transformaran un DOM en otro.

El DOM Virtual supone una gran ventaja en rendimiento con sus predecesores, pero por su parte, el equipo de Angular 2 ha trabajado duro en mejorar el rendimiento de su interacción con el DOM. Se ha acercado mucho al rendimiento de React y ha mejorado sustancialmente el rendimiento de Angular 1.x. En este punto la ventaja es de React, aunque no es una ventaja muy grande.

Benchmarks: https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ Destacar del artículo que hay otros frameworks y librerías con un rendimiento increíble. Habrá que estar atentos al trabajo de "incrementaldom" por parte de Google.

Pruebas "en vivo" de tasa de refresco en pantalla: http://mathieuancelin.github.io/js-repaint-perfs/

Plantillas

Una diferencia muy destacada e importante es el lenguaje en el que están centradas las plantilla de uno y otro. Angular 2 centra sus plantillas en HTML, mientras que por su parte React centra sus plantillas en Javascript (con el motor JSX). Para leer de Angular 2 debes conocer sintaxis específica de Angular y en React sólo debes conocer Javascript.

¿Qué es eso de centrado en HTML o Javascript? En Angular 2 escribimos cierta lógica en el HTML, trasladando javascript a HTML. Mientras que con React toda la lógica permanece en javascript, es decir, se traslada HTML a javascript. La ventaja es tener un código mucho más centralizado y legible, pudiendo identificar los fallos de una forma más eficaz y pudiendo aplicar toda la potencia de javascript a nuestras plantillas.

En este punto hay una pequeña ventaja para React.

Detección de errores en las plantillas

Otro punto importante es la detección de fallos en las plantillas. Angular 2, al igual que Angular 1.x tiene un problema, la detección de errores en una plantilla se produce en tiempo de ejecución, aportando además una información poco determinante para encontrar el error. Por su parte, en React el fallo se detecta durante la compilación de la plantilla, aportando información acerca del error y la línea que provoca el error.

En este punto la ventaja es para React.

Typescript!

Aunque no soy el mayor fan de Typescript, creo que proporciona un camino muy claro de cómo deben hacerse las cosas con Javascript, ayudando en proyectos de gran envergadura al trabajo en equipo de una forma clara y concisa. Angular 2 ha sido creado con Typescript y pensado para usarlo junto con Typescript, lo que supone una gran ventaja. También existe la posibilidad de usar React con Typescript, pero la siombiosis entre ambos no es tan clara como la que hay con Angular 2.

En este punto la ventaja es para Angular 2.

Web Components

Tanto Angular 2 como React están orientados al desarrollo de componentes reutilizables. Sin embargo, Angular 2 toma una ligera ventaja por un motivo: sus componentes son más fácilmente convertibles en componentes web nativos.

Estabilidad

Como se ha comentado antes, React permite mayor libertad en la elección tecnológica. Sin embargo, esto conlleva una desventaja a mi parecer: La estabilidad. Aunque React, es un producto de una estabilidad importante, debemos tener mucho cuidado al elegir el Stack tecnológico restante. Si utilizas muchas librerías complementarias, la sensación de que algo pueda quedar "deprecated" es más común y hace que en algunos casos deba reescribirse código.

Por su parte, Angular 2 al ser un framework completo, es complicado que tras una Release exista un cambio desproporcionado que nos haga tener que reescribir nuestro código. Además, Angular 2 tiene todo un equipo detrás tomando decisiones sobre el futuro, que en caso contrario deberías tomar tú.

Ventaja para Angular 2.

Herramientas de trabajo

Para trabajar con Angular 2 cualquier IDE que soporte HTML/JS puede ser de utilidad. Si deseas trabajar con React necesitarás un IDE que soporte JSX. Sin embargo, dada la popularidad actual de React, los IDEs modernos tienen soporte para JSX. Por lo tanto en este punto existe un empate.

Flujo de datos unidireccional

El flujo de datos unidireccional es una ventaja muy importante. Es uno de los puntos débiles de Angular 1.x. Imagina cómo de confuso e ineficiente puede ser una sincronización de datos con la vista que está ocurriendo al mismo tiempo que una sincronización de la vista con los datos.

Tanto Angular 2 como React utilizan mecanismos para que el flujo de datos sea unidireccional. En React sólo se dispone de la posibilidad de enlazar los datos en una dirección, obligando de esta forma a que el flujo sea siempre unidireccional. Por su parte en Angular 2, aunque existe una forma de enlazar los datos en dos direcciones, internamente el flujo de datos funciona en una sóla dirección. Por lo tanto, Angular 2 encapsula eficientemente el enlace bidireccional de datos, aunque pueda resultar confuso.

Empate.

Conclusión

Existen otras características que podrían compararse: el tamaño de uno frente al otro, la curva de aprendizaje de uno y de otros, facilidad para empaquetar un proyecto, etc. Sin embargo, serían comparaciones menores que acabarían dandonos un resultado muy similar al actual. En la comparativa actual Angular 2 toma ventaja en 3 puntos, React tiene ventaja en 3 y otros 3 en empate.

Comparar Angular y React técnicamente, aunque interesante, es como comparar dos coches equivalentes a raiz de la tecnología interna de su motor de combustión. Finalmente, es probable que decidas por un coche u otro en base al color.
http://blog.angular-university.io/why-angular/

En el artículo http://blog.angular-university.io/why-angular/ me gusta mucho la explicación de por qué nunca hay una razón de peso para elegir uno u otro: "Tanto Angular 2 como React, se centran en resolver principalmente los mismos problemas. La diferencia radica en diferentes aproximaciones técnicas internas para resolver estos problemas. Sin embargo, en los dos, tanto las características como los patrones de diseño utilizados se superponen mucho". Por lo tanto, el empate técnico está más que justificado. Yo personalmente he elegido el color de React, puedes verlo en https://medium.com/@FerCortesF/reflexi%C3%B3n-por-qu%C3%A9-eleg%C3%AD-react-antes-que-angular-2-117becd22699#.8nx7o58d9