Web Components: waarom ze de toekomst zijn voor design systems

Design systems vormen tegenwoordig de ruggengraat van moderne ontwikkeling. Eén plek voor alle ontwerpkeuzes, componenten en patronen. Dat klinkt ideaal. Maar ergens is er iets misgegaan: we zijn design systems gaan bouwen binnen specifieke frameworks.

Dat klinkt onschuldig, maar het is een fundamentele fout. We wilden universeel herbruikbare componenten maken, maar sloten ze toch op in React, Vue of Angular. Alsof je een universele stekker bouwt en die vervolgens vastsoldeert aan één specifiek apparaat.

Het paradox van design systems

Het idee achter design systems is logisch en waardevol. Teams hebben behoefte aan consistentie en herbruikbare elementen. Maar in de praktijk ontstonden vooral framework-specifieke bibliotheken. Die leveren niet wat ze beloven.

Wie een component bouwt in React of een ander framework, creëert een keuze die eigenlijk geen keuze is. Gebruik je de componenten alleen als je al op die stack zit. Bouw je ze anders opnieuw. Dat is geen design system. Het is een framework-bibliotheek die doet alsof het er een is.

Webstandaarden zijn ondertussen volwassen genoeg om dit probleem op te lossen. Web components, gebaseerd op custom elements en shadow DOM, bieden een weg terug naar het oorspronkelijke ideaal.

Waarom web components beter werken

Web components zijn geen hype. Ze zijn stabiel en niet afhankelijk van trendy frameworks. Ze kunnen de problemen oplossen die framework-specifieke libraries veroorzaken.

Ze werken in vrijwel elke omgeving. React, Vue, Angular of Svelte — elk framework kan web components gebruiken zonder grote omwegen. 而这意味着 je design system niet meer vastzit aan één technologie.

Web components volgen de webstandaarden. Je werkt met HTML, CSS en JavaScript zonder extra abstractielaag. Deze technieken blijven bestaan en werken ook in de toekomst.

Simpel en herbruikbaar

Web components brengen een nieuwe mindset met zich mee. Het gaat om minimalisme.

Minimaal niveau: met web components hoef je niet te kiezen voor een machtige reactiviteitssysteem. Je bouwt met het lichtste fundament dat mogelijk is.

Eenvoudige componenten: een button, modal of dropdown hoeft niet complex te maken. Het is juist een voordeel als componenten "dumb" zijn. Zo blijven ze flexibel en kunnen sie beïftig gebruik werden in verschillende projecten.

Hoe ziet zo’n component eruit?

Een eenvoudige implementatie ziet er ongeveer zo uit:

class VibedButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --button-padding: var(--vibe-spacing-md, 12px);
          --button-bg: var(--vibe-primary, #0066ff);
        }
        
        button {
          padding: var(--button-padding);
          background: var(--vibe-primary, #0066ff);
          border: none;
          cursor: pointer;
        }
      </style>
        <button><slot></slot></button>
      </style>
    `;
  }
}

customElements.define('vibe-button', VibedButton);

Een design system dat groeit

Wanneer je je componenten samen met hun documentatie in één repository plaatst, worden ze levende documentatie. De HTML zelf is een leidraad voor developers. Web components helpen om componenten en documentatie beter te synchroon te houden.

Wat betekent dit voor je stack?

Als you je design system nog in een framework hebt gebouwd, kun je langzaam overgaan. Begin met nieuwe componenten als web components. Je get je stack toekomstbestendig.

De echte winst

De voordelen zijn vooral organisatorisch. Teams kunnen dezelfde componenten gebruiken, ongeacht hun frameworkkeuze. Migraties tussen frameworks worden eenvoudiger. En je investering in een design system wordt waardevol voor meerdere projecten.

Hoe begin je vandaag nog?

Start met een eenvoudig component — een button bijvoorbeeld. Bouw het met standaard HTML, CSS en JavaScript. Gebruik CSS custom properties voor theming. Het is een eenvoud en en eenvoud en een simpele aanpak.