Fra betingelser til komponentkart: En renere måte å gjengi sider med hodeløse CMS-er på

Jeg har nylig jobbet med hodeløse CMS-er for kunder og lagt merke til en vanlig forespørsel: mer fleksibilitet når jeg oppretter en side. Problemet? Hvordan oppnå ønsket resultat samtidig som du utformer en skalerbar og vedlikeholdbar løsning for ingeniører. Dette mønsteret eliminerer behovet for betingede setninger ved gjengivelse av sidekomponenter på øverste nivå. Det er spesielt nyttig med hodeløse CMS-er der innholdsforfattere trenger fleksibilitet i å ordne komponenter på en side.

Sammenligning av tilnærminger

Når komponenter må plasseres dynamisk basert på rekkefølgen i dataene, må vi betinget gjengi hver komponenttype og tilordne riktig gjengivelseskomponent.

Selv om det er flere tilnærminger til dette, fyller utviklere vanligvis komponentene sine med flere betingede setninger for å gjengi den riktige (Se skjermbilde).

Selv om denne tilnærmingentekniskfungerer, forestill deg kompleksiteten med dusinvis av komponenter på toppnivå – filen ville bli vanskelig å feilsøke og risikabel å endre uten å introdusere regresjoner.

Så hva kan vi gjøre?

La oss forbedre denne tilnærmingen ved å rydde opp i kodestrukturen. I stedet for å konsolidere all gjengivelseslogikk i én fil, skiller vi den slik at hver fil håndterer ett enkelt ansvar.

Vi oppretter et tilordningsobjekt for å organisere komponentene våre.

Start med å deklarere komponenttilordningen. Nøkkelen representerer identifikatoren fra CMS-et eller datakilden, og verdien angir hvilken komponent som skal gjengis.

Med kartet vårt på plass kan vi nå hente riktig komponent direkte fra objektet. Hvis det ikke finnes noen samsvarende komponent, returnerer vi null for å forhindre gjengivelse.

Denne tilnærmingen gir en mer skalerbar løsning på problemet. I stedet for å beholde all logikk i én enkelt fil, opprettholder du et objekt som tilordner komponentnavn til de tilsvarende komponentene i brukergrensesnittet.

Med denne fremgangsmåten vises komponenter i riktig rekkefølge basert på datakilden, uten at utviklere trenger å endre noen markering eller komponentstruktur.

Skrevet av Matt Czencz , Senior Full Stack Ingeniør ved Clique Studios.