Design Systeem voor HVC

Wij ontwerpen en ontwikkelen verschillende toepassingen voor HVC, waaronder de hoofdwebsite, een 'werken bij'-platform, enkele campagnewebsites, enkele zelfhulptools, en natuurlijk de HVC-app. Daarnaast ontwikkelen HVC zelf en enkele leveranciers van HVC ook toepassingen.

Om consistentie in deze toepassingen te waarborgen, werken we met behulp van een Design Systeem. Dit Design Systeem omvat richtlijnen voor onder andere huisstijlelementen (lettertypen, kleuren, marges, etc.), evenals het ontwerp en de interactie van interface-elementen (knoppen, formulierelementen, menu's, etc.). Deze richtlijnen zorgen ervoor dat alle verschillende applicaties een consistente en aantrekkelijke uitstraling en werking hebben.

De verschillende toepassingen maken gebruik van een verscheidenheid aan talen, frameworks, etc. We gebruiken onder andere Drupal (met Twig), React, Vue, enz. Voor deze tools hebben we een aantal componenten ontwikkeld en met behulp van het Design Systeem ervoor gezorgd dat, mits er wordt voldaan aan een bepaalde structuur, deze componenten consistent worden gepresenteerd.

Een deel van de applicaties wordt ingebed als losse tools op de website, of is onderdeel van een multisite-oplossing, zoals het HVC Nieuwsplein. Omdat de styling vanuit het thema van de website wordt aangeboden, hoeven deze tools dus geen eigen styling in te laden; deze erven ze automatisch vanuit de website.

Echter zijn er meerdere individuele websites, waaronder Werken bij HVC en de campagne websites. Deze draaien als volledig losstaande websites, en bevatten allemaal een eigen implementatie van het Design Systeem. Niet per se intentioneel, maar dit is hoe het eenmaal gegroeid is. 

Het grootste nadeel van deze aanpak is dat er een kans op inconsistentie bestaat bij de implementatie van de verschillende Design Systemen, en een aanpassing betekent dat de aanpassing op verschillende plekken moet worden doorgevoerd. Daarnaast ontbreekt een centrale showcase waar het Design Systeem goed geïmplementeerd is. Het is dus tijd voor een andere aanpak.

Ondanks de verschillende technieken die worden gebruikt voor de verschillende applicaties, hebben ze allemaal één gemeenschappelijk kenmerk: het zijn webgebaseerde toepassingen. Daarom kunnen we op zijn minst de styling hergebruiken.

Verder maken alle projecten gebruik van NPM voor dependency management. Het lag dus voor de hand om het Design Systeem als een NPM ‘package’ te publiceren en deze in te laden bij de verschillende applicaties.

Deze NPM package bestaat uit drie onderdelen:

1. Alle styling bronbestanden (SASS), 
2. Verschillende React componenten,
3. Een implementatie van Storybook, tests en documentatie.

De styling bronbestanden omvatten de vormgeving van alle componenten en kunnen individueel per component worden toegepast. Op deze manier gebruiken we alleen wat we nodig hebben en voorkomen we te grote CSS-bestanden. Applicaties die geen React-componenten gebruiken (zoals Drupal), kunnen deze styling inladen en hoeven alleen de correcte HTML-structuur te leveren om de juiste styling toe te passen.

De React-componenten kunnen direct worden gebruikt in alle React-applicaties, zoals de widgets en Werken bij HVC. Deze componenten laden zelf de bijbehorende CSS in.

De Storybook-implementatie documenteert alle componenten en maakt deze beschikbaar in een duidelijk overzicht. Na iedere update worden deze automatisch gedeployed naar een online omgeving. Voorafgaand aan iedere deploy worden automatische tests uitgevoerd om onder andere regressie te voorkomen.

Het geheel wordt als NPM-pakket gedeployed bij het taggen van een nieuwe versie. Deze kan vervolgens worden geüpdatet in alle applicaties.

• Centrale plek van code en tests: Door het Design Systeem als een centraal NPM package te beheren, hebben we een enkele bron van waarheid voor alle code en tests. Dit leidt tot aanzienlijk minder duplicatie van code en tests binnen onze projecten.
• Consistentie tussen alle verschillende applicaties: Het gebruik van het Design Systeem zorgt voor een uniforme en consistente gebruikerservaring over alle applicaties heen. Dit versterkt de merkidentiteit van HVC en verbetert de gebruikerservaring voor eindgebruikers.
• Zekerheid van correcte werking middels automatische tests: Dankzij de automatische tests die worden uitgevoerd als onderdeel van de deploy pipeline, hebben we de zekerheid dat alle componenten correct functioneren en dat eventuele wijzigingen geen onbedoelde neveneffecten hebben.
• Aanpassingen aan componenten hoeven slechts één keer gedaan te worden: Doordat alle componenten worden beheerd binnen het Design Systeem, hoeven aanpassingen of verbeteringen slechts op één plaats te worden gedaan. Deze wijzigingen worden automatisch doorgevoerd in alle applicaties die het Design Systeem gebruiken.
• Alle componenten worden volledig herbruikbaar: De componenten die zijn ontwikkeld als onderdeel van het Design Systeem zijn niet alleen herbruikbaar binnen al onze applicaties, maar kunnen ook worden gebruikt door HVC en hun leveranciers. Dit bevordert de efficiëntie en samenwerking binnen het ecosysteem van HVC.

• Migreren van alle overige componenten, zoals die uit Drupal: We zullen de resterende componenten, zoals die uit Drupal, migreren naar het Design Systeem om volledige consistentie en herbruikbaarheid te garanderen. Mogelijk kunnen we ook de Twig templates centraliseren.
• Documenteren van alle componenten in Storybook: Om het gebruik van de componenten te vergemakkelijken en de samenwerking te verbeteren, zullen we alle componenten grondig documenteren in Storybook. Dit biedt een overzichtelijke en toegankelijke manier om de componenten te verkennen en te begrijpen.
• Drupal thema's gebruik te laten maken van de componenten (Webcomponents?): We zullen onderzoeken hoe we de Drupal thema's kunnen aanpassen om gebruik te maken van de componenten uit het Design Systeem. Dit kan mogelijk worden bereikt door het implementeren van Webcomponents of andere passende technologieën om een naadloze integratie te realiseren.