React vs. Angular 2

  • por Francisco Vallés

A pesar de que Angular 2 es un framework y React una librería, se puede hacer una comparación entre ambos enfoques. Por lo demás, React se puede usar en conjunto a Redux, Immutable, react-router, entre otros, para cubrir las necesidades de una aplicación.

 

Consistencia y overhead

Para construir una aplicación con React, se necesita hacer uso de librerías de routing, llamadas a APIs web, testing, manejo de dependencias, etc. Todo esto hace que uno tenga que tomar muchas decisiones y es la causa de que React tenga tantas opciones de starter kits. Por otro lado, los ejemplos encontrados en la web se presentan en ES5 y ES6 y se ofrecen tres maneras distintas de crear componentes. Todo esto crea confusión para las personas que están interesadas en aprender React.

Por ser un framework, en Angular 2 no es necesario tomar todo este tipo de decisiones, sino que hay un solo equipo detrás que las toma por uno. Se ahorra el tiempo y esfuerzo invertido en elegir qué librerías usar en React, las que podrían quedar obsoletas o requerir cambios importantes en el futuro. Además, Angular 2 adopta Typescript, que aunque no es obligación, entrega una consistencia que no tiene React cuando se está comenzando.

 

Curva de aprendizaje

Angular 2, al igual que otros frameworks como Knockout y Ember, definen formas específicas de hacer lo que JavaScript ya hace de manera trivial como, por ejemplo, un bucle:

Ember: {{# each}}

Angular 1: ng-repeat

Angular 2: ngFor

Knockout: data-bind=”foreach”

React: Simplemente usa JS

Angular 2 coloca JS en el HTML, mientras que React coloca HTML en el JS. Angular 2 lo hace mediante las directivas, mientras que React mediante el uso de JSX. Esta diferencia hace que sea mucho más simple trabajar con React y que no se necesite aprender la sintaxis específica de Angular 2.

 

Tamaño

Según Restuta, tenemos que:

Angular 2: 566K

React: 144K

Como se puede ver, el tamaño de React es significativamente menor que el de Angular 2 y, aunque este último seguramente va a disminuir su magnitud en los próximos meses, de todas maneras es poco probable que iguale los números de React.

El mayor tamaño de Angular 2, guarda relación con el hecho de ser un framework y que este viene con muchas funcionalidades listas para usar, lo que no necesariamente es beneficioso, ya que dependiendo de la aplicación, esta puede no requerir las mismas en su totalidad. React, por su parte, permite en este sentido tener un tamaño más adecuado con respecto a las necesidades de la aplicación.

 

Otros

Angular 2 y React tienen una grandes comunidades que cada vez crecen más. Además, están respaldados por Google y Facebook respectivamente, lo que implica que es casi seguro que ambos persistan por mucho tiempo.

React tiene una innovadora manera de manejar la actualización de las vistas mediante un DOM virtual, mientras que Angular 2 tiene el llamado two-way binding. En términos de rendimiento React era superior a Angular 1, pero ahora con la versión 2, ambos son competitivos. Todavía está por verse cómo será la versión de Angular 2 una vez que sea el lanzamiento oficial.

El debugging en Angular 2 es en tiempo de ejecución y tiende a entregar menos información que el de React, que es en tiempo de compilación. Por ejemplo, en React no compila si hay un error de sintaxis y se indica la línea en la que se encuentra el mismo, en cambio en Angular 2 sí compilaría y no entregaría la misma información.

Finalmente, dejo una tabla comparativa con algunas características que pueden ser de ayuda al momento para evaluar la alternativa a escoger.

 

Attribute Angular 1 Angular 2 React
Author Google Google Facebook
Language JavaScript/HTML TypeScript JSX
Size 143K 566K 144K
Churn Reduced Reduced High
Tooling Low High High
Code Design JS into HTML JS into HTML JavaScript centric
JavaScript "Fatigue" Less Less More
DOM Regular DOM Regular DOM Virtual DOM
Learning Curve High Medium Low
Packaging Weak Medium Strong
Abstraction Weak Strong Strong
Debugging General Good HTML/Bad JS Good HTML & JS Good JS/Bad HTML
Fails When? Runtime Runtime Compile-time
Binding 2 way 2 way Uni-directional
Component Model Weak Strong Medium
Mobile? Ionic Framework Ionic Framework React Native
MVC? Yes Yes View
Rendering Client side Server side Server side

http://tutorials.pluralsight.com/front-end-javascript/angular-vs-react-a-side-by-side-comparison

 

Fuente