En los últimos posts vimos qué nos ofrece ReactJS a otras librerías para desarrollar interfaces de usuario con Javascript y construimos un componente de ejemplo con ReactJS para hacernos una idea de cómo trabajar con ReactJS.

Como ya vimos al crear el componente de ejemplo, ReactJS permite utilizar una sintaxis especial llamada JSX para generar las vistas, y es necesario realizar de alguna forma la conversión de este JSX al código Javascript puro que se encargará de construir el DOM. Esto se puede hacer directamente en el browser, pero es preferible hacerlo durante la «compilación» de la aplicación para minimizar el impacto en los clientes que accedan a nuestra aplicación web.

En este post vamos a ver cómo podemos aprovechar herramientas basadas en node.js para crear un flujo de trabajo basado en grunt que nos facilite el desarrollo de aplicaciones ReactJS.

Browserify

Browserify es una herramienta que permite organizar una aplicación Javascript en varios archivos y referenciar unos desde otros a través de require('module'), como si se tratase de una aplicación para node.js.

Browserify se encargará de unir estos archivos de manera «inteligente», es decir, incluyendo sólo los módulos necesarios en el orden adecuado, y generar un único fichero listo para ser utilizado en el browser, ya sea incluyéndolo directamente en la página o a través de alguno de los sistemas de carga de módulos (AMD, CommonJS, UMD, etc.).

Para nuestro ejemplo vamos a usar browserify junto a grunt, por lo que deberemos instalar las siguientes herramientas:

npm install grunt-cli -g
npm install grunt --save-dev
npm install grunt-browserify --save-dev
npm install grunt-contrib-watch --save-dev

Técnicamente, la última dependencia no es necesaria, pero nos resultará útil para detectar automáticamente cambios en el código fuente y recompilar la aplicación.

Con esto instalado, podríamos crear un fichero de configuración para grunt como éste:

/*global module, require */

module.exports = function(grunt) {
  var srcFiles = ['Gruntfile.js', './lib/**/*.js', './specs/**/*.js'];
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),    
    browserify: {
      build: {
        options: {
          standalone: "app"
        },
        src: './lib/index.js',
        dest: './dist/app.js'
      }
    },
    watch: {
      dev: {
        files: srcFiles,
        tasks: ['browserify'],
        options: { spawn: false }
      }
    }
  });
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['browserify']);
  grunt.registerTask('dev', ['watch']);
};

Ya vimos en su momento cómo configurar grunt, así que nos centraremos en la configuración de browserify.

En la configuración del task de browserify debemos indicar el archivo que contiene el «punto de entrada» a nuestra aplicación. A partir de él, browserify irá analizando los módulos importados y detectará automáticamente todos los archivos que necesita incluir en el resultado final. También debemos indicar el nombre del fichero de salida, en este caso ./dist/app.js y el «tipo» de resultado que queremos generar, en este caso app para indicar que será un script que incluiremos directamente en una página sin utilizar ningún sistema de carga de módulos.

Además hemos añadido un task watch (y un alias dev para ese task) que se encarga de detectar cambios en los fuentes y relanzar el proceso de compilación, haciéndonos la vida un poco más cómoda durante el desarrollo.

React-Tools

Lo que hemos visto hasta ahora es completamente genérico y podemos utilizarlo para cualquier tipo de aplicación. Si queremos desarrollar una aplicación con ReactJS, vamos a necesitar instalar algunos paquetes más:

npm install react --save-dev
npm install react-tools --save-dev
npm install grunt-react --save-dev

react es el módulo npm de ReactJS. Sería equivalente a incluir el script de ReactJS en la página, pero nos permite usarlo al «estilo node.js» usando un require('react') desde los archivos que luego pasaremos por browserify.

react-tools contiene, entre otras cosas, herramientas para transformar el código JSX en código Javascript, y grunt-react contiene todo lo necesario para integrar react-tools con grunt.

Con esto instalado, podemos modificar la configuración de browserify en grunt para incluir la transformación de los JSX:

  // ... el resto de la configuración no cambia
  browserify: {
    options: {
      transform: [ require('grunt-react').browserify ]
    },
    build: {
      options: {
        standalone: 'app'
      },
      src: './lib/index.js',
      dst: './dist/app.js'
    }
  },
  // ... resto de configuración

Escribiendo el código

Todo esto está muy bien, pero llevamos un rato y no hacemos más que instalar herramientas. ¿Cómo se escribe el código ahora que hemos montado todo esto?

Si volvemos al ejemplo de ReactJS que vimos en el post anterior, ahora podríamos partirlo en tres ficheros y organizarlo un poco (esto es, claramente, innecesario en un caso tan simple como éste, pero bueno).

En un primer fichero podemos definir el componente para mostrar un único elemento de la lista y dejarlo en un fichero BeerItem.js:

/** @jsx React.DOM */

var React = require('react');

var BeerItem = React.createClass({
  // ... código del post anterior
});

module.exports = BeerItem;

Utilizamos el típico sistema de módulos de node.js, con su require para acceder a otros módulos y su exports para definir lo que exporta este módulo. Es importante recordar que cada fichero debe empezar con la directiva /** @jsx React.DOM */ para que el preprocesador de ReactJS sepa cómo tratarlo.

La estructura del código para la lista completa (BeerList.js) es similar:

/** @jsx React.DOM */

var React = require('react');
var BeerItem = require('./BeerItem.js');

var BeerList = React.createClass({
  // .... código de post anterior
});

module.exports = BeerList;

Aquí además del módulo react que instalamos antes, estamos referenciando el módulo BeerItem que acabamos de crear.

Para finalizar, tendríamos el fichero index.js con el punto de entrada de la aplicación:

/** @jsx React.DOM */

var React = require('react');
var BeerList = require('./BeerList');

React.renderComponent(<BeerList/>, document.getElementById('content'));

Ahora para compilar el resultado final, podemos ejecutar grunt, y si queremos que se ejecuté automáticamente cada vez que cambiamos algo, grunt dev.

Tenéis el proyecto completo en github por si queréis jugar un rato con él.

Resumen

La sintaxis JSX usada por ReactJS para mezclar Javascript y HTML es algo que puede causar rechazo, sobre todo a los que estén muy preocupados por el rendimiento de las páginas y la comodidad a la hora de trabajar.

Con el conjunto de herramientas que hemos visto en este post no hay que sacrificar rendimiento al cargar nuestras páginas parseando el JSX (cosa que, por ejemplo, si ocurre con las directivas de angularjs) y podemos conseguir un flujo de trabajo muy cómodo a la hora de desarrollar.