Calibrate
Contact

Compony: de toekomst van Drupal Theming

Jens Vranckx

Front-end Developer
Compony logo

Calibrate blijft innoveren om zo mee te zijn met de nieuwste technieken en methodologieën. In dat kader hebben we Mathieu Spillebeen - bedenker, ontwikkelaar en promoter - uitgenodigd op onze Gentse vestiging om een workshop te geven over het Compony-thema

Het Compony-thema is in essentie een kickstart-theme: een thema dat enkel structuur & starters-code bevat. Klaar om verder uit te bouwen.

De eerstvolgende stap is het toevoegen van Componenten. Elke component bevat zeer specifieke functionaliteit, alsook een specifieke template-file (met daarin de Twig/HTML-code), styling (CSS) & scripts (JavaScript).

Door de componenten zo te structureren is het eenvoudig om deze van de ene code base over te nemen naar een andere. Mathieu biedt zelf een set van componenten aan die gebruiksklaar zijn. Deze kan je zo gebruiken of je kan zelf ook nieuwe componenten uitwerken en toevoegen.

Kortom, een verhaal waar wij wel toekomst in zien.

Compony - What's in a name?

Het Compony-thema doet de dingen net iets anders. De nadruk ligt op het (her-)gebruik van Componenten (Compony… Components…. Do you get it?! ;-D )

Wat is een component?

  • Een component is een stukje functionaliteit van een website. Denk bvb aan het contactformulier, een overzicht van medewerkers, een teaser van een artikel…
  • Een component bevat alle codebestanden die bij de functionaliteit horen: template(s) (Twig/HTML), opmaak (CSS), scripts (JavaScript), assets (iconen, video…)…
  • Een component bevat enkel het essentiële, en niet meer dan dat.
  • Een component heeft geen relatie met een ander component. Deze kunnen dus steeds afzonderlijk gebruikt worden.

Deze aspecten laten toe om componenten eenvoudig over te nemen van het ene project naar het andere. Mogelijk moet je hier en daar wel enkele variabelen aanpassen in je SASS (zoals bvb de kleuren), maar in essentie hoef je niets meer te doen en zal de component werken.
Je hoeft dezelfde opmaak en styling dus maar één keer uit te werken. Daarna kan je deze snel overnemen naar een ander project en aanpassen aan de noden van de klant.

Dit brengt verder nog enkele voordelen met zich mee:

  • De structuur van de componenten is steeds dezelfde. Ontwikkelaars zullen de structuur snel herkennen en zullen zo gemakkelijk hun weg terugvinden.
  • Het project verdelen in componenten zorgt voor een betere performantie. Door focus op functionaliteit is de code meestal beperkter. Drupal zal ook enkel de code inladen die nodig is voor de pagina. Wat zorgt voor snellere pagina’s.

Dit maakt van Compony een Component based theme.

Performance

Performantie

Compony is zodanig opgebouwd dat enkel de essentiële opmaak (CSS) en functionaliteit (JavaScript) ingeladen zal worden wanneer men een pagina bezoekt. Voor elke pagina worden alle assets automatisch in één bestand gecomprimeerd.

Elke pagina krijgt zo dus enkel de opmaak, styling & scripting mee die nodig is. Zo maken we elke pagina hyper performant, korte laadtijden met knappe resultaten!

Compony theme

Het Compony ecosysteem

Theme en structuur

Binnen het theme zien we een afwijkende mappenstructuur. Bij een klassiek thema begin je al snel te werken in folders zoals /css, /js, /templates, bij Compony ligt dat anders.

Gedeelde items

In de folder sass_essentials verzamelen we de projectspecifieke globale variabelen. Zoals bijvoorbeeld animaties, kleuren, lettertypes, functies…

Deze variabelen maken we beschikbaar voor alle componenten.

Compony components

Components

In de components folder plaatsen we alle componenten die de website zal gebruiken. Elk component bevat zijn eigen opmaak en functionaliteit.

Door gebruik te maken van een library per component is het mogelijk om de website zo performant te maken. Elk component beschikt zo over zijn eigen verzameling code. Deze verzameling definiëren we in het libraries.yml bestand.

Via de component kunnen we ook traditionele assets toevoegen zoals afbeeldingen, iconen...

In sommige gevallen kan je niet alles bereiken via de templates. In dat geval is het mogelijk om een .theme bestand toe te voegen. Dat laat ons toe om per component bepaalde zaken te overschrijven via PHP-code. Zo hebben we de volledige controle over de output van elk component.

Er is slechts 1 uitzondering: de _global folder. Deze bevat styling die voor alle pagina’s van belang is. Denk bvb aan Regions & Blocks.

Magic Glue

Een traditioneel theme heeft geen support voor meerdere libraries en .theme bestanden. Maar daar heeft Compony een oplossing voor. Het Compony thema bevat namelijk de nodige code die er voor zorgt dat je wel met meerdere .libraries.yml en .theme files aan de slag kan.

Dat laatste zorgt er voor dat we effectief alle nodige code kunnen verzamelen in een component. Componenten die zo werden gemaakt, kan je simpelweg van het ene naar het andere project kopieëren zonder verlies van functionaliteiten. Bovendien kan je zo gemakkelijker relevante stukken code terugvinden.

Tooling workflow

Gezien het unieke karakter van de structuur van een Compony-thema is het belangrijk om te beschikken over een goede Tooling Workflow. Alle componenten bevatten hun eigen SASS en JavaScript. Die SASS & JS dienen we te compileren: SASS zetten we om naar CSS, JavaScript gaan we minimaliseren.

Om dit proces in goede banen te leiden, werd er reeds een uitgebreide Gulpfile voorzien. Deze Gulpfile bevat hopen functionaliteit voor het compileren van de SASS en JavaScript.

Bovendien kan de Gulpfile nog heel wat andere taken:

  • het optimaliseren van afbeeldingen en iconen;
  • het legen van de Drupal Site Cache;
  • het toepassen van autoprefixer en andere post-css items.

De Gulpfile kan je per project gaan configureren via een configuratiebestand. Zo kan je wijzigingen maken uniek voor elk project, zonder de algemene werking te verstoren.

Compony library

Sharing is caring!

Compony is een opensourceverhaal. Dat wil zeggen dat je het thema gratis en voor niets kan downloaden en verder uitbreiden.

Maar het gaat verder dan dat. Via de compony.io website kan je namelijk bestaande sets van componenten terugvinden. Je kan van deze componenten gebruik maken om je eigen project mee te ontwikkelen.

Deze componenten werden deels door Mathieu zelf  en deels door de community ontwikkeld. Je bent dus vrij om je eigen componenten terug te delen in de gemeenschap toe, zodat zij ook weer van jouw werk kunnen genieten.

Next steps?

Onze themers zijn alvast overtuigd van deze manier van werken. Dit sluit nauw aan bij het originele idee van het gebruik van libraries in een Drupal 8-website. Op deze manier verbeteren we onze eigen werkwijze en zorgen we voor performantere websites.

We bekijken momenteel intern hoe we Compony gaan inbouwen in ons Calibrate-ecosysteem. Wij zijn in elk geval enthousiast om deze nieuwe manier van werken dieper uit te pluizen en er mee aan de slag te gaan.

Lees meer: https://www.compony.io/blog/what-compony