ReactJS, la biblioteca JavaScript para ‘front-­end’ desarrollada por Facebook

Son ya muchas las ocasiones en las que en BBVAOpen4U nos hemos acordado de JavaScript como ese lenguaje de programación que lo está cambiando casi todo. Desde hace dos años, el boom en todo lo referente a esta sintaxis ha sido enorme, con el lanzamiento de infinidad de librerías para la parte de front-end de los proyectos digitales, en concreto para el desarrollo de aplicaciones. Un ejemplo perfecto de este crecimiento es ReactJS, una librería JavaScript para el diseño de aplicaciones de una sola página o SPA (en inglés Single Page Application).  

Una de las ventajas de ReactJS con respecto al resto de librerías es que detrás de ella se encuentra una de las compañías más importantes del mundo. Casi no necesita presentación. ReactJS es una librería en JS desarrollada por los ingenieros de Facebook para facilitar a los desarrolladores el diseño de interfaces que cumplan con los mejores estándares de experiencia de usuario. Por ahora es una biblioteca que va por la versión 0.10.7 y tiene una licencia de código abierto. 

Algunas características importantes de ReactJS:

●      Es una biblioteca JavaScript, no un marco de desarrollo en JavaScript. Por tanto ReactJS no compite en el mismo mercado que otras soluciones como AngularJS, EmberJS o BackboneJS de las que ya hemos hablado aquí más de una vez. Sería una herramienta para interfaces similar a Knockout.js.  

●      ReactJS se encarga solo de la vista de la aplicación dentro de un paradigma Modelo-Vista-Controlador. Ahora bien, los ingenieros de Facebook recomiendan el uso de ReactJS junto a Flux, la arquitectura que la red social utiliza para crear aplicaciones web por el lado del cliente. En ese caso, se pasa de un modelo MVC a un flujo de datos unidireccional. La idea es bastante sencilla: los datos de la aplicación fluyen en una sola dirección.

●      Suele ser habitual la combinación de ReactJS con otro tipo de bibliotecas o marcos de desarrollo en JavaScript como los ya mencionados.

●      Actualización parcial del DOM con cada cambio de la vista. Con cada alteración se modifica un DOM virtual, que permite que el DOM real solo cambie en las partes que han experimentado alteraciones. Mejora el consumo de memoria y el rendimiento con respecto a otros frameworks.

●      Ya hemos contado que el uso de los componentes se ha convertido en una tendencia interesante dentro del desarrollo de aplicaciones. La gran ventaja es que luego esos componentes se puedan reutilizar en otros desarrollos posteriores. ReactJS es una librería perfecta para ese nuevo enfoque.

●      ReactJS ofrece una alternativa llamada JSX, una extensión de la sintaxis JavaScript que tiene una apariencia similar al lenguaje de marcado XML. Es un lenguaje orientado a objetos de tipo estático diseñado para su ejecución en todos los navegadores modernos. La gran ventaja de este lenguaje de programación es que es conciso y sencillo para la definición de las estructuras de árbol mediante los atributos. Además, la compilación del código es rápida, tanto para dispositivos iOS como Android.

●      ReactJS funciona con el nuevo estándar ECMAScript v6 para JavaScript.

●      Curva de aprendizaje corta para desarrolladores en JavaScript.

Más sobre Flux como arquitectura para ReactJS

Las aplicaciones desarrolladas con Flux tienen tres componentes a partir de las acciones (actions) que se producen en las aplicaciones durante la navegación de los usuarios: selección de items, interacción con botones o menús… Con cada uno de esos movimientos de navegación se genera un evento en JavaScript. ¿Qué hacen cada uno de los elementos de una app con Flux a partir de ese evento?

●      Dispatcher. Se encarga de gestionar todos los eventos provocados por la navegación de un usuario y la creación de distintas acciones. De esas acciones se puede desprender una reacción o todo lo contrario.

●      Store. Acumulan los datos necesarios que luego provocan una modificación en la vista que ve el usuario en la app. Conectan el Dispatcher y las vistas.

●      View. Es el resultado visual del lanzamiento de eventos y cambio de datos.

Cómo empezar a funcionar con ReactJS

Para trabajar con una librería como ReactJS es indispensable tener instalados en la máquina tres elementos: Grunt, una librería JavaScript para configurar tareas automáticas que ahorren tiempo y costes en el desarrollo de apps; Node.js, un entorno en tiempo de ejecución por la capa del servidor; y NPM (Node Package Manager), el sistema de instalación de módulos cuando se está usando Node.js.

La instalación de Grunt con NPM:

$ sudo npm install -g grunt
$ sudo npm install -g grunt-cli

ReactJS tiene dos dependencias:

●      Browserify: un paquete popular dentro de NPM. Es una herramienta que permite al desarrollador gestionar dependencias por el lado del cliente. Facilita la instalación y configuración de módulos a través de un bundle.

●      Babel: un compilador de código a código para JavaScript. Lo que permite es transformar ECMAScript 6, la última versión del lenguaje ECMAScript, en ECMAScript 5, que a diferencia de ES6 sí tiene soporte en los navegadores. Es la única forma posible de aprovechar las ventajas de ES6 sin problemas. La instalación de Babel se realiza a través de NPM con este comando:

[sudo] npm i -g babel

Para definir esas dependencias, el fichero package.json debe ser algo similar a esto:

{
  “name”: “hello-react”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1″
  },
  “author”: “[TU NOMBRE AQUÍ]”,
  “license”: “ISC”,
  “devDependencies”: {
    “6to5ify”: “^4.1.1”,
    “grunt-browserify”: “^3.3.0”
  },
  “dependencies”: {
    “react”: “^0.12.2”
  }
}

La página tipo de una aplicación en ReactJS:

<!DOCTYPE html> 
<html lang=”en”> 
  <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>Bootstrap 101 Template</title>

    <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
    <!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
    <!–[if lt IE 9]>
      <script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js“></script>
      <script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js“></script>
    <![endif]–>
  </head>
  <body>
    <h1>Mi primer componente de React dice:</h1>

    <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js“></script>
    <!– Include all compiled plugins (below), or include individual files as needed –>
    <script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script>

  </body>
</html>

Y así sería el archivo main.js:

var React  = require(‘react’);

React.render( 
  <p> Hola, fanáticos de ReactJS!! </p>,
  document.getElementById( ‘root’ )
);

Síguenos en @BBVAAPIMarket