Interne tools voor consistente code kwaliteit bij Reach Digital

Naast kwaliteit van de code die we bij e-commerce bureau Reach Digital schrijven, vinden we ook de leesbaarheid van onze code erg belangrijk. We willen dat de code die we opleveren is voorzien van een consistente en nette opmaak, zodat deze voor andere developers sneller te lezen en te begrijpen is. Het handmatig controleren, organiseren en opmaken van code voelt voor veel developers alleen vaak aan als een vervelend karwei.

Om deze last bij onze developers weg te nemen, maken we bij Reach Digital gebruik van tools die dit handmatige proces automatiseren. Het automatiseren is minder foutgevoelig, zorgt voor nog meer consistentie, geeft de efficiëntie een boost en bespaart tijd. Met deze automatisering verbeteren we bovendien de developer experience, want het maakt development leuker.

ESLint

Het controleren van Javascript hebben we geautomatiseerd door gebruik te maken van de ESLint integratie. Deze tool controleert de validiteit van de geschreven code; zijn er bijvoorbeeld overbodige functies geschreven of worden er functies verkeerd gebruikt? Daarnaast geeft de tool suggesties en advies om de kwaliteit van de code te verbeteren.

Deze controles, suggesties en adviezen worden gebaseerd op de vooraf ingestelde configuratie (set met regels) waarin is vastgelegd op welke ‘fouten’ ESLint wel of niet moet letten.

Bij Reach Digital hebben we één standaard configuratie ingesteld welke door alle developers wordt gebruikt. We hebben deze gebaseerd op een populaire configuratie uit de community (Airbnb). Onze eigen configuratie is specifiek ingesteld voor Magento, Web Components en React. Hierdoor kunnen we ESLint zo efficiënt mogelijk gebruiken.

Stylelint

Waar ESLint de code in JavaScript controleert en valideert, doet Stylelint dit voor CSS. De tool geeft, net als ESLint, suggesties voor het beter schrijven van code. De kwaliteit kan hierdoor direct worden verbeterd en mogelijke fouten kunnen direct worden hersteld.

We hebben aan Stylelint het gebruik van de browserlist package toegevoegd. Deze package geeft aan wanneer gebruikte CSS code niet functioneert in (één van) de meest populaire browsers in het geconfigureerde continent.

Een tweede toevoeging is het doorvoeren van een logische sortering van styling properties. Gerelateerde properties worden zo gesorteerd, dat deze altijd bij elkaar staan. Voorbeelden van gerelateerde properties zijn ``color`` en ``font-size`` of ``display: grid`` en ``grid-gap``.

Ook bij Stylelint maken we gebruik van één standaard configuratie welke wordt gebruikt door alle developers. Deze is gebaseerd op een configuratie waarin standaarden zijn opgenomen van onder andere Google en Airbnb.

Prettier

Om de opmaak van de code in onder andere JavaScript, CSS en PHP te kunnen automatiseren, maken we gebruik van Prettier.

Het integreren van Prettier heeft veruit de meeste impact gehad op ons development proces, omdat het de code visueel aanpast (opmaakt). Het voorziet de code bijvoorbeeld van een nette indenting (twee/vier spaties i.p.v. een tab) en splitst regels op wanneer deze het maximaal aantal karakters voor één regel overschrijden (meer dan 100 karakters). Doordat developers tijdens het ontwikkelen niet meer over de opmaak van hun code na hoeven te denken, kunnen zij zich volledig focussen op het schrijven van hoge kwaliteit code.

Voor Prettier hebben we een eigen configuratie ingesteld. In eerste instantie gebaseerd op aangedragen voorkeuren van het team, maar vervolgens on the fly uitgekristalliseerd tot een standaardconfiguratie die we nu bedrijfsbreed gebruiken.

Optimaliseren

Het geautomatiseerd controleren, organiseren en opmaken van code zorgt dus dat deze tijdens het schrijven ‘stabieler is’: Mogelijke fouten en verbeteringen komen direct aan het licht, zogenaamde edge cases komen minder voor en bedrijfsbreed worden dezelfde coding standards gehanteerd. Het is een mooi voorbeeld van een innovatie die vanuit de behoefte van het development team is doorgevoerd.

We vinden het belangrijk om het team de mogelijkheid te geven om dit soort innovaties (of op gebieden als tooling, klantcontact, interne communicatie, algemene werkwijze etc.) aan te dragen. Voor hen zijn optimalisatiekansen immers het meest zichtbaar. Zo willen we op de lange termijn zoveel mogelijk processen die als last worden ervaren optimaliseren of zelfs wegautomatiseren.