Kaj smo se naučili pri razvoju lastne knjižnice Angular Commons

Marsikateri razvijalec se bo poistovetil s situacijo, ko se objavljena tabela v spletni aplikaciji zaradi manjše “tihe” spremembe nekje v ozadju enostavno poruši. Nihče ni želel narediti napake, a nekje se je nekaj spremenilo in aplikacija nenadoma ne deluje več pravilno. Tu gre lahko za bolj ali manj dramatične “buge” (hrošče), ki bi se jim vsi najraje izognili, saj je popravljanje zamudno in drago. 

V Mediusu gradimo kompleksna interna orodja in zaledne aplikacije. Na prvi pogled gre za tipične spletne aplikacije s tabelami, filtri, obrazci in detajlnimi pogledi, a njihova naloga je zelo pomembna, saj poganjajo resnične procese in upravljajo s pomembnimi podatki. Zato nam je seveda zelo pomembno, da iščemo načine, kako lahko preprečimo tihe napake še preden pridejo v produkcijsko okolje.

V ta namen smo že pred časom razvili Angular Commons, interno UI knjižnico za spletne aplikacije, ki je nastala skozi prakse, ki so jih naši razvijalci preizkušali pri različnih projektih. A še pomembneje, poskrbeli smo, da je dosledno in strogo tipizirana. Od začetka do konca.

Konec ad hoc kode

Angular Commons se je začel kot rešitev, da ne bi vsakič na novo razvijali UI logike. Na začetku je knjižnica vsebovala osnovne zadeve: skupne komponente, postavitvene predloge, tabelarične poglede. A hitro smo ugotovili, da se tu skriva večja priložnost: bolje opredeljena povezava med frontendom in backendom z uporabo močne tipizacije, ki je definirana na strani nosilca poslovne logike. Ko se nekaj spremeni v backend kodi, mora frontend kodna baza to detektirati takoj. Brez ugibanja. Brez situacij, v katerih gumb nenadoma ne deluje.

V najnovejši verziji Angular Commons v6 smo tako rešili tudi akcije, ki so eden najbolj zapletenih delov generalizacije UI in tipizacije. To so gumbi, ki so lahko kjerkoli - v tabeli, v toolbarju, v obrazcu - a se vsakič uporabljajo v različnih kontekstih z različnimi podatki. 

V Angular Commons uporabljamo tipizacijo, da natančno definiramo, katere podatke posamezen pogled uporablja, kateri filtri veljajo, katere opcije sortiranja so izbrane, kateri podatki se v obrazcu uporabljajo za inicializacijo in kako rezultat obrazca oddati na backend. Akcije se sedaj glede na svojo pozicijo in namen zavedajo, s katerimi tipi podatkov delajo. To pomeni, da frontend ekipa že med razvojem zazna neskladja z backendom. 

Zakaj nismo uporabili open-source knjižnice?

Angular Commons smo razvili sami, ker večina obstoječih knjižnic ni bila primerna za naše potrebe, saj gre ponavadi za preveč splošne gradnike ali pa v končne uporabnike usmerjene rešitve. Naše aplikacije so namenjene napredni rabi v poslovnih okoljih, kjer je struktura jasna in načini uporabe vnaprej določeni. 

Zato smo potrebovali lastno knjižnico, ki ni le nabor UI komponent, ampak deluje kot ogrodje za gradnjo vmesnikov, ki sledijo našim pravilom, so robustni in povezani s specifičnimi elementi v backendu. Angular Commons je bil zgrajen okrog naših izkušenj, našega načina dela in naše potrebe po tipizaciji.

10-krat večja učinkovitost?

Tega sicer ne moremo povsem natančno izmeriti, a naši razvijalci se strinjajo, da kadar postavitev standardnega obrazca brez Angular Commons zahteva 100 enot, se z uporabo naše knjižnice to zmanjša na približno 10 enot. A ne gre za to, da bi pisali manj vrstic kode - gre za manj odločitev. Pravilno obnašanje uporabniškega vmesnika je praktično vgrajeno v knjižnico, razvijalec pa se odloči, kaj bo uporabil za potrebe specifičnega projekta.  

Pri pogledih, kot so urejanje šifrantov in poizvedovanje po referenciranih podatkih, je sprememba še večja. To so deli aplikacij, ki se redko spreminjajo, a jih vedno potrebujemo. Zgradimo jih enkrat in jih nato uporabljamo povsod.

Redno vzdrževanje in široka uporaba

Angular se ves čas razvija in ko se razvija Angular, se mora tudi naša knjižnica. Zato z vsako pomembnejšo nadgradnjo Angularja pripravimo novo verzijo Angular Commons. Takrat imamo priložnost, da počistimo kodo in uvedemo nove spremembe, zato knjižnica ves čas ostaja kompatibilna s širšim ekosistemom. Zadnja verzija 6 je tako usklajena z Angular 19 in prinaša doslej največjo nadgradnjo, popolno prenovo tipizacije akcij.

Angular Commons danes uporabljamo pri večini naših produktov in internih orodij. Od velikih industrijskih platform, kot je Gamayun (digitalni dvojčki v proizvodnji), do manjših administrativnih orodij. Povsod nam ponuja osnovno strukturo in varnostno mrežo. Omogoča, da delamo hitreje, ne da bi pri tem povečali tveganje za napake. Ker so vzorci standardizirani, se novi razvijalci lažje vključijo in naredijo manj napak.

Kaj smo se naučili (in kaj lahko drugi posnemajo)

Pri razvoju rešitev po meri velikokrat pride do skušnjave, da bi vsako UI komponento zasnovali na novo, saj se mogoče to zdi bolj fleksibilno. Vse dokler ne pojavijo hrošči ali logika, ki je nihče več ne razume. Ker se je Angular Commons rodil iz te bolečine, smo še toliko bolj disciplinirani pri vzdrževanju. Skrbimo za redne nadgradnje in se vedno izogibamo rešitvam, ki delujejo le “dovolj dobro”. 

Močna tipizacija je za nas dejansko del izdelka. Če uporabniški vmesnik iz kakršnega koli razloga uporabniku prikaže napačne informacije, je to napaka, tako kot vsak drug bug. Zato smo zgradili rešitev, ki napake ujame čim prej v razvojnem procesu. In prav to nam omogoča, da se premikamo hitreje.