Angular - Frontend State met ngrx-data & ngxs
Created with Sketch. Group 4 Group 10

Actueel Created with Sketch. Developers Blog

Frontend State met ngrx-data & ngxs

26-03-2018

Wanneer een frontend applicate steeds groter wordt, groeit het “state probleem” mee. Het kan snel onduidelijk worden waar data vandaan komt en waar de data naar toe gaat wanneer een gebruiker iets uitvoert.
Een ander facet van een grote applicatie is dat het moeilijker wordt om issues te reproduceren. Dit kan komen door het aantal stappen wat nodig is om bij de bug te komen, of door een fout waardoor een referentie direct wordt geupdatet.

Om dit probleem op te lossen zijn er oplossingen bedacht en aangeboden als library:

Flux & Redux

NGRX

Boilerplate, Boilerplate, Boilerplate

*EDIT*

Na op ngconf meerdere presentaties over NgRX te hebben gezien, zij me n een paar dingen over het “boilerplate” in NgRX duidelijk geworden.
Het belangrijkste is dat de actions, reducers en selectors geen boilerplate zijn, maar een declaratieve manier is om je data te beheren.
De term boilerplate doet af aan de toevoegingen die de structuur van NgRX je biedt.

*/EDIT*

De kracht van Flux komt helaas met een keerzijde: boilerplate.
In het begin moet je erg veel “droge” code schrijven, code waarmee je de verschillende principes van Flux aan elkaar verbind.
Het aanmaken van de Actions (alles wat een gebruiker kan doen) is veel werk in een grote applicatie of een bestaande applicatie die gemigreerd wordt. Naast Actions zal je ook Stores, Reducers en Dispatchers moeten maken. Nadat je dit hebt gedaan om bijvoorbeeld de data van een gebruiker te managen, zal je alles weer moeten aanmaken voor elke entiteit in je applicatie.

De kracht van deze techniek is dat alles heel volgbaar wordt in je applicatie, en dit maakt het het waard om Redux of NGRX toe te voegen aan je applicatie. Om het probleem van boilerplate op te lossen, kan je gebruik maken van een open source oplossing als ngrx-data of NGXS.

NGXS & ngrx-data

Beide libraries proberen het boilerplate probleem op te lossen, maar op verschillende manieren.
Waarbij NGXS een nieuwe state library is die gebruik maakt van TypeScript en zich focust op Angular, is ngrx-data een uitbreiding op NGRX zelf.

NGXS

NGXS wil de ideeen van het Flux Design pattern en CQRS toepassen in een Angular applicatie. Redux is gemaakt voor React, maar Angular biedt tools als Dependency Injection en TypeScript waar Redux geen rekening mee houdt.

NGXS is een andere state management library dan NGRX, omdat NGRX het Flux pattern zoveel mogelijk probeert te volgen. Dit zorgt voor de extra boilerplate, waarbij NGXS meer “lean” is door veel werk door Angular af te laten handelen.

Het nadeel is dat je controle verliest en dat de library niet alle use cases ondersteund. En als je dingen wilt die buiten de stijl van NGXS vallen zal je alsnog zelf iets moeten schrijven.

https://ngxs.gitbooks.io/ngxs/

ngrx-data

NGRX-data volgt een andere weg dan NGXS; waar NGXS leunt op Angular om de boilerplate weg te halen, is ngrx-data een library bovenop de NGRX library.
Het enige doel van ngrx-data is de boilerplate van NGRX weghalen waardoor je sneller kunt beginnen met het schrijven van de functionaliteit.

Omdat ngrx-data een kleine laag is op NGRX, mis je geen functionalitiet als je iets geavanceerders wilt maken dan ngrx-data aanbiedt.
Maar je zult alsnog de NGRX materie moeten snappen om deze library te gebruiken

https://github.com/johnpapa/angular-ngrx-data

Door: Gerhard Boer

Lees verder

Nieuws / 20-11-2018

Opinieartikel: Groot worden door klein te blijven

Page 1 Copy 3Lees verder

Blog / 16-11-2018

Blog: Hoe vergroot je de wendbaarheid van een organisatie?

Page 1 Copy 3Lees verder

Developers Blog / 14-11-2018

RefreshConf Groningen

Page 1 Copy 3Lees verder