Komponentidel põhinev Drupal – kuidas seda praktikas ehitatakse

🎧 Kuula kõiki artikleid järjest

Drupal võimaldab ehitada veebi korduvkasutatavatest komponentidest, mida saavad kasutada nii arendajad kui ka sisutoimetajad. Õige arhitektuurivalik aitab hoida süsteemi hallatava ka siis, kui veeb kasvab aastaid.

Komponentidel põhinev arendus tähendab, et veebileht ei koosne eraldi kujundatud lehtedest, vaid korduvkasutatavatest plokkidest, millel on selgelt defineeritud eesmärk, sisu ja kujundus.

Näiteks võivad komponendid olla:

• päiseplokk;
• tekst koos pildiga;
• KKK akordion;
• hinnaplokk;
• galeriiplokk;
• CTA sektsioon;
• kontaktiplokk.

Iga komponent on iseseisev tervik, mida saab kasutada mitmel erineval lehel.

Selline lähenemine vähendab dubleerimist, muudab süsteemi lihtsamini hooldatavaks ning võimaldab toimetajatel sisu hallata ilma kujundust rikkumata.

Miks komponentpõhine lähenemine Drupalile sobib?

Drupal on olemuselt struktureeritud sisuplatvorm.

Sisutüübid, väljad ja taksonoomiad loovad tugeva aluse komponentide ehitamiseks, sest sisu ei ole lihtsalt vabatekst, vaid selgelt määratletud andmed.

See võimaldab:

• kasutada sama sisu erinevates kohtades;
• kuvada sama infot erineval kujul;
• vähendada dubleerimist;
• luua paremaid API-sid;
• lihtsustada hooldust.

Lisaks kasutatakse Drupalit sageli organisatsioonides, kus sisu loovad toimetajad, mitte arendajad.

Komponentpõhine lähenemine võimaldab anda toimetajatele paindlikkust ilma täielikku kontrolli kujunduse üle loovutamata.

Paragraphs – kõige levinum lahendus

Paragraphs↗ (avaneb uues aknas) on üks populaarsemaid Drupal mooduleid ning paljude projektide standardlahendus.

Paragraphs võimaldab ehitada lehti komponentidest, mida toimetaja saab ise lisada ja ümber järjestada.

Näiteks võib leht koosneda:

• sissejuhatusest;
• pilt ja tekst komponendist;
• tsitaadist;
• videoplokist;
• kontaktivormist.

Iga komponent sisaldab oma välju ning käitub etteantud viisil.

Paragraphsi eelised

• lihtne kasutajaliides;
• hästi mõistetav toimetajatele;
• tugev kontroll sisustruktuuri üle;
• küps ja laialdaselt kasutatav lahendus.

Paragraphsi väljakutsed

Suurtes projektides võivad tekkida probleemid:

• komponentide arv kasvab liiga suureks;
• üksteise sisse paigutamine muutub keeruliseks;
• vanad komponendid jäävad süsteemi alles;
• arhitektuur hakkab killustuma.

Seetõttu tasub komponentide nimekiri läbi mõelda juba projekti alguses.

Layout Builder – paindlikum paigutus

Layout Builder on Drupal Core'i osa.

Erinevalt Paragraphsist keskendub see rohkem lehe paigutusele kui sisukomponentidele.

Toimetaja saab:

• lisada sektsioone;
• luua veerge;
• lohistada plokke;
• muuta paigutust ilma arendajata.

See sobib hästi olukordadesse, kus erinevad lehed vajavad erinevat ülesehitust.

Näiteks võivad:

• kampaanialehed;
• sündmuste lehed;
• maandumislehed

kasutada samu komponente, kuid erinevas paigutuses.

Layout Builderi eelised

• visuaalne kasutuskogemus;
• paindlik leheehitus;
• vähem arendust lihtsate muudatuste jaoks.

Layout Builderi riskid

Liiga suure vabaduse korral võivad tekkida:

• ebaühtlased lehed;
• keerulisem toimetamine;
• raskem kvaliteedikontroll.

Seetõttu tasub määratleda selged kasutusreeglid.

Single Directory Components (SDC)

Drupal 10 tõi kaasa Single Directory Components ehk SDC.

See on arendajakeskne lahendus, mis muudab komponentide loomise ja haldamise süsteemsemaks.

Varasemalt võisid komponendi failid paikneda erinevates kohtades:

• Twig mall ühes kaustas;
• CSS teises;
• JavaScript kolmandas.

SDC koondab kõik komponendiga seotud failid ühte kataloogi.

Näiteks:

components/
└── hero/
    ├── hero.twig
    ├── hero.css
    ├── hero.js
    └── hero.component.yml

See muudab komponendid:

• paremini hallatavaks;
• lihtsamini testitavaks;
• kergemini taaskasutatavaks.

Kuidas Paragraphs, Layout Builder ja SDC kokku sobivad?

Neid ei pea käsitlema konkureerivate lahendustena.

Praktikas kasutatakse neid sageli koos.

Tüüpiline arhitektuur võib välja näha nii:

• SDC defineerib komponendi tehnilise ülesehituse;
• Paragraphs pakub toimetajale sisestusliidest;
• Layout Builder võimaldab määrata paigutuse.

Selline lähenemine hoiab süsteemi ühtsena nii arendajate kui ka toimetajate jaoks.

Disainisüsteem ja disainimuutujad

Komponentidest üksi ei piisa.

Kui iga komponent kasutab oma värve, vahekaugusi ja tüpograafiat, tekib kiiresti visuaalne segadus.

Seetõttu kasutatakse kaasaegsetes Drupal-projektides sageli disainimuutujaid.

Näiteks:

:root {
  --color-primary: #0055ff;
  --spacing-md: 24px;
  --font-size-lg: 2rem;
}

Komponendid kasutavad neid muutujaid, mitte kõvakodeeritud väärtusi.

Sellise lähenemise eelised:

• lihtsam brändiuuendus;
• väiksem dubleerimine;
• ühtlasem kasutajakogemus;
• kiirem hooldus.

Storybook komponentide dokumenteerimiseks

Suuremate projektide puhul tasub komponentide teek dokumenteerida.

Üks populaarsemaid tööriistu selleks on Storybook.

Storybook võimaldab kuvada komponente väljaspool Drupalit.

See aitab:

• arendajatel komponente testida;
• disaineritel kujundust kontrollida;
• toimetajatel saada ülevaade olemasolevatest plokkidest.

Kui komponentide arv kasvab kümnetesse või sadadesse, muutub dokumentatsioon väga väärtuslikuks.

Levinumad vead

Liiga palju komponente

Kui igaks olukorraks luuakse uus komponent, muutub süsteem kiiresti raskesti hallatavaks.

Komponendid peaksid olema võimalikult üldotstarbelised.

Liigne pesastamine

Paragraphs võimaldab komponente üksteise sisse paigutada.

Praktikas muutub üle kahe-kolme taseme pesastamine kiiresti keeruliseks nii arendajatele kui ka toimetajatele.

Kujundus väljaspool süsteemi

Kui komponentides kasutatakse juhuslikke värve ja vahekaugusi, kaob disainisüsteemi väärtus.

Liiga palju vabadust

Toimetaja peaks saama sisu hallata, kuid mitte kogu kujundussüsteemi ümber ehitada.

Piirangud on sageli sama olulised kui paindlikkus.

Kuidas valida õige lähenemine?

Mõned lihtsad küsimused aitavad otsustada.

Kas toimetaja peab paigutust muutma?

Kui jah, tasub vaadata Layout Builderi poole.

Kui mitte, on Paragraphs sageli lihtsam lahendus.

Kui suur on projekt?

Väiksemates projektides piisab sageli Paragraphsist.

Suuremates süsteemides tasub investeerida SDC-sse ja disainisüsteemi.

Kas olemas on Figma komponenditeek?

Kui disainisüsteem on juba loodud, võimaldab SDC selle palju paremini koodi üle viia.

Näiteid WebPro projektidest

Komponentidel põhinev arhitektuur on olnud paljude WebPro projektide keskne osa.

Tallinna Tervishoiu Kõrgkool

Üle 5000 lehe ja kümnete sisuhalduritega keskkond, kus komponentide süsteem aitab hoida kasutajakogemuse ühtsena sõltumata toimetajast.

Palmako sidusveebid

Viis rahvusvahelist veebilehte ühisel Drupal platvormil, kus sama komponentide süsteem teenindab mitut turgu ja brändi.

Riigi Kinnisvara AS

Avaliku sektori veeb, kus komponentpõhine arhitektuur lihtsustab WCAG nõuete täitmist ning vähendab tulevaste muudatuste maksumust.

Kokkuvõte

Komponentidel põhinev Drupal ei ole lihtsalt frontend-trend, vaid arhitektuuriline otsus, mis mõjutab kogu projekti elutsüklit.

Õigesti üles ehitatud süsteem:

• vähendab tehnilist võlga;
• kiirendab arendust;
• lihtsustab sisuhaldust;
• toetab disainisüsteemi;
• võimaldab veebil kasvada ilma arhitektuuri ümber tegemata.

Paljudes kaasaegsetes Drupal-projektides kasutatakse koos SDC-d, Paragraphsi ja Layout Builderit. Nende kombinatsioon annab arendajatele kontrolli, toimetajatele paindlikkuse ning organisatsioonile pikaajaliselt paremini hooldatava veebiplatvormi.

WebPro Company OÜ Tehniline juht: Kaido Toomingas

Vajad Drupal abi?

Kui artikkel puudutab sinu olukorda, ei pea kõike lõpuni lugema. Sinuga suhtleb päris inimene ja aitab järgmise sammuni jõuda.

Võta ühendust