Razvoj knjižnice komponent se pogosto sprevrže v neobvladljivo nočno moro zaradi prevelike fleksibilnosti in nenehnega dodajanja nepotrebnih lastnosti. V tem članku boste spoznali, kako z načrtnim omejevanjem funkcionalnosti, uporabo osnovnih gradnikov in poudarkom na sestavi ustvariti predvidljive ter enostavno vzdrževane elemente uporabniškega vmesnika. Odkrijte ključne strategije za strogo ločevanje poslovne logike od prikaza, ki bodo zagotovile, da vaš sistem ostane čist, ponovno uporaben in dolgoročno stabilen.

Večina knjižnic komponent nastane z dobrimi nameni, doslednost, ponovna uporaba in hitrejši razvoj. Nekaj mesecev kasneje pa imamo več različic komponent, ki se obnašajo malo drugače, lastnosti za pomembnost, variacije in namene, nezdružljive nadgradnje, ki se jih nihče ne upa dotakniti in komponente, ki so namenjene ponovni uporabi, vendar so praktično neuporabne. Težava ni v sami logiki temveč v zasnovi brez omejitev. V tem članku bom opisal kako oblikovati komponente, ki ostanejo uporabne in se ne podrejo zaradi prevelike fleksibilnosti.

Številne knjižnice so optimizirane za hipotetično ponovno uporabo, ena lastnost komponente za vsak možen primer. Komponenta ima tako vedno več lastnosti, robnih primerov in implicitnih vedenj, zaradi česar na koncu ni primerna za dejansko uporabo. Boljši cilj je izdelava majhnih primitivnih komponent, ki se združujejo v večje vzorce uporabniškega vmesnika.

Namesto da začnemo z vprašanjem, koliko lastnosti naj komponenta podpira, se je bolje vprašati, katerih odločitev ta komponenta nikoli ne sme dovoliti uporabnikom. Dobra zasnova komponente je večinoma odstranjevanje nepotrebnih dodatnih lastnosti. Preden se lotimo izdelave komponente, je dobro pripraviti osnovne gradnike, kot so okvirji, tipografija, razmiki in poravnave.

export function Okvir({ gap = 2, children }) {

  return (

    <div style={{ display: 'flex', flexDirection: 'column', gap: `${gap * 4}px` }}>

      {children}

    </div>

  );

}

Z izdelavo osnovnih gradnikov se izognemo podvajanju logike za postavitev, poenotimo pravila in zmanjšamo velikost CSS datoteke, saj se izognemo nepotrebnemu podvajanju.

Dobro je, da komponente prilagodimo glede na uporabo ne glede na stil. Namesto da komponenti pošiljamo specifične stile, lahko prilagodimo komponento glede na namen:

<!-- Still -->

<Gumb color="#4b82aa" size="large" shadow rounded />

<!-- Variacija -->

<Gumb variant="primarno" />

<Gumb variant="sekundarno" />

Ali pa, kar je še bolje, glede na specifično uporabo:

<!-- Uporaba -->

<Gumb intent="potrdi" />

<Gumb intent="preklici" />

Dobro se je tudi izogibati preveč logičnih nastavitev, kot so isPrimary, isDisabled, isSmall, isLoading in isRounded. Vsaka logična vrednost doda h kompleksnost. Namesto tega se lahko uporabi tip komponente, velikost in stanje, ali pa uporabi izolirane komponente.

<Gumb variant="potrdi" size="sm" state="nalaganje" />

<GumbNalaganje>

  Potrdi

</GumbNalaganje>

Bolje je, da se osredotočamo na sestavo komponente kot na samo konfiguracijo nastavitev. S tem je manj ugibanja o lastnostih pri uporabi in hkrati je komponento lažje razširiti in nadgraditi.

<PojavnoOkno

  title="Pozdravljeni"

  showClose

  gumbPotrdi="Potrdi"

  gumbPreklici="Prekliči"

/>

<PojavnoOkno>

  <PojavnoOkno.Glava />

  <PojavnoOkno.Telo />

  <PojavnoOkno.Noga>

    <Gumb variant="primarno">Potrdi</Button>

    <Gumb variant="sekundarno">Prekliči</Button>

  </PojavnoOkno.Noga>

</PojavnoOkno>

Fleksibilnost se na začetku zdi kot prednost, vendar začne postajati problem, ko sistem raste in se uporaba razprši med več razvijalcev in kontekstov. Prilagodljiva komponenta ima običajno veliko število lastnosti, zaradi katerih se lahko obnaša zelo različno v različnih delih aplikacije, kar pomeni, da njeno razumevanje zahteva dodatno dokumentacijo in napor. Predvidljiva komponenta pa ima malo lastnosti, se v vseh kontekstih obnaša konsistentno in jo je zato lažje varno spreminjati ter refaktorirati brez strahu, da bi se nekaj nepričakovano podrlo.

Ena najpogostejših napak pri knjižnicah je, da UI komponenta postopoma začne vsebovati poslovno logiko, kar zamegli njeno osnovno odgovornost. Slab primer je, ko gumb neposredno sproži kompleksne poslovne operacije, kot sta zaključevanje košarice in uporaba popustov, saj to pomeni, da komponenta ni več zgolj UI element.

<Gumb onClick={zakljucekNarocilaDodatniPopust} />

Boljši pristop je, da gumb samo sproži generičen dogodek, medtem ko se dejanska logika izvaja zunaj komponente v ločeni funkciji ali sloju aplikacije. Na ta način komponenta ostane čista in ponovno uporabna, logika pa je centralizirana in lažje obvladljiva. Pravilo je, da naj komponente oddajajo dogodke, ne pa da izvajajo celotne delovne tokove.

<Gumb onClick={onClick} />

const onClick = () => {

  zakljuciNarocilo();

  dodajPopuste();

};

Pri oblikovanju komponent je koristno razmišljati v slojih, kjer imajo različni deli sistema različne naloge. Na najnižji ravni so osnovni gradniki, kot so okvirji, besedilo in postavitve, ki predstavljajo temelj UI sistema. Nad njimi so komponente, kot so gumbi, vnosna polja in pojavna okna, ki sestavljajo osnovne uporabniške interakcije. Na višji ravni se pojavijo vzorci, kot so obrazci, dialogi in tabele, ki združujejo več komponent v ponovljive strukture. Na vrhu pa so strani, kjer se nahaja dejanska poslovna logika aplikacije in kjer se vse prej omenjene plasti sestavijo v konkreten produkt. Če vse obravnavamo kot komponente, potem izgubimo jasno strukturo in postane težko razumeti, kaj je osnovni gradnik in kaj je aplikacijska logika.

Dobra komponentna knjižnica ni tista, ki ponuja največ možnosti ali največ konfiguracij, temveč tista, ki omogoča manj odločitev, hkrati pa še vedno pokrije vse realne potrebe produkta. Manj fleksibilnosti omogoča večjo predvidljivost, manj lastnosti in atributov zmanjša kompleksnost in boljša kompozicija oblikuje sistem, ki ga je mogoče dolgoročno vzdrževati brez napora.

Domen Gričar

Front - end programer, predavatelj

MCT, MS, MCSD

domen.gricar@kompas-xnet.si

Do you have any additional questions?

For more information, we are always happy to assist you. Feel free to contact us at info@kompas-xnet.si or call us at 01 5136 990.