Home Onze tech: Viper Hoe werkt Viper onder de motorkap?

Hoe werkt Viper onder de motorkap?

Dit artikel is wat technischer van aard, dat is nodig om de werking goed uit te leggen. Indien het te technisch wordt, kun je beter het artikel Wat is Viper? lezen.

Overview

Viper heeft drie onderdelen: de Core, het Launchpad en de Wow (way of working). De elementen in de Viper Core zijn verdeeld over vier libraries:

  1. Componenten
  2. Modules
  3. Functies
  4. Back-end logica

Monorepo met NX

De Viper Core is een zogenaamde monorepo, opgezet met het NX framework. Dit framework biedt een aantal voordelen:

  • maakt het makkelijk om onze specifieke way of working te volgen;
  • eenvoudig nieuwe elementen toevoegen en aanpassen binnen de libraries;
  • vergroot de onderlinge samenwerking van de verschillende elementen over libraries heen;
  • gemakkelijk uitrollen van third party doorontwikkeling in de gebruikte (open source) technieken.

Taalkeuze

Binnen de Core wordt gebruik gemaakt van React in combinatie met Typescript voor de front-end componenten. Alle back-end logica is met Typescript geschreven. Daarmee zijn alle elementen in de Viper Core strongly typed. Dit maakt onze code robuuster, leesbaarder, gemakkelijker aan te passen en uit te breiden.  

Voor de publicatie van een library wordt er een build gedaan. Zo worden de bestanden omgezet naar Javascript bestanden. Ook worden in dit build-proces de typings-bestanden toegevoegd aan de libary.

Launchpad

Launchpad regelt tegelijkertijd de documentatie en de implementatie van elementen uit de Core. Elk element krijgt een aparte Story waarin de werking van het element te zien is. Door middel van Launchpad Parameters is het mogelijk om in de stories zelf de verschillende opties in te stellen. Onze designers maken gebruik van Figma om voor de verschillende componenten en modules designs maken. Waar relevant zijn deze designs toegevoegd aan een element in Launchpad. 

Headless

Het beheer, de opslag en de weergave van data worden binnen Viper los van elkaar geregeld. Zo kan klantdata bijvoorbeeld veilig opgeslagen zijn in een database, beheerd worden in een CRM systeem en gebruikt worden in een mijn omgeving. Hierdoor ben je heel flexibel. Mocht je in dit voorbeeld willen overstappen op een ander CRM systeem dan kan dit relatief eenvoudig. En als klanten in de toekomst ook self-service op een smartwatch verwachten, dan bouwen we simpelweg een extra kleine weergave. 

Styling overrides

Visuele componenten worden hergebruikt in verschillende projecten. De styling moet daarom aangepast kunnen worden aan de stijl van een nieuw project. Hiervoor gebruiken we de styling overrides, een systeem dat we zelf ontwikkeld hebben. Componenten uit de core worden gestyled middels een zogenaamd SCSS bestand. Net als in een normaal CSS bestand bepaalt een SCSS bestand de benodigde opmaak van een component. Een SCSS bestand bevat echter ook de projectspecifieke styling en kan de reguliere styling dynamisch overschrijven of aanvullen. We zijn hierin niet afhankelijk van oplossingen van derde partijen, omdat we dit in Viper gebouwd hebben. Iedereen met enige CSS ervaring kan de core componenten gebruiken en stylen op deze manier.

Versiebeheer

Alle Core libraries kunnen geïnstalleerd worden in projecten middels NPM, een geautomatiseerde verzameling van shell commands. Het versiebeheer binnen de Viper Core wordt vanzelf afgehandeld via Lerna. Lerna kijkt naar de commits die gedaan zijn, en baseert daarop welke libraries zijn geupdate en of het een minor of major update was. 

Tests

Het is erg belangrijk om er zeker van te zijn dat er geen fouten worden veroorzaakt tijdens het ontwikkelen van nieuwe functionaliteiten of bij het aanpassen van bestaande functionaliteiten. Daarom worden er automatische testen geschreven met behulp van Jest en de React Testing Library. De tests worden uitgevoerd bij het maken van pull requests, dit zorgt ervoor dat er geen dingen kunnen worden gepubliceerd als de tests niet slagen.

Kwaliteitscontrole

Naast onze tests en het gebruik van Typescript, gebruiken we ook een Linter om onze code kwaliteit te garanderen. Bij het doen van een commit wordt deze Linter uitgevoerd en als er problemen zijn dan worden deze automatisch opgemerkt en gemeld bij de developer in kwestie. Naast het voorkomen van problemen zorgt deze Linter er ook voor dat de code op uniforme wijze geschreven wordt wanneer meerdere developers aan een element werken. 

Docker en Nginx

Wanneer software gebouwd met Viper op een publieke server gehost wordt gebruiken we Docker en Nginx

Elke Viper library heeft een Dockerfile die de benodigde elementen opstart in een eigen container. Dit heeft twee voordelen: 

  1. de software draait systeem-onafhankelijk en is daardoor veel eenvoudiger uit te rollen op verschillende typen servers en 
  2. de software heeft geen last van eventuele andere software op de server

Nginx zorgt voor een laag tussen de gebruiker en de software. Dit creëert allerlei mogelijkheden, bijvoorbeeld op het gebied van performance. Met caching kunnen we onze data efficiënt opslaan en weergeven. Met load balancing wordt de gebruiker automatisch naar de minst drukke server gestuurd. Op die manier blijft de performance goed, ook bij hele grote bezoekersaantallen.

AVG en WCAG-proof

Viper is technisch gezien voorbereid op de richtlijnen voor webpagina’s zoals omschreven in de Algemene Verordering Gegevensbescherming (AVG) en de Web Content Accessibility Guidelines (WCAG). Elk contactformulier dat je aanmaakt heeft bijvoorbeeld de mogelijkheid om een ‘akkoordverklaring’ toe te voegen met een link naar je privacy policy. Een ander voorbeeld is dat pagina’s eenvoudig geschikt gemaakt worden voor een screenreader.

Meer weten over Viper?
Neem contact op met Nick