Šta je State Management i da li nam je potreban u našoj aplikaciji?

Kada krećemo sa kreiranjem nove aplikacije trebalo bi da se pridržavamo osnovnih postulata da kod koji pišemo bude jednostavan, da se lako testira, da bude kod koji je moguće održavati i da bude jasan kolegama sa kojima radimo ili koji će naknadno raditi na održavanju naše aplikacije. Takođe, na samom početku, trebalo bi da se zapitamo koliko je složena sama struktura naše aplikacije i kako ćemo upravljati podacima koje imamo a da naša aplikacija bude brza, user friendly i pouzdana.

Kada radimo na razvoju neke kompleksnije Angular aplikacije, upravljanje podacima može biti veoma složeno i zahtevno. Zato je na početku važno razdvojiti da li aplikacija na kojoj radimo ima složenu arhitekturu i obrađuje veliki broj podataka, na primer ako se radi o nekakvom editoru, o bilo kakvom vidu realtime prikaza podataka poput rezultata na sportskim utakmicama i sl. U tom bi slučaju bilo vrlo mudro razmotriti upotrebu nekog od rešenja za state management, odnosno naći neko rešenje koje će nam pomoći da upravljamo sa podacima koje imamo.

Praktično, state aplikacije je memorija jedne aplikacije u koju su primljeni podaci koji nam stignu od API poziva, od nečega što je sam korisnik uneo i drugih izvora. Upravljanje stateom je koncept da praktično vaš state odvoji od logike i korisničkog interfejsa i takođe da nema više kopija vaših podataka. Jedan od najpopularnijih obrazaca upravljanja stateom je REDUX koji naglašava reaktivno programiranje. Sa ovim obrascem, imate „jedan izvor istine“ (single source of truth) i vaša aplikacija posmatra te podatke. Kada dođe do neke promene, vaša aplikacija reaguje na tu promenu po potrebi određene komponente. Na taj način praktično uštedite vreme za sinhronizaciju podataka i imate aplikaciju koja je dosledna i ima manje nedostataka. Neki konkretan primer bi bio da je to lista recepata, lista korisnika u nekoj aplikaciji ili nešto tome slično.

Kao što znamo, Angular aplikacije se sastoje od više komponenti i svaka od tih komponenti ima svoj state i nijedna od njih nema svest o tome šta ostale komponente imaju u svom stateu. Kako bi podaci iz jedne komponente iz odnosa roditelj-dete bili dostupni drugoj , i koje su u odnosu roditelj-dete za to obično koristimo dekoratore @Input i @Output. Ovakav pristup je sasvim u redu ako imamo mali broj komponenata kao na primeru ispod.

Pored ovoga, ako imate situaciju da više komponenata koristi isti set podataka napravite svoj servis za razmenu tih podataka. Overhead je mali, a implementacija prilično jednostavna.

Međutim, kako aplikacija bude rasla biće dosta komponenata, više modula, i u tom slučaju situacija je dosta kompleksnija, sklona greškama i upravljanje Stateom postaje dosta naporno i teško. U ovakvim slučajevima sa složenom arhitekturom aplikacije NGXS, NGRX ili Akita poželjna su rešenja kako bismo lakše upravljali Stateom.

Za primer koji vidimo sledi da ako je došlo do promene u Komponenti 3 ona prosleđuje podatke Komponenti 1 i tako sve pa do Komponente 5 koja prati promene.

NGXS, NGRX ili Akita – šta god da odaberete kao rešenje za state management će situaciju iz prethodnog grafikona transformisati u nešto ovakvo, tako da će sada komponente komunicirati direktno sa storeom gde će podaci biti smešteni. Odnosno, u svim aplikacijama gde bi se trebalo baviti state managementom, mi zapravo koristimo state management biblioteke kao alat koji nam daje mehanizme kako da povlačimo podatke sa različitih mesta, da ih kombinujemo i da te podatke menjamo.

Koje state management odabrati?

Sada kada smo ustanovili da nam je potrebno neko od state management rešenja, pitanje je šta odabrati i od čega krenuti.

Ako uporedimo NGXS i NGRX i jedno i drugo su state management biblioteke koje mogu koristiti Angular aplikacije. Postoje izvesne prednosti NGXS-a kada radimo na razvoju Angular aplikacije i želim prvenstveno da vam ukažem na njih.

• „Više je manje“ – NGXS teži jednostavnosti, da se postigne što više sa što manje koda i da se „šablonski kod“ (boilerplate code) svede na minimum. Naravno, postoji i u NGRX-u plugin za boilerplate kod (https://github.com/johnpapa/angular-ngrx-data) ali i dalje mislim da je bolje rešenje NGXS jer ga nudi out-of-the-box. NGXS je napravljen po CQRS paternu (Command and Query Responsibility Segregation), koji se primenjuje i u bibliotekama kao što su Redux i NGRX ali boilerplate smanjuje korišćenjem modernih TypeScript funkcija kao što su dekoratori i klase. Konkretno ako uporedimo, state.ts fajl u NGXS-u menja tri fajla NGRX-u (reducer.ts, effect.ts, selector.ts). Verujem da će ovakva definicija mnogima koji su već koristili NGRX stvoriti pogrešnu sliku i da će pomisliti da sav kod iz sva tri fajla prebace u jedan što ne bi bilo dobro i ne bi bilo pregledno. Takođe i kreiranje samog actiona i koda koji se nalazi u komponenti je sveden na minimum.
• DI (Dependency injection) – Kao jedna od osnovnih karakteristika Angulara i NGXS nam omogućava da je koristimo. Pored toga obzirom da ga razvija grupa Angular developera, jako je prisutan Angular pristup; koriste se klase, dekoratori, TypeScript feature i slično.
• Promise – Pored toga što action metoda može da nam vrati Observable, takođe može da vrati i Promise.
• Akcije (Action) u NGXS-u su asinhrone, što im omogućava da imaju životni ciklus. Na taj način imamo mogućnost kada je jedna akcija ili kolekcija akcija završena, da nakon toga uradimo nešto drugo. U NGXS-u je to učinjeno prilično jednostavno.

Šta je NGXS i kako radi?

 Kao što smo već naveli NGXS je state management biblioteka i veoma je sličan NGRX-u, s tom razlikom što ima manje „šablonskog“ koda i što je jednostavnija za učenje.

U NGXS-u  postoje 4 osnovna koncepta koja bi trebalo i razumeti pre nego što ga integrišete u svoj projekat.

1. Store: Store je zapravo ključni element u celom procesu state managementa. Store olakšava interakciju između komponenti i statea. Preko DI-ja mi praktično možemo da dobijemo referencu stora, a kasnije je možemo koristiti za: slanje actiona i storea preko metode store.dispatch() koja će zatim da trigeruje modifikaciju statea, ili za preuzimanje statea aplikacije preko selektora.

2. Actions: Akcije su instrukcije preko kojih šaljemo obaveštenje storu da se nešto desilo u aplikaciji. Svaka akcija sadrži type koji je njen jedinstveni identifikator, i može opciono imati metapodatke(payload) koji može biti pročitan od bilo kog action handlera.

3. State: U kontekstu NGXS-a state su klase koje definišu state container. Te klase čuvaju različite delove celokupnog statea aplikacije. Uzmimo primer da se aplikacija sastoji od 3 modula, X, Y, Z – svaki od ova tri modula će upravljati jednim delom ukupnog statea aplikacije. Tako će informacije iz X modula uvek biti održavane u X delu statea.

4. Selectors: Selektori su funkcije koje praktično odvoje jedan deo globalnog state containera. U NGXS-u možete koristiti select funkciju select ili dekorator @Select. Često ćete koristiti iste selektore na nekoliko različitih mesta ili ćete imati složene selektore koje želite da držite odvojeno od svoje komponente. NGXS ima @Selector dekorater koji će nam pomoći u tome. Ovaj dekorater će memorisati funkciju za performanse, kao i automatski preseći deo statea sa kojim imate posla.

Ako razvijate neku enterprise Angular aplikaciju koja ima jako puno podataka sa kojima se radi, moj je savet da koristite nešto od state management opcija koje imate na raspolaganju. Ne kažem da su NGRX ili Akita loša rešenja, šta više to su dobra rešenja. Po mom mišljenju NGXS je jednostavniji, napravljen za Angular aplikacije i za one koji još nisu imali iskustva sa drugim rešenjima i mislim da je najbolje da krenu sa NGXS-om zbog toga što:

• Pojednostavljuje upravljanje stateom, odnosno podacima
• Koristi dekoratore, klase i DI
• Obezbeđuje mesto „Applications Intelligence to live“.

Za više informacija o samom NGXS možete da pogledate zvaničnu dokumentaciju i takođe da pogledate klipove Marka Whitfelda na YouTubeu – on je team lead u core timu za razvoj NGXS biblioteke.

Na GitHubu možete da pogledate mnogobrojne projekte, jedan od njih je upravo razvijao Mark Whitfeld, a primeri koje sam navela iznad su iz ovog projekta. Takođe možete da pogledate u ovom primeru kako selectori mogu biti korisni i kako pametno da se koriste.