ReactJS, la librería Javascript open-source para crear interfaces de usuario SPA

Desde hace años ya se auguró que JavaScript sería el lenguaje ensamblador del futuro debido a su amplio y creciente uso, y hoy podemos reforzar esa afirmación sin temor a equivocarnos. Además, al no tener un conjunto de librerías base ni reglas estrictas para su uso, ha dado lugar a que la comunidad se tome estos aspectos por su cuenta.

Podemos encontrar cientos de librerías JavaScript para cientos de propósitos, pero hoy vamos a ver ReactJS, una librería que comenzó a ser desarrollada por Jordan Walke, un ingeniero de Facebook, y que actualmente es mantenida por Facebook, Instagram y colaboradores de la comunidad del software libre.

¿Qué es ReactJS?

ReactJS es una librería cuyo objetivo es crear interfaces de usuario enfocadas a aplicaciones de una sola página (SPA, Single-Page Applications), es decir, en el modelo vista controlador (MVC) se encargaría de la Vista únicamente.

Pretende ayudar a los desarrolladores a crear aplicaciones de gran envergadura que usen datos variables en el tiempo y su objetivo es ser simple, declarativa y componible. Como se dijo, se ocupa sólo del ámbito visual, por lo que suele usarse en combinación con otras librerías JavaScript que proporcionen el resto de funcionalidad (como Backbone) e incluso es posible integrarlo en Frameworks más elaborados como AngularJS mediante pugins.

¿Por qué utilizar React?

Hay cientos de Frameworks y librerías que nos ofrecen las funcionalidades de React, entonces, ¿cuál es el motivo por el que deberíamos elegirla? Aquí es donde viene el punto fuerte, React tiene un motor de renderizado más eficiente que los demás.

Frameworks como AngularJS se basan en el patrón MVVM (Model-View-ViewModel) para desacoplar la interfaz de usuario del resto de la aplicación. Este modelo, como sabréis, es una variación del clásico MVC dónde el controlador ya no es responsable de transferir los datos del modelo a la vista, en su lugar este proceso se realiza mediante databindings (enlaces a datos). Esto hace que el controlador pase a llamarse ModeloVista, ya que ahora su función se limita a implementar el comportamiento de la vista y facilitar la presentación de los datos provistos por el binding.

Este modelo tiene muchos puntos positivos, primordialmente la posibilidad de establecer los componentes a actualizar de manera declarativa, pero una gran desventaja: Es muy difícil conocer de antemano las consecuencias de cada cambio, ya que una respuesta del usuario puede provocar un cambio en el modelo, que a su vez afecte a otros controles que estos a su vez vuelvan a modificar el modelo y así sucesivamente.

ReactJS pretende solventar este problema generando los controles a partir del modelo únicamente (sin retroalimentación). Esto a primera vista puede parecer muy ineficiente, pero aquí es donde donde vemos su perla: React incluye un modelo virtual de la página en memoria (VirtualDOM), que mediante una librería es comparado con el DOM real de la página. Esto permite que las modificaciones sobre el DOM real se minimicen, ya que sólo cambiara lo que difiera del DOM virtual (en el cuál recaerá la carga).

Además, React diferencia 2 tipos de información en cada componente: props (propiedades) y state (estado). Las primeras serán inmutables y establecidas a la hora de crear el componente, por lo que si se necesita cambiar, el componente deberá crearse de nuevo con las nuevas propiedades en el DOM Virtual. El state es la información gestionada y modificada por el componente, y cada vez que esta es alterada, React se encarga de re-renderizar la vista del mismo.

Novedades de la última versión

La última versión de esta librería fue presentada en la conferencia ReactEurope (celebrada los días 2 y 3 de este mismo mes) y mantiene la API casi intacta. La versión anunciada es una Beta que trae consigo 2 grandes cambios: División del paquete principal y Referencias a nodos DOM.

El paquete principal react ha sido dividido en 2 subpaquetes: react y react-dom. Esta división ha sido introducida para seguir la filosofía de simplicidad y elegancia que propulsó a React. En el subpaquete react encontramos funciones y helpers relacionados con componentes y elementos, mientras que en react-dom encontramos utilidades para el renderizado y alguna novedad como soporte para el renderizado del lado del servidor.

La segunda novedad es que se ha modificado algunos aspectos correspondientes a las referencias a nodos DOM, sustituyendolas en la mayoría de los casos por el objeto DOMnode directamente.

Os animo a que probéis esta librería y comentéis vuestra experiencia.
COMPARTE ESTA NOTICIA

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP