Fundamentos tecnológicos

React

React es una librería de Javascript que nos permite de forma sencilla gestionar las vistas de una aplicación web a través de diversos elementos llamados componentes y directamente en el navegador, sin tener que servir todas y cada una de las páginas desde el servidor.

let HelloMessage = React.createClass({
 render: function() {
return <div>Hello {this.props.name}</div>
}
});
ReactDOM.render(<HelloMessage name=”John” />, mountNode)

React nos permite escribir nuestros componentes con una sintaxis muy parecida a HTML pero posteriormente traduce esta sintaxis a código javascript habitual por lo que podemos decir que estamos escribiendo páginas web únicamente con funciones de javascript.

La idea principal es reutilizar y agrupar componentes para formar lo que tradicionalmente llamamos vistas y que a su vez pueden tener un estado que son una serie de variables que pueden cambiar y que cuando cambian, React se encarga de volver a renderizar únicamente la parte de la vista que ha cambiado, por lo que es tremendamente eficiente.

Flux

Flux es una arquitectura para diseñar aplicaciones con React y que básicamente propone el siguiente esquema:

Arquitectura Flux

La vista formada por componentes dispara una serie de Actions al, por ejemplo, pulsar un botón que avisan a un Dispacher central que se encarga de enrutar estas acciones hacia las Stores correspondientes que disponen de la lógica con la que actualizar el estado con el nuevo cambio.

Si por ejemplo al pulsar este botón debería cambiar un texto que está en el componente, podríamos tener este texto en el estado con un valor vacío y que una vez se hace click, unha Action llama a una Store que se encarga de cambiar el texto en el estado y React se encarga de volver a pintar el nuevo valor del mismo.

Reflux

Flux es una arquitectura pero existen diversas implementaciones de la misma, en mi caso me he decido por Reflux, muy similar pero que no utiliza un Dispatcher central que enruta las acciones si no que todas las Stores están escuchando las acciones y reaccionan cuando tienen un método para responder a una de ellas.

Veamos un ejemplo:

Definiríamos la acción que queremos lanzar.

let TextActions = Reflux.createActions([
"updateText"
])

Crearíamos una Store que escuche las TextActions y que implemente una función onUpdateText que será la que recibirá el nuevo valor y actualizará el estado.

let TextStore = Reflux.createStore({
listenables: TextActions,
  init: function () {
this.state = ''
},
  getInitialState: function () {
return this.state
},
  onUpdateText: function (newText) {
this.state = newText
this.trigger(this.state)
}
})

Por último definir el componente. Deberá incluir una lista de mixins con la TextStore, tendrá un método render en el que definir lo que podríamos llamar informalmente “la plantilla” de lo que queremos renderizar y que incluye un link para cambiar el texto que se muestra.

Dicho link reacciona al click llamando al método handleChangeTextClick que lanza la acción para que la store la intercepte, cambie el estado y React se encargue de renderizar, solo lo que ha cambiado.

let EndReport = React.createClass({
mixins: [
Reflux.connect(TextStore, 'text')
],
  handleChangeTextClick: function () {
TextActions.updateText('Nuevo texto a renderizar')
}
render: function () {
return (
<p>{this.state}</p>
<a onClick={this.handleChangeTextClick}>Change text</a>
)
}
})

Estructura de la aplicación

Así por encima esta es la estructura que hemos decidido finalmente para la aplicación, aunque es posible que a medida que se avance en el desarrollo se realicen algunos ajustes.

-App
-Actions -> Ficheros con las acciones
-API -> urls del proyecto y del API
-Components -> Archivos con los componentes .jsx de la aplicación
-Models -> Clases .js que definen la estructura de elementos de la aplicación como los eventos o los deportes
-Services -> Servicios de comunicación con la BD (PouchDB)
-Stores -> Clases que contienen el estado y la lógica para modificarlo y para acceder a los Services
app.js
router.jsx
-Assets
-css
-fonts
-img
-style -> Archivos .js para definir los estilos de la aplicación
-__tests__ -> Archivos de test
index.html

Podéis ver más detalladamente la estructura en el proyecto de Github