Aplicando REACT en nuestros desarrollos de front

[English version]Este enlace se abrirá en una ventana nueva

Cuando, hace unos días, os hablaba acerca de la adaptabilidad y mantenimiento, hacía, entre otras cosas, referencia a que aplicamos una serie de patrones y pautas en la forma en la que abordamos nuestros proyectos y productos.

Lógicamente es un tema muy amplio porque más allá del manido hay que hacer las cosas bien, la definición de lo que está bien es muy subjetiva, depende del individuo, de lo que estamos haciendo e incluso de la tecnología subyacente. Por todo esto hoy me quería centrar, en exclusiva, en lo que es nuestra forma dentro del desarrollo frontend (Web) y en particular como abordamos los proyectos con ReactEste enlace se abrirá en una ventana nueva.

¿Por qué React?

He de reconoceros que la respuesta no es fácil. Si bien es cierto que, dentro de Proxia®, soportamos cualquier tipo de framework o librería de frontend (Angular, Vue, …) no lo es menos que hay que tomar decisiones con el objeto de garantizar esa capacidad de mantenimiento a futuro que nos caracteriza.

Podía haber optado por otra cosa, pero, la verdad, es que en aquel momento me pareció la mejor decisión desde el punto vista de agregación y composición de servicios diversos dentro de un portal web, ofreciéndome un equilibrio de características que me parecían básicas tales como: uso en el mercado, funcionalidad, menor dogmatismo – más grados de libertad – y una mayor simplicidad a la hora de definir un frontend no monolítico y orquestado desde la capa de backend.

En cualquier caso, las decisiones no son inamovibles y menos en un mercado tan cambiante como el tecnológico en el que la frase de Heráclito sobre el cambio y la permanencia tiene una aplicación perfecta.

¿Qué React?

Vaya pregunta, ¿no? React es React. Bueno, si y no, ya sabéis que tenemos dos visiones alternativas la funcional y la basada en clases. En nuestro caso opté por una aproximación funcional utilizando, por tanto, hooks y componentes.

Esta decisión la apoye en dos aspectos. Por una parte, en que la propia tendencia de evolución de React apuntaba en esa línea y, por otra, en que se trata de una aproximación a mi juicio más ligera y, por tanto, más fácil de comprender.

En cualquier caso, soy totalmente consciente de que esta aproximación funcional no es perfecta, que gestiona de forma un tanto obtusa algunos conceptos y que la ligereza va en contra, muchas veces, de la claridad. Pero, como sabéis, en realidad, nunca hay soluciones perfectas, solo soluciones y lo importante es saber las limitaciones de las mismas.

¿Cómo lo usamos?

La verdad es que no ha sido un camino fácil ni en línea recta. Hemos pasado por varios estadios de evolución hasta llegar a un escenario como el que os represento en la siguiente figura.

Arquitectura_global_esArquitectura_global_es

Como podéis comprobar nos encontramos con una serie de servicios transversales que incluyen:

  • Soporte multidioma/multivariante construida sobre 18next Este enlace se abrirá en una ventana nuevay apoyada por las capacidades de gestión de idiomas y traducciones de Proxia®.
  • Una capa básica de acceso a red sobre el API estándar de fetch, con el objetivo de aportar ciertas funcionalidades tales como: soporte CSRF; operaciones de vida larga en servidor – una petición que pueda durar incluso minutos –; simplificación en el envío de datos al servidor – encapsulación como queryString, JSON o multipart – y conexiones WebSocket.
  • Una librería con un conjunto de servicios básicos: hooks de acceso a red, componentes de formulario – fechas, ficheros, select multiple, grupos, … - y motor de enrutamiento optimizado para un entorno de portal – multi servicio –.

Sobre estos servicios transversales se construye, por tanto, la parte específica de cada proyecto, en la que seguimos un esquema como el siguiente:

Detalle_servicio_esDetalle_servicio_es

Entrando en detalle, nos encontraríamos con:

  • Utilizamos TypeScript Este enlace se abrirá en una ventana nuevapara la construcción del proyecto, básicamente porque es un lenguaje tipado y nos ofrece las ventajas de un contrato claro y bien definido.
  • El modelo que representa a través de clases, enumeraciones e interfaces todos los tipos de objeto con los que nuestra aplicación va a poder trabajar.
  • La capa de API de red apoyada en la definición en OpenAPI Este enlace se abrirá en una ventana nuevade los endpoints del servidor. Esta capa nos permite autogenerar tanto código para el acceso a dichos endpoints como interfaces que representan la información que el servidor espera de nosotros.
    ¿Por qué interfaces? Para no condicionar la definición del modelo y que éste tenga verdaderamente sentido. Facilitando, así, la aplicación de principios SOLID en nuestros desarrollos.
  • La capa de control / interacción que utiliza el API de red para actuar sobre el modelo, permitiendo: su persistencia en memoria, la recuperación de datos del servidor, el envío de modificaciones al mismo, etc. En esta capa hacemos el acceso directo a esa información o bien incluimos sistemas adicionales como Redux-Saga para articular todo esto.
  • La vista limitada a pintar lo que se le dice desde el control / interactor y a actuar sobre el modelo a través de funciones proporcionadas por dicha capa de interacción.
    Esta vista, a su vez, la tenemos dividida entre la parte REACT específica y la parte de estilos basada en SASS y ajena a la parte JavaScript. Si me preguntáis el porqué, os diré que es, nuevamente una opinión personal, entiendo la ventaja de generar todo en javascript, pero no me huele bien… prefiero una separación de conceptos más clara.
  • Una capa de routing que controla las pantallas de nuestra aplicación y que, a efectos prácticos, invoca a un control / interactor u otro en función de la decisión de navegación del usuario.

Como podéis ver, en realidad, no estamos inventando nada nuevo, simplemente aplicamos conceptos y arquitecturas ya conocidas a un entorno como el de desarrollo Web.

Pero, claramente, el uso consciente y controlado de una forma de trabajar bien definida nos permite ofrecer a nuestros clientes una garantía en cuanto a mantenimiento de nuestras soluciones y una facilidad en la incorporación futura de nuevos cambios.

Si te interesa lo que hacemos y lo que podemos hacer juntos no dudes en aplicar a nuestras ofertas de empleo.

Créditos

Los iconos empleados son cortesía de Flaticon