Las mejores 10 opciones para manejar nuestros estados en el Frontend

En los últimos años, con un Frontend con mayor lógica, se han ido creando formas de gestionar los datos. Si nos centramos en la era Post-Flux, ¿cuáles son las librerías o sistemas más utilizados?

Hace unos años, FLUX se había convertido en el estándar para gestionar los estados con Reactjs. Esta forma de trabajar con su estructura de Actions, Dispatchers, Reducers… crearían un estándar que se aplicarían a sucesivas librerías para multitud de aplicaciones.

De las bases de esta librería, obtendríamos Redux, que posiblemente sea la librería que todo el mundo conoce. Pero actualmente, dependiendo del tipo de proyecto donde estemos y el framework/librería que estemos usando, tendremos unas opciones u otras.

Las diferentes opciones que tendríamos para nuestro proyecto genérico, serían:

• Sin librería: para aquellos proyectos sencillos y sin una complejidad gestionada desde el frontend, podría darnos la posibilidad de gestionar los datos sin tener que añadir otras librerías.
• Personalizada: en algunos casos, podremos elegir crear nuestro propio sistema para gestionar los estados y/o datos de la aplicación.
• Subjects de RXJS: en algunos casos, sobre todo en aplicaciones sencillas y medias de angular, podremos optar a utilizar los Subjects para poder tratar los datos y pasar la información a nuestros componentes de una forma más global.

• Redux: aconsejada para aplicaciones de tamaño, al menos, mediana o grande, es la solución genérica para cualquier librería/framework que estemos usando en el frontend.

• AKITA: parecido a redux, pero más sencillo evitándonos las actions y dispachers.
• Mobx: funcionalidad parecida a Redux, pero más sencilla de utilizar, aconsejada para proyectos pequeños con React o Vue.

• Específicos para un framework:
  • Angular
    • NGRX: aplicación de Redux orientada a Angular

• • • NGXS: similar a NGRX pero con una estructura y forma de trabajar más parecida a como trabaja Angular

• • React
    • Context: Nos lo facilita React en las últimas versiones, lo que nos facilitaría en no utilizar Redux en aplicaciones más sencillas
  • Vue
    • Vuex: aplicación de Redux con Vue

Una vez revisadas las opciones más importantes para gestionar nuestros estados, los puntos importantes que deberemos tener en cuenta a la hora de seleccionar alguna de ellas serían:

• Tamaño de la aplicación
• Librería y/o framework de renderizado: React, Angular, Vue, Svelte…
• Conocimientos del equipo que va a desarrollarlo y va a mantenerlo

Nunca tendremos una opción perfecta para todos los casos, ni la mejor opción será la más óptima, si luego nadie puede dar soporte y/o evolucionar el proyecto. “Todo es muy difícil antes de ser sencillo” (Thomas Fuller).

 

Enlaces:

• https://facebook.github.io/flux/
• https://es.redux.js.org/
• https://www.ngxs.io/
• https://es.reactjs.org/docs/context.html
• https://ngrx.io/
• https://vuex.vuejs.org/
• https://github.com/datorama/akita
• https://github.com/mobxjs/mobx
• https://rxjs-dev.firebaseapp.com/guide/subject
• https://medium.com/javascript-in-plain-english/similarities-and-differences-between-vuex-and-redux-by-developing-an-application-be3df0164b22