Hoe we het deden
Op basis van het ontwerp zette Corné een WordPress omgeving op waar alle content in te beheren was. Na deze stap hadden we een werkende website, waarin ik vervolgens de content ging stijlen. Als er tussentijds nog iets moest veranderen, moesten Corné en ik iedere keer afstemmen hoe we deze wijziging gingen aanpakken, wie als eerste aan zet was, en wie het uiteindelijke resultaat controleerde. Niet efficiënt, dat moest anders.
Hoe het beter kon
Geïnspireerd door de structuur en het gemak van Storybook, de documentatie tool die wij gebruiken voor onze React componenten, ben ik aan de slag gegaan om een tool te ontwikkelen waarmee we dezelfde structuur konden aanbrengen voor onze Twig / WordPress componenten. Hier is onze eigen Vollan Twig-styleguide uit gekomen. Zodra we een akkoord hebben van een klant op een websiteontwerp kunnen Corné en ik tegelijk aan de slag. Ik ontwikkel website-elementen in de styleguide waarbij er ook gedocumenteerd wordt welke input het element verwacht. Deze componenten worden direct ingeladen in de front-end van WordPress.
Wat het voor ons doet:
- Ik ben niet afhankelijk van WordPress voor mijn front-end ontwikkeling
- We hebben een overzicht van alle componenten die gebouwd zijn
- Voor vragen over componenten kan ik Corné verwijzen naar de documentatie
- Als er wijzigingen nodig zijn voor een element hoeft dit maar op één plek te gebeuren, en wordt zowel de documentatie als de website geüpdatet
- Alle componenten kunnen systematisch gebouwd en gecontroleerd worden
Terugkijkend op het afgelopen jaar kan ik concluderen dat het een goede zet is geweest om deze nieuwe techniek te ontwikkelen. Het eerste project waarbij deze tool is gebruikt ging moeizamer dan ik verwachtte. Ik was minder grondig in documenteren dan ik dacht, en Corné kon niet zomaar de data van WordPress in een template gooien, maar moest deze data conformeren aan de componenten. We moesten leren en beter worden.
Geslaagd?
We hadden door kunnen gaan op de oude manier, want die werkte ook. Gelukkig hebben we dat niet gedaan en hebben we de tijd genomen om ons proces te analyseren en hier een nieuwe interne werkwijze met bijbehorende tool voor te ontwikkelen. Natuurlijk waren er ook hobbels op de weg. Maar inmiddels is het een jaar later en we zijn minder tijd kwijt aan communicatie en bugs oplossen en houden we meer tijd over om een website te bouwen die steeds een beetje beter is dan de vorige. En met nog meer werkplezier dan daarvoor.
Blijven ontwikkelen
En nu? We zouden geen developers zijn als we kijkend naar de huidige tool niet al een betere verzonnen hebben. Er wordt op de achtergrond al gewerkt aan een nieuwe versie op basis van React, Symfony en yaml config files voor iedere component. Hiermee maken wij ons werk nog leuker, en de foutmarge weer een stukje kleiner.
Ben je benieuwd naar de styleguide? Stuur me een berichtje en ik deel hem graag met je!
