Norma — käyttö­liittymä sääntöjen konfigurointiin

Bonsky Digital Oy (liittyi osaksi Vincit Oyj:tä 1.5.2021) suunnittelee ja toteuttaa mm. sähköisiä asiointi­palveluja, verkko­palveluja, B2B-tilaus­järjestelmiä sekä tuote­tieto­ratkaisuja. Rules engine on Bonskyn mikro­palvelu­arkki­tehtuurissa käyttämä ratkaisu, jota hyödynnetään mm. järjestelmien ja tuote­tieto­pankkien välisten tieto­mallien mäppäykseen sekä datan muunnoksiin ja vertailuun.

Bonskyltä saadussa toimeksi­annossa pää­tavoitteena oli helpottaa sääntöjen konfigurointia. Avalor-projekti­ryhmän tehtävänä oli kehittää selain­käyttö­liittymä, jonka avulla käyttäjä voi selata sääntöjä ja tehdä niihin muutoksia. Muutosten versio­historia tuli säilyttää. Loppu­tuloksena haluttiin siis hallinta­työkalu, jota voivat käyttää sekä asiakkaat että yritys itse.

Norma toteutettiin MERN-stackilla (React, Node.js, Express ja MongoDB) ja SCSS:llä. Käyttö­liittymä suunniteltiin Figmassa, ja projekti­työskentelyssä hyödynnettiin ketteriä menetelmiä.

Sääntöjen konfiguraatiotiedostojen JSON-objektien määrä ja rakenne vaihteli paljon. Yksi projektin merkittävimmistä haasteista oli, miten backendistä saatava sääntödata voidaan esittää käyttöliittymässä järkevällä tavalla.

Hyödynsin sääntöjen tietojen esittämisessä rekursiivista renderöintiä. Esimerkiksi säännön ehtojen ANY ja ALL -osiot puretaan auki omina kokonaisuuksinaan, tarpeen mukaan sisäkkäin ketjutettuina. Osioiden lapsikomponenteille määrätään objektien avaimien ja rakenteen perusteella tiettyjä tyylimäärittelyjä. Näin muodostuu puumainen hierarkia, joka havainnollistaa ehtojen suhteita toisiinsa.

Toisinaan sääntöihin liittyvät avain-arvo -parien listat olivat satojen tai tuhansien rivien pituisia. Sovellusta testatessa huomasimme, että pisimmät listat aiheuttivat merkittäviä suorituskykyongelmia. Perehdyin aiheeseen, ja react-window-pakettia hyödyntämällä sekä ylimääräisiä re-rendereitä rajoittamalla paransin listojen suorituskykyä huomattavasti.

Toimeksianto tuntui haastavalta, mutta tartuimme tarmokkaasti haasteeseen. Pidin etenkin käyttöliittymän suunnittelusta ja toteutuksesta, joten oli mahtava kuulla, että lopputulos ylitti kaikki odotukset.

Projekti huipentui intensiiviseen kahden kuukauden koodausjaksoon, joka opetti paljon. Pääsin syventymään Reactiin, ja aiemmin hämmennystä aiheuttanut JSON-datan käsittely tuli tutuksi. Loistavan ryhmäilmapiirin ja tekemisen meiningin ansiosta tavoitteet saavutettiin kevyesti ja toimeksiantaja oli tyytyväinen. 🤘