Jedan od “problema” koji se često sreću u razvoju web aplikacija je da razvoj serverskog koda (API) i koda koji pišemo za klijentsku stranu - browser - ne idu u korak.Bilo da su u pitanju razlike u broju članova u timu, nepredviđene promene u specifikacijama, ili nešto sasvim treće - gotovo je nemoguće razvijati kompleksniju aplikaciju savršeno sinhronizovano sa obe strane logike. Da bi se ovo rešilo (barem u meni poznatom javascript okeanu), popularno rešenje je alat zvani Storybook, a dotaćiću se i MirageJS-a kao komplementarnog (a potencijalno i alternativnog) rešenja za ovakav scenario.
Prednosti razvoja u Storybook okruženju
Storybook je alat koji prvenstveno služi za razvoj UI (user interface) biblioteka. Storybook nam dozvoljava da pokrenemo mali lokalni node server koji sadrži prekonfigurisano okruženje u kome možemo prikazati naše UI komponente izdvojene, odnosno van konteksta neke aplikacije ili konkretne stranice aplikacije kojoj je UI biblioteka namenjena (ovo je ključno za komponente koje istinski treba da se upotrebe na više mesta).
Ono što je zanimljivo kod razvoja aplikacija oslanjanjem na Storybook je, pored toga što čisto klijentski kod više ne zavisi od stanja serverskog odgovora, i to, što nam SB nameće određeni način razmišljanja. Naime, tera nas da (kao što bi uvek i trebalo), razdvojimo tzv. “biznis” logiku, od prikazne logike. Ovo znači da prepoznajemo i pišemo čiste UI komponente koje dobiju određene prop-ove “od gore” i na osnovu njih prikazuju određen html - ništa više i ništa manje. SB simulira roditeljski element i daje nam (uz određene addon-e) kontrolu nad prop-ovima u vidu grafičkog interfejsa.
Povrh svega, dobijamo odličan alat kako za dokumentaciju, tako i za demonstraciju urađenog - idealnu za učesnike u projektu koji možda nisu tehnički potkovani, a žele da vide napredak.
Integracija Storybook alata u postojeću React aplikaciju
Bilo da smo tek sada počeli svoju create-react-app aplikaciju ili smo već razvili dobar deo, storybook se integriše vrlo lako - dovoljno je pokrenuti npx sb init. Jedna stvar koja često odvrati ljude od korištenja Storybook-a, sem potrebe da se uči korištenje novog alata je i potencijalni problem sa postavkom. Evo na primer, ja sam, pisajući ovaj članak morao da dodam SKIP_PREFLIGHT_CHECK=true u .env fajl da bi sve proradilo kako treba - ništa ekstremno, ali ipak dovoljno da neko ko je nov u materiji odustane. Blaga stranputica, ali bih i dalje svesrdno preporučio upotrebu SB-a gde god to ima i najmanjeg smisla. Elem, nakon inicijalizacije SB-a, u našem package.json fajlu, dodata je nova skripta - storybook, i kada je pokrenemo sa yarn storybook, na http://localhost:6006, dobijamo naše razvojno okruženje. Odatle, u folderu bilo kog komponenta, pored MyComponent.jsx, i MyComponent.test.jsx, sada možemo dodati i MyComponent.stories.jsx koji će biti prikazan u storybook interfejsu.
Napomena: Ja propagiram “pljosnatu” strukturu foldera gde nikad ne idemo dublje od src -> components -> MojaKomponenta da bismo plasirali fajlove vezane za jednu komponentu. Dobar IDE brzo pretražuje folder strukturu i nema potrebe za komplikovanjem, a sam storybook u svom main.js fajlu ima specifikaciju za to koje tačno fajlove “kupi” - *.stories.* je standard koji možete promeniti ako baš želite.
Nakon instalacije, u korenu našeg projekta dobijamo i .storybook folder, sa preview.js i main.js fajlovima.
U preview.js možemo importovati fontove, globalne stilove i baviti se dekoratorima i parametrima koji važe za ceo naš ekosistem. Dakle, ako želimo da svaka naša “priča” ima margine od 3em i crnu pozadinu, dodajemo proizvoljan jsx kao omotač svakog story-ja u našem dekoratoru.
U .storybook/main.js fajlu je određeno koji tačno fajlovi treba da su obrađeni u okviru našeg SB okruženja (spomenuti *.stories.* regex filter), i držimo listu svih dodataka (addon) koje koristimo. SB ima bogat ekosistem addon-a koji nam omogućavaju integraciju sa drugim bibliotekama (kao što je MirageJS) i proširuju mogućnosti samog SB-a sa kontrolama poput color picker-a i mnoge druge. Ukoliko mislite da nešto nedostaje, postoji i https://github.com/storybookjs/addon-kit koji vam pomaže da napravite dodatak po svojoj meri.
Storybook kroz primer
Storybook briljira kod komponenata nalik ovoj koju ćemo obraditi kroz primer. Recimo da imamo komponentu NameDisplay za prikaz imena korisnika u zaglavlju stranice.
Imamo čistu “UI” komponentu koja na osnovu prosleđenih vrednosti prikazuje shodno formatiran jsx. Naš NameDisplay.stories.jsx bi izgledao ovako:
Za više detalja u svemu prikazanom, predlažem zvaničnu SB dokumentaciju, ali ću pomenuti najpre args odeljak default export-a - tu nameštamo tzv. “kontrole” kojima vršimo interakciju sa našim story-jem, pa tako shodno gornjoj dokumentaciji imamo interfejs vidljiv ovde:
Bilo ko (čak i klijent) može da vidi kako će se sa određenim prop-ovima ponašati UI komponenta. Ovo nam dozvoljava i svojevrstan vid ručnog testiranja.
MirageJS
MirageJS je primarno alat za zamenu serverske logike u slučaju njenog trenutnog nepostojanja ili testiranja klijentskog koda. MirageJS ima detaljnu dokumentaciju, i iako možemo postaviti statične rute i njihove fiksne odgovore bez puno razmišljanja, primamiljiviji je pristup gde definišemo model i seed-ujemo irageJS “in memory” bazu podataka koja nam dozvoljava da simuliramo čak i brisanje i promenu resursa (a ne samo prostu zamenu nekog nepostojećeg get ili post poziva koji vraća statičnu listu podataka).
Dokumentacija predlaže pristup sličan recimo ovome:
Gde naš resurs “notifikaciju” definišemo kao MirageJS Model i zatim našu unutar memorijsku (lažnu i privremenu) bazu podataka popunimo sa seeds funkcijom. Ovo može da se odvede i korak dalje kreiranjem seed vrednosti putem factory-ja kada želimo da stvorimo više vrednosti (stotine ili hiljade) programski. Ovaj kod se drži u server.js fajlu unutar src foldera (dokumentacija to predlaže), i stupa u dejstvo jednostavnim dodavanjem u App.js:
Sada pozivom na api/notifications dobijamo listu od 3 gore predefinisane notifikacije.
Integracija storybook i miragejs-a
Storybook i MirageJS se mogu najjednostavnije integrisati tako što pokrenemo MirageJS server u .storybook/preview.js fajlu, međutim, tako ne dobijamo pun potencijal ove moćne kombinacije. Bolji pristup je instaliranje za to specijalno napravljenog addon-a https://storybook.js.org/addons/storybook-mirage za dodatnu fleksibilnost u SB interfejsu. Nakon instalacije (bilo putem yarn ili npm alata), dodajemo storybook-mirage u listu addon-a u .storybook/main.js i u decorators listu u .storybook/preview.js dodamo withServer(makeServer), gde je makeServer funkcija koju koristimo i unutar App.js. Ovim pristupom smo dobili potpuno isto ponašanje lažnog servera u aplikaciji i u storybook-u. Prednost addon pristupa je što sada možemo da za određene scenarije, izmenimo ponašanje MirageJS servera da bismo simulirali različite scenarije kao što je otkaz servera ili drugačiji povrat (koji bi potencijalno uticao na prikaz naše komponente).
Česta varijacija neke komponente koja poziva api je prikaz u slučaju otkaza servera. To možemo pripremiti na sledeći način:
Failed verzija priče koristi drugačiju instancu MirageJS servera simulirajući “pogrešan” povrat.
Zaključak
Postoji mnogo načina da se ove dva korisna alata iskoriste, kako zasebno, tako i u tandemu. Iako su oni “usputni” alati, smatram da ih vredi savladati - storybook nam dozvoljava da olakšamo komunikaciju unutar i između timova koji razvijaju jednu aplikaciju, usput služeći kao svojevrsna dokumentacija, a i platforma za ručne testove (mada je ovo skoro nuspojava/okolnost).
MirageJS (barem meni) olakšava dinamičan povrat lažnih podataka, kako u nedostatku pravog serverskog odgovora, tako i pri simulaciji serverskog odgovora, bilo da je primena storybook, testiranje, ili prosto privremena mera (dok je pravi API u razvoju).
Nadam se da sam vam skrenuo pažnju na tehnologije koje će vam u budućnosti olakšati i pobošljati neke procese. Oba alata imaju daleko više mogućnosti nego što stane u jedan članak, i skoro bilo koji scenario može uspešno da se rekonstruiše. Čitajte dokumentaciju, budite strpljivi sa svojim alatima i oni će vam višestruko vratiti!
0 komentara