Introducción a ReactJS.

.

El frontend está desarrollado con ReactJS una librería JavaScript para el diseño de interfaces de usuario con un diseño modular basado en componentes. En lugar de escribir densos archivos de código podemos escribir varios trozos más pequeños y reutilizables, esto nos proporciona una forma sencilla y rápida de desarrollar aplicaciones de una sola página (SPA).

Características principales de ReactJS.

JSX es una extensión de JavaScript que fue escrita para ser utilizada con React. Su sintaxis muy parecida a HTML. Cuando decimos que JSX es una extensión de JavaScript quiere decir que no es un JavaScript válido, los navegadores no pueden leerlo. Si un fichero JavaScript contiene JSX entonces este debe compilarse. Esto significa que antes de llegar al navegador un compilador traduce el JSX a JavaScript.

SPA(aplicaciones de una sola página). Como su propio nombre indica es una aplicación en la que todo el contenido y las vistas son cargadas en la misma página. Esto rompe con la arquitectura y la forma de construir aplicaciones web a la que estábamos acostumbrados en las que por cada cambio que hacía que el navegador mostrara un página diferente. Las SPA no sólo permiten mejorar la experiencia de usuario si no que permiten un mantenimiento más sencillo y una reducción significativa en cuanto al almacenamiento de datos.

VIRTUAL DOM La manipulación del DOM (Document Object Model) es la arteria principal de las web interactivas. Desgraciadamente es también mucho más lento que la mayoría de las operaciones JavaScript ya que la mayoría de frameworks lo actualizan más de lo necesario. Aquí es donde React hace su magia. Podríamos considerar el DOM VIRTUAL de React como una copia ligera del DOM. Cuando un elemento se renderiza el VIRTUAL DOM se actualiza completamente y React lo compara con el DOM real actualizando únicamente los elementos del DOM que han cambiado.

ROUTING Cuando desarrollamos una SPA la parte difícil llega cuando hablamos del enrutado ya que sólo existe una página y lo único que cambia es el contenido, debemos asegurarnos de que la url que mostramos en barra de direcciones se corresponde con el contenido y el botón de atrás de la navegación funciona correctamente. Necesitamos mapear las url a páginas que no son físicas, si no a componentes de vista. Para ello hacemos uso de ReactRouer librería de JavaScript

Instalaciones necesarias.

• Lo primero, un sistema de gestión de paquetes, en este caso hemos instalado npm, este gestionador de paquetes nos permitirá instalar tanto librerías externas, como componentes externos de React.

• Por otro lado, para poder gestionar el enrutado de paquetes, hemos decidido instalar Browserify, este paquete nos permite realizar require de cualquier modulo que tengamos instalado de forma rapida.

    var [nombre] = require('nombreModulo');
    var [nombreComponente] = require('[nombreModulo]').[componente];

• Por ultimo, como compilador, es necesario instalar Babel, como hemos mencionado anteriormente necesitamos traducir el código JSX a JavaScript para que pueda ser interpretado por el navegador.

Componentes externos utilizados

• React-Foundation
• React-Fa
• React-Router
• React-DOM
• React_Notification-System
• Fixed-data-table
• jQuery

Estructura de la aplicación.

La aplicación corre sobre el puerto 3000, React se encarga de dejarnos una arquitectura que nos permite definir módulos visuales para poder representar la interfaz de la aplicación.

Su desarrollo es imprescindible ya que es la manera que tiene el usuario de mandar instrucciones al core de MCloud como podemos ver en el diagrama que se nos muestra en la [figura 11], tiene un diseño muy básico que satisfaga a pantallas de baja resolución.

• Index: Punto de entrada de la aplicación. (SPA)

• Principal: Pantalla principal donde se encuentran los botones iniciales.

• Peticiones: Pantalla de solicitud de una nueva búsqueda en el sistema o al servidor, esta pantalla esta compuesta de dos componentes:

  1. NameForm: Componente donde se encuentra el formulario de petición de nuevas búsquedas.

  2. Table: Componente que muestra los datos almacenados en el sistema en referencia al elemento que se esta buscando.

  3. Result: Pantalla que muestra el contenido de resultado seleccionado de la tabla.

• Correo: Pantalla en la que podemos visualizar la bandeja de correos y enviar uno nuevo.