ReactJS y ¿sus víctimas?

A la hora de elegir que tecnología usar en la parte front-end de una aplicación web no es tarea fácil. El auge de aplicaciones basadas en JavaScript en los últimos años ha crecido de forma imparable y con ello se han desarrollado multitud de librerías y frameworks.

Una de las últimas apariciones y que está causa gran revuelo es ReactJS. Esta librería fue creada por Jordan Walke, un ingeniero de software de Facebook en 2011 y un año más tarde se liberó el código. Dado que fue Facebook quien empezó a desarrollar esta librería, se utiliza en su red social en determinadas partes, como los comentarios. También en Instagram, tanto la parte pública como privada están desarrolladas con ReactJS. Otras aplicaciones fuera del ámbito de Facebook, como Netflix, Airbnb o Feedly están también utilizan esta librería para el desarrollo de sus aplicaciones.

¿Qué es ReactJS?

Es una librería de JavaScript para crear interfaces de usuario, ayudándonos a desarrollar aplicaciones SPA (Single Page Applications) de manera más eficiente. Normalmente se utiliza en el lado cliente, pero también se puede utilizar en el lado servidor, haciendo posible la creación de aplicaciones isomórficas.

Una aplicación Javascript isomórfica es aquella aplicación cuyo Javascript se puede ejecutar tanto el parte cliente como en la parte servidor. En la parte cliente mediante browser y en la parte servidor mediante node.js o io.js entre otros.

Fundamentos principales de ReactJS

Virtual DOM

Uno de los secretos de React para tener un rendimiento alto en la velocidad de renderizado de las vistas es la implementación de un DOM (Document Object Model) Virtual. Cada vez que renderizamos una vista, en vez de renderizar todo el DOM, guarda los cambios en una copia de memoria, un DOM virtual. Utilizando un algoritmo de diff compara las propiedades de la copia virtual con la versión actual de DOM, renderizando solo aquellas partes del DOM que han sido modificadas. De esta manera lo hace muy eficientemente, ya que sólo se realizarán las operaciones que sean estrictamente necesarias.

 One-way Data Flow      

La mayoría de frameworks para resolver el patrón MVVM (Model-View-ViewModel) utilizan un sistema de data-binding bidireccional, que se encarga de sincronizar automáticamente la vista y el viewmodel. Sin embargo, React utiliza un sistema de databinding unidireccional, es decir, los datos de la aplicación fluyen en una sola dirección.

Como hemos visto en el punto anterior, gracias al DOM Virtual, React conoce el estado de la aplicación, sabiendo cuando se han producido cambios o no. ReactJS sólo se preocupa de mostrar los datos actuales, enviar los datos nuevos y realizar las actualizaciones necesarias en el DOM cuando se realicen cambios en el modelo.

Para ello utiliza Flux, la arquitectura de la aplicación para desarrollar interfaces de usuarios que Facebook utiliza para desarrollar sus aplicaciones web del lado del cliente.

React Native

En 2015 Facebook anuncia un nuevo framework para crear aplicaciones nativas para Android e iOS, React Native. A diferencia de otras plataformas y frameworks como PhoneGap o Cordova, esta no es una aplicación web, sino que realmente es nativa (se puede compilar a través de Xcode y Android Studio).

¿Es ReactJs el nuevo sustituto de AngularJS? (también podríamos meter en el saco a BackboneJS, EmberJS…)

Con esta pregunta realmente estamos comparando la velocidad con el tocino. Ya que el alcance de cada uno no es el mismo, ni hacen lo mismo.

AngularJS es un framework basado en el patrón MVC (Model View Controller) para desarrollar aplicaciones SPA (Single Page Applications). Tiene todos los componentes necesarios para crear una aplicación de front-end y no depender de terceras librerías o frameworks.

ReactJS, sin embargo, es una librería enfocada al renderizado de las vistas. En el patrón de MVC, React es el encargado de la View. A diferencia de Angular, no dispone de routing, inyección de dependencias, comunicación con el servidor etc.

Uno de los motivos por los que está gustando React es que es una librería ligera que solo hace una tarea, se encarga del renderizar las vistas, y lo hace de manera eficiente y rápida. Para crear una aplicación completa hay que integrar librerías externas e integrarlas en nuestra aplicación, en caso de necesidad, modificarlas o cambiarlas por separado evita el que acabes acoplando todo tu código a la filosofía de una librería concreta.

Angular es una solución todo en uno, y cambiar cualquier pieza en su framework no es tarea fácil, ya que los componentes tiene una fuerte dependencia para que funcione correctamente. Además de su curva de aprendizaje, que al principio es bastante es dura. A pesar de ello, Angular dispone de una gran comunidad de desarrolladores, con mucha documentación y podemos encontrar soluciones en muchos foros y blogs. React, como quien dice, acaba de empezar.

Referencias:

https://facebook.github.io/react/

https://github.com/facebook/react/wiki/Sites-Using-React

https://facebook.github.io/flux/docs/overview.html

https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.ik2oi7f53

Descubre aquí todas las soluciones basadas en tecnología Microsoft que SOGETI pone a tu alcance.

Amaia Baigorri es Ingeniera Informática por la Universidad Pública de Navarra. Desde el 2011 trabaja dentro del mundo de la informática y en 2014 se incorpora a SOGETI España como programadora junior. Actualmente desarrolla funciones de programadora senior dentro de la Unidad de Soluciones Microsoft de Sogeti España.