Empate técnico entre React y Angular 2

Comentaba anteriormente que había elegido React antes que Angular 2. En mi reflexión del por qué, comentaba que las características de ambos hacen que queden en un empate técnico. No entré a valorar qué me gusta de cada uno y qué no. Buenos pues voy a comentar los criterios técnicos que he comparado de cada uno de ellos.

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

Comodidad vs Libertad

Para mi 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 a 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 escuche 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. De esta comparación surgen el menor número de instrucciones para transformar 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. No ha llegado a alcanzar a React, pero se ha acercado mucho en algunas situaciones y mejorado mucho el rendimiento de Angular 1.x. En este punto la ventaja es de React, aunque sin ser demasiado abultada.

Benchmarks: https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ Destaca como hay otros frameworks y librerías con un rendimiento increíble. Creo que 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 plantillas 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 una plantilla de Angular 2 debes conocer mucha sintaxis específica de Angular y en React sólo debes conocer Javascript.

¿Qué es eso de centrado en HTML o Javascript? Que en Angular 2 escribimos cierta lógica en el HTML, trasladando javascript a HTML. Mientrás 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 legible y centralizado, pudiendo identificar los fallos de una forma más eficaz.

En este punto existe 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 existe una pequeña ventaja 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 ventaja muy clara. Existe la posibilidad de usar React con Typescript, pero la simbiosis entre ambos no es tan clara como la que hay con Angular 2. En este punto le doy ventaja a Angular 2.

¿Por qué no soy fan 100% de Typescript? Para mi gusto puede ponerle trabas a la versatilidad de Javascript. ¿De verdad existirían tantos frameworks, que aportan soluciones tan originales e increibles si sólo hubiese existido Typescript y no Javascript? Si usas Typescript estás sujeto a la versión de ES que utilice este y la forma en la que lleve cada una de las soluciones a cabo, añadiendo rigidez.

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 más complicado que tras una release exista un cambio desproporcionado, que nos haga tener que reescribir nuestro código. Además, Angular 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 resultarte 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 ocurre 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 sólo en una dirección. Por lo tanto, Angular 2 encapsula eficientemente el enlace bidireccional de datos, pero a la vez hace que pueda resultar confuso. Por lo tanto el punto acaba en empate.

Conclusión

Existen otras características que podrían compararse. El tamaño de un framework frente a otro, la curva de aprendizaje de uno y otro, facilidad para empaquetar un proyecto… Sin embargo, serían comparaciones menores y que acabarían dandonos un resultado muy similar al actual. Hemos visto que entre todas las características. Angular 2 toma ventaja en 3, React toma ventaja en 3 y otras 3 que quedan 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/)

Me gusta mucho la explicación que dan en este artículo acerca 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 mismo problema. La diferencia radica en diferentes aproximaciones técnicas internas para resolver estos problemas. Sin embargo, en ambos tantos 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 y la elección llevada a cabo en mi reflexión previa es el resumen de por qué elijo el color de React.

Bibliografía

[1] https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.smhv1k1c6

[2] http://jonrimmer.github.io/are-we-componentized-yet/#wtf

[3] http://www.enrique7mc.com/2016/01/comparacion-react-js-vs-angular-2/

[4] http://blog.angular-university.io/why-angular/

[5] https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

[6] http://stackoverflow.com/questions/39708018/angular2-unidirectional-data-flow

[7] https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c#.o4dh0u9qm

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.