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 :)