Reactjs

Por José Manuel Cristóbal
Consultor Open Source en OpenSistemas

Reactjs es una librería javascript, de código abierto con licencia Apache 2.0, fue creada en 2013 por Jordan Walke, ingeniero de software de Facebook. Actualmente el código está mantenido por Facebook, Instagram y la comunidad de desarrolladores.

Cuando pensamos en crear una aplicación basada en HTML5 y javascript hay que valorar en qué librerías y frameworks apoyarnos.

ReactJS nos brinda grandes beneficios en el rendimiento, modularidad y proporciona un flujo claro de datos y eventos, facilitando el desarrollo de aplicaciones MVC complejas, tipo SPA (Single Page Applications).

ReactJS se centra en la visualización de nuestra aplicación, pudiéndola combinar con Framework MVC, como AngularJS o Backbone, dejándole a AngularJS o Backbone, como controlador y a ReactJS, como encargado de las vistas.

La ventaja de ReactJS consiste en el mejor rendimiento a la hora de manipular el DOM, donde consigue mejores resultados, cuando tratamos con largas listas, que cambian constantemente en nuestra visualización. Todo gracias a el uso de el Virtual DOM.

El generar directamente los elementos HTML y luego modificar el DOM es una operación lenta. Lo que hace ReactJS es generar un DOM en la memoria (Virtual DOM) y luego comparar las diferencias entre el DOM real y el virtual y, así, renderizar en el DOM real solo las modificaciones que se hayan encontrado.

Supongamos que tenemos una lista con mil elementos en nuestra interfaz y en ella sólo se van a producir seis cambios. Esto hace que ReactJS aplique esos seis cambios y luego localice los componentes que tuvieron un cambio en sus propiedades para, de esta manera, renderizar solo los seis elementos cambiados en vez de aplicar los seis cambios y renderizar los mil elementos de nuevo.

Hay un mayor consumo de memoria por el Virtual DOM y puede parecer más complicado, pero la sensación de rendimiento de cara al usuario es de una aplicación mucho más robusta.

ReactJS no usa un flujo bidireccional para el manejo de datos, al contrario, lo que ReactJS hace es manejar el flujo de datos en un solo sentido. Con esto se consigue planear y detectar de una manera más fácil los posibles errores que se puedan cometer en aplicaciones complejas, donde el flujo de datos pueda ser difícil de localizar.

La manera de trabajar de ReactJS es que cada componente (control) de ReactJS tiene un método llamado render que se dedica a generar el HTML, que corresponde a ese componente. Cuando se va generando este proceso se asocian manejadores de eventos a los elementos HTML para interpretar cuando ha habido un cambio y actuar sobre el modelo. Si se produce algún cambio que pueda afectar el estado del componente, este se vuelve a renderizar por completo.

ReactJS maneja dos tipos de información diferenciadas para los componentes, las propiedades (props) y las de estado (state). La principal diferencia es que el propio componente no varía las propiedades, pero los estados sí puede variarlos él mismo.

Todos estos cambios se pueden propagar de forma jerárquica según la estructura que tengamos de componentes. La información siempre fluye de componentes padres a componentes hijos.

Para transmitir un cambio de un componente hijo hacia un componente padre, podemos hacer uso de callback evitando el uso de eventos que, generalmente, son más complicados de seguir el flujo de ejecución.

En definitiva, con ReactJS podemos centrarnos solo en el manejo de la vista y en obtener un rendimiento muy superior, combinándolo con otros Framework en los que delegamos en ellos el modelo y el controlador.