Menu

NGRX VS NGXS VS AKITA

testingdemos - December 06, 2018 por Carlos Rojas

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

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

¡Compártelo!