Frontend development is geen kunst

Ik kan er naast zitten, maar ik heb soms het gevoel dat een frontend developer wordt gezien als een soort Bob Ross. Een beetje css hier, een beetje javascript daar en we hebben een mooie website. Toch heeft frontend development (html, css, typescript/javascript) meer overeenkomsten met backend development. Dat kan het in ieder geval hebben, als je het gestructureerd aanpakt.

Om heel eerlijk te zijn snap ik het sentiment wel rondom frontend development, als ik kijk hoe ik het het aanpakte toen ik in dit vak begon. Er zat weinig structuur in en we schreven net zolang css-regels totdat het gewenste resultaat op ons scherm stond. Tegenwoordig pak ik dit totaal anders aan en heeft de frontendstructuur meer overeenkomst met backend programmeren dan je zou denken.

Atomic

Zo delen we onze frontend elementen op, op basis van het Atomic Design principe. Voor de kleinste elementen zoals buttons, afbeeldingen en titels maken we ‘atoms’. Iets grotere elementen zoals een menu of een artikelteaser stoppen we in een ‘molecule’. Deze komen weer samen in ‘organisms’ zoals een header, footer of een blok met tekst, afbeelding en buttons, om uiteindelijk in een complete pagina getoond te worden. Hierdoor houden we de frontendstructuur overzichtelijk en beter onderhoudbaar.

Lees hier meer over Atomic Design.

Bem

Binnen de atoms, molecules en organisms schrijven we de css-selectors volgens het block-element-modifier (BEM) principe. Dit houdt in dat ieder element in HTML zijn eigen unieke class krijgt en niet afhankelijk is van het parent element waar hij in staat. Om een voorbeeld te geven van een button:

<button class="button">
  <span class="button__icon">🏠</span>
	<span class="button__text">Home</span>
</button>

<button class="button button--colorSecondary">
  <span class="button__icon">🏠</span>
	<span class="button__text">Home</span>
</button>

/* block */
.button {
  --textColor: white;
  --backgroundColor: green;

  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1em;
	border: 0;
	border-radius: 5px;	
  background: var(--backgroundColor);
  cursor: pointer;
}

/* element */
.button__text {
	color: var(--textColor);
	font-size: 14px;
}

/* element */
.button__icon {
	font-size: 16px;
}

.button:hover {
	--backgroundColor: darkgreen;
}

/* modifier */
	.button--colorSecondary {
	--backgroundColor: orange;
	--textColor: black;
}

.button--colorSecondary:hover {
	--backgroundColor: darkorange;
}

Overeenkomsten met backend development

Als je op deze manier je hele frontend opbouwt, ben je eigenlijk classes aan het schrijven met methods en argumenten
respectievelijk de blocks, elements en modifiers. Bij Vollan maken we deze componenten met Twig en maken ze vervolgens inzichtelijk met documentatie in Storybook. Hierdoor kunnen we gestructureerd elementen ontwikkelen die uiteindelijk één geheel vormen.

Het developmentproces lijkt daardoor meer op het bouwen van een complex gebouw dan op het schilderen van landschappen. Frontend development is veel meer dan hier en daar wat css toevoegen. Het vraagt om structuur, logica en samenwerking, net zoals backend development. Met principes zoals Atomic Design en BEM bouwen we frontends die mooi zijn, schaalbaar en onderhoudbaar.