En este blog hemos hablado en varias oportunidades acerca de Ngrx, Ngxs y Akita. Pero en esta ocasión te traemos un analisis a fondo para que decidas tu proximo gestor de State Management en tus Apps con Angular.
En la actualidad las apps en Javascript estan adoptando soluciones de almacenamiento basados en Redux
, las cuales consistén de un Store, Selectores para obtener la información del Store en forma de Observables
y Actions
para modificar los datos del Store. Para hacer esto en Angular existén varias soluciones disponibles actualmente de la cual Ngrx
es la más popular pero Ngxs
y Akita
resultán ser opciones confiables y rapidas de aplicar. Entonces, ¿ Que solución debo aplicar ?
Opciones.
NGRX
Solución de manejo de estados construido sobre RxJs e inspirada en Redux. Sitio Web
NGXS
Solución basada en el patrón CQRS el cual es utilizado en librerias como Redux pero reduce el boilerplate
utilizando TypeScript
y sus caracteristicas de Clases y Decoradores. Sitio Web
Akita
Akita es un patrón de manejo de estados, construido sobre RxJs
, el cual toma la idea de multiples data stores de Flux
y las actualizaciones inmutables de Redux
asi como los principios de Observables
para crear flujos de datos. Sitio Web
Herramientas.
REDUX DEVTOOLS
Esta herramienta existe como un plugin en Chrome y Firefox. Esta permite a los desarrolladores ver el impacto de una acción en Redux y viajar en el tiempo entre estas acciones.
NGRX
Ngrx provee @ngrx/store-devtools
para Devtools. Esta trabaja bién. Su implemetación es facil agregando una linea al AppModule
.
StoreDevToolsModule.instrument()
¿ Te gusta este articulo ? No te pierdas ninguna actualización uniendote al newsletter.
NGXS
NGXS provee @ngxs/devtools-plugin
para Devtools. Esta sin embargo no soporta todas las funcionalidades, como por ejemplo saltar acciones o despachar nuevas acciones usando el Devtools. Su implemetación es facil agregando una linea al AppModule
.
NgxsReduxDevtoolsPluginModule.forRoot()
Akita
Akita es una solución que no utiliza exactamente el patrón Redux y por lo tanto tambien tiene una funcionalidad limitada en el Devtools. Provee @datorama/akita-ngdevtools.
Su implemetación es facil agregando una linea al AppModule
.
AkitaNgDevtools.forRoot()
SCHEMATICS.
NGRX
NGRX tiene schematics disponibles en @ngrx/schematics
este permite crear stores, caracteristicas de stores, reducers, acciones, componentes contenidos, efectos, entidades y todo con varias opciones.
NGXS
NGXS no ofrece schematics sin embargo ofrece un CLI
.
Akita
Akita soporta schematics a través de akita-schematics
. permite crear store, modelos, queries, y Servicios.
En resumén es algo como esto.
Tooling | Redux DevTools | Schematics |
NGRX | Si | Si |
NGXS | Limitado | No |
Akita | Limitado | Si |
BOILERPLATE CODE.
Esto se refiere a los archivos que tenemos que agregar a nuestro proyecto para agregar el codigo necesario en nuestro manejo de estados.
Boilerplate | Boilerplate code |
NGRX | Con más Boilerplate |
NGXS | Mediano |
Akita | El menor |
Dependencias y tamaño.
Esta se refiere al tamaño que le agregamos a nuestro proyecto instalando las dependencias que necesita cada solución a traves de npm
.
Tamaño | Non-production (MB) | Production (KB) |
Base | 14.6 | 754 |
NGRX | 14.9 | 786 |
NGXS | 14.8 | 778 |
Akita | 15.4 | 778 |
Comunidad.
Se refiere a la popularidad, el numero de contribuyentes y los tutoriales que puedes encontrar en las busquedas. Esto te asegura encontrar más soporte y librerias que puedan hacer tu desarrollo mas fluido.
Solución | Google Trends | GitHub stars | Contributors | Commits |
NGRX | 1ero | 1ero | 1ero | 1ero |
NGXS | 2do | 2do | 2do | 3ro |
Akita | 3ro | 3ro | 3ro | 2do |
Bueno ahora ya tienes más información para tomar tu proxima decisión arquitectonica. Este Post esta basado en este excelente analisis, esperamos que sea de ayuda y nos vemos en un proximo Post :)