¿Qué es React y por qué tiene tanto éxito?

A principios de la década de 2010, Facebook era dolorosamente consciente de que el tradicional sistema de conexiones entre vista y datos no era muy eficiente en webs que, como la suya, recibían miles de peticiones cada día. Esto provocaba cargas más lentas de lo deseable y una cantidad de recursos monstruosa que intentaban paliarlo.

Así que encargó a su equipo de ingenieros que buscaran una solución y, en 2011, Jordan Walke lanzó ReactJs.

A partir de entonces Instagram, BBC, Airbnb, Netflix, Dropbox… y prácticamente la mayor parte de los grandes proyetos de FrontEnd, han ido adoptando esta librería que se ha convertido en casi un estándar.

Pero… ¿Qué es lo que la hace tan buena renderizando contenido? ¿Cuáles son sus limitaciones? ¿Qué nos depara el futuro? Estas son sólo algunas de las cuestiones que intentaremos responder en este nuevo artículo de ¡Loopeando.com!

 

[resumen]

1. ¿Qué es React?
2. ¿Por qué es tan eficiente? El DOM Virtual
3. Más novedades: Arquitectura de componentes y flujo unidireccional
4. El ciclo de vida de los componentes
5. El ecosistema de React

[/resumen]

 

[titulo]¿Qué es React?[/titulo] [subraya_verde]React, también conocido como ReactJS, es una librería JavaScript diseñada para el desarrolo de UI (Interfaces de Usuario).[/subraya_verde] Con ella podemos realizar desarrollos complejos centrados en webs tipo SPA (Single-Page Application), es decir, webs capaces de ir variando y actualizando la información representada sin necesidad de recargarse ni emplear hipervínculos. Algo similar a lo que hacíamos con las llamadas Ajax.

React cumple por tanto la función «V» de un framework «MVC» (Modelo-Vista-Controlador). Eso quiere decir que, a diferencia de frameworks completos como Angular, React únicamente se centra en la construcción de las «Vistas» (interfaces), y necesita de otras herramientas para poder completar un proyecto completo.

Esto permite mucha flexibilidad a la hora de escoger nuestro propio entorno de trabajo, pudiendo por ejemplo elegir AngularJS o cualquier implementación de Flux (Redux, Fluxxor, Lux.js, Omniscent…) para el Modelo, y React para la Vista.

[titulo]¿Por qué es tan eficiente? El DOM Virtual[/titulo]

Imaginemos que queremos crear una aplicación en JavaScript para ver el pronóstico del tiempo en diversas ciudades. Cada vez que hacemos clic en una, se nos muestra el tiempo que hará en ese lugar durante la próxima semana.

Si realizásemos la API con JavaScript puro, cada vez que pulsásemos en una ciudad todo el DOM de navegador se renderizaría cargando todos los elementos de nuevo. ¿No sería más eficiente cargar únicamente los datos ampliados de la ciudad en la que hemos pulsado, sin tener que renderizar todo lo demás tras cada acción?

Eso es lo que se plantearon los chicos de Facebook, y esa es la razón principal de la existencia de ReactJs: Construir aplicaciones que usan datos que cambian todo el tiempo, y hacerlo eficientemente.

[subraya_verde]Para ello, esta librería utiliza JSX, una representación ficticia de HTML que permite registrar los cambios en un DOM virtual almacenado en memoria. Cada cambio que se realiza en un bloque de contenidos (componente), es almacenado en este DOM Virtual y, cuando debe renderizar, solo lo hará con los componentes alterados.[/subraya_verde] Si debe cambiar sólo la temperatura de una única ciudad, eso hará. Evitando así renders completos.

El DOM Virtual, a diferencia del común o de navegador, pesa muy poco, utiliza escasos recursos y al ser JavaScript se compila y renderiza  rápidamente.

 

[titulo]Más novedades: Arquitectura de componentes y flujo unidireccional[/titulo]

Los componentes son los ladrillos con los que construye React.

Consisten en entidades independientes y reusables que encapsulan código para generar piezas capaces de desarrollar una acción concreta. Cada salida de un componente interacciona con otro, al que nos referimos como componente hijo. Éste a su vez puede tener otros hijos generando así aplicaciones complejas en forma de árbol:

Es una forma fácil y práctica de organizar el código evitando así el código spaguetti.

Los componentes pueden compartirse y, de hecho, en la comunidad de React tenemos miles de ellos, todos Open Source y descargables a golpe de clic.

¿Que necesitamos un buscador? ¿Un sistema de login o un contador? Buscamos el componente en la galería y lo descargamos.

Al ser los componentes piezas encapsuladas, podemos sustituirlos fácilmente, inhabilitarlos, editarlos… y sabemos que cualquier error que se genere en ellos quedará limitado a ese componente y las salidas que genere, siendo así muy sencillo el debugging.

Esto nos lleva a otra de las características de React: Funciona con un flujo de datos unidireccional. ¿Qué significa? Cada componente pasa la información a sus componentes hijos y no al revés. Esto hace fácil el seguimiento de la información y la detección de errores en aplicaciones complejas.

 

[titulo]El ciclo de vida de los componentes[/titulo]

En ReactJs hay 2 tipos de componentes:

• Los Functional Components o Stateless: Son similares a las funciones de toda la vida.
• Los Class component o Statefull Component.

Un Class Component ha de contener, al menos, un state y un método render:

import React from "react";
class ComponentExample extends React.Component {
  state = {
    data = ""
  }
  render () {
    return (
      <h1>Hello World!</h1>
    )
  }
}
export default ComponentExample;

El state (estado) son los datos con los que queremos trabajar e incluso mostrar cuando el componente se renderiza. El método “render”, por otro lado, es responsable de describir cómo se tiene que ver dicho componente.

Pero los Class Component pueden tener muchos otros métodos conformando lo que se conoce como «El Ciclo de Vida» de los componentes.

Este ciclo de vida es vital para entender cuándo deben solicitarse datos a un servidor y cuándo los cargará. Así como cuándo es la manera más óptima de realizar determinadas acciones.

Los pasos esenciales del ciclo de vida de un componente son:

 

• Montaje

  • Constructor: Se establece la configuración inicial del componente.
  • Render: Genera la interfaz gráfica.
  • componentDidMount: Final de la etapa de montado. El componente ya ha sido renderizado en el DOM. Este es el punto donde deben realizarse las peticiones al servidor.

• Actualización

  • Render: Cuando se realiza cualquier cambio en el DOM virtual, se llama de nuevo al Render para mostrar esos cambios.
  • componentDidUpdated: Análogo al componentDidMount de la etapa de montaje. Se le llama tras terminar de renderizar y es cuando se vuelven a realizar las peticiones de cambio al servidor. Si las hubiese, vuelve a ejecutarse este ciclo: Render -> componentDidUpdated.

• Desmontaje

  • componentWillUnmount: Si algún componente ya no debe mostrarse, se llama a este método.

 

*Existen otros métodos más avanzados que pueden incluirse en el ciclo de vida, pero por ser este un artículo introductorio, se ha decidido omitirlos.

 

[titulo]El ecosistema de React[/titulo]

Como decíamos, React es una librería, no un framework. Esto quiere decir que en comparación con Angular o Ember, se queda a medio camino al no incluir la parte «M» de la arqutectura «MVC». Y, dependiendo de cómo trabajemos, puede que tampoco la «C».

Sin embargo, React puede crear aplicaciones completas si seguimos la arquitectura Flux (Ej: Redux.js), pues ésta puede encargarse del flujo de datos haciendo así que React, ahora ya sí, sea equiparable a un framework.

Pero no únicamente eso, las miles de librerías y aplicaciones disponibles para React, lo convierten en una herramienta tremendamente flexible y poderosa.

Especial mención merece React Native, otra herramienta del ecosistema que permite desarrollar aplicaciones en JavaScript que se compilan como nativas tanto en Android como en iOs.