De Voskamp Groep

De Voskamp Groep is van een klein familiebedrijf handelend in ijzerwaren, uitgegroeid tot een veelzijdig bedrijf actief in de bouw, industrie, beveiliging en verduurzaming met meer dan 500 medewerkers! Wij bouwden de nieuwe Corporate website!

Corporate website

De Voskamp Groep kwam bij ons met de vraag om de corporate website compleet te vernieuwen. De nieuwe website moest modern aanvoelen, voldoen aan de huidige standaard in SEO en Core Web Vitals en gemakkelijk zelf te updaten zijn met blogs en informatie. Ook is het belangrijk om de verschillende divisies een eigen omgeving te geven waarin divisie specifieke informatie, links, productinformatie en contactinformatie kan worden geplaatst.  

Plan van aanpak

Dit project zijn we met een team van 7 personen gestart waaronder 5 developers,  1 scrum master en 1 product owner. Het begon met een sprint planning waar de developers de user stories d.m.v. scrum poker hebben ingeschat. Na de sprint planning is het team weer bij elkaar gekomen om het resultaat van de ingeschatte stories te bespreken. Vervolgens is het team direct aan de slag gegaan met het opzetten van het project.

Strapi CMS

Bij de start van de opdracht is een matrix gemaakt met de voor- en nadelen van elk framework en CMS voor dit specifieke project. In dit geval hebben we in overleg met Voskamp gekozen voor het Strapi CMS. Hieronder een aantal voordelen van Strapi:

  • Headless CMS
  • Zelf hosting
  • Javascript als programmeertaal
  • Component based pagina’s aanmaken

Onze collega Jelmer heeft een blog geschreven over alle voordelen van Strapi. Het grote verschil van een Headless CMS vergeleken met een traditioneel CMS is dat er geen presentatielaag aanwezig is. In WordPress is het mogelijk content te beheren en tegelijkertijd maakt WordPress de pagina’s met daarin de content en styling aan. Handig voor veel toepassingen! Een headless CMS kan dus geen pagina’s genereren. Het is wel mogelijk om data op te halen door middel van een API. Wat dit interessant maakt is dat hierdoor meer vrijheid is om te bepalen waar de front-end in gebouwd gaat worden. Dit zorgt voor meer flexibiliteit en maakt het makkelijker om grotere projecten te bouwen en te schalen. 

Tegenwoordig zijn er meerdere partijen die een eigen Headless CMS bieden, denk aan Contentful en GraphCMS. Zij maken het voor de gebruiker makkelijk door zelf de hosting en opslag van de data te regelen. Je kunt als gebruiker dus direct starten met het vullen van je content. Het nadeel hiervan is dat je de data en het CMS zelf niet in eigen beheer hebt. Voor Blue Flamingos en Voskap is dit daarom geen optie.

Een ander voordeel van Strapi is dat het gebruik maakt van JavaScript als programmeertaal. Voor ons is dit prettig omdat we in de front-end met Next.js ook JavaScript gebruiken. Dit betekent dat we niet constant hoeven te switchen tussen verschillende programmeertalen.

Voskamp Groep heeft als eis dat de contentbeheerder de pagina’s zelf moet kunnen inrichten. De structuur in het CMS moet overzichtelijk en simpel zijn zodat er niet steeds een programmeur bij gehaald moet worden wanneer een aanpassing in de content nodig is. Strapi biedt de mogelijkheid om de content in componenten op te slaan. Een component is bijvoorbeeld een header of een blokje waar tekst en een afbeelding getoond worden. Op die manier kun je dus per pagina zelf bepalen welke componenten je wil gebruiken. Hieronder een voorbeeld van hoe we dat op onze eigen Blue Flamingo’s website hebben gedaan.

Componenten Strapi Blue Flamingos Afbeelding: Componenten in Strapi van de website van Blue Flamingos 
Component Bel Me Terug Blue Flamingos Afbeelding: Compontent weergegeven op de website van Blue Flamingos

Nextjs in de frontend

Aan de voorkant hebben we voor Next.js gekozen. Hieronder een paar van de vele mooie features die Next.js te bieden heeft:

  • Statische pagina’s genereren
  • Afbeeldingen automatisch optimaliseren voor SEO
  • Een testlink voor iedere nieuwe feature i.c.m. Vercel hosting

Een van de vele mooie features die Nextjs biedt is het statisch renderen van de pagina’s. Dit houdt in dat de pagina’s inclusief dynamische data van tevoren gegenereerd worden. Wanneer de bezoeker naar een pagina navigeert kan de pagina direct getoond worden omdat het al gegenereerd is. Maar wacht eens even? Hoe kun je op een statische pagina, wat vooraf wordt gegenereerd, content laten zien dat bijvoorbeeld pas 1 minuut geleden is toegevoegd in het CMS vraag jij je af? Een goede vraag! Nextjs heeft hiervoor een mooie feature genaamd Incremental Static Regeneration. Hiermee wordt een pagina, nadat een bezoeker op is geland, opnieuw gegenereerd. Super handig voor SEO dus. Op deze manier wordt de pagina mega snel ingeladen met de meest recente content.

Verder biedt Next.js de functionaliteit om afbeeldingen automatisch te optimaliseren voor SEO. De afbeeldingen worden in verschillende formaten opgeslagen zodat er op iedere device een geschikte grootte weergegeven kan worden. Deze functionaliteit is in samenwerking met een aantal developers van Google gemaakt.

Voor dit project werken onze developers aan een eigen feature in de frontend. Denk hierbij bijvoorbeeld aan een header component die gebouwd moet worden of de zoekfunctie op de homepagina. Wanneer een developer de code voor zijn/haar feature heeft afgerond, wordt het samengevoegd met de rest van de code. Voordat het wordt samengevoegd, willen we dat de feature eerst getest wordt door de product owner/stakeholders van Voskamp. Vercel maakt dit mogelijk door voor iedere feature een testlink aan te maken die eenvoudig gedeeld kan worden met Voskamp. Op deze manier is het testen en feedback verzamelen per feature goed geregeld!

Het resultaat is een prachtige moderne website waar we erg trots op zijn!