Het inzichtelijk maken van alle bruikbare componenten binnen een project en daar ook nog eens alle bijbehorende variabelen, data en visuele variaties live in kunnen aanpassen? Het kan allemaal, in Storybook.
Bij DIJ is dit inmiddels de ideale oplossing geworden tussen Front-end en Back-end. Front-end kan haar componenten uitwerken met een zogenaamde Mock-API , hierover later meer, en Back-end kan bijvoorbeeld exact zien welke data of properties een component kan ontvangen.
Daarnaast biedt Storybook o.a. de mogelijkheid om de Front-end uit te breiden en een groter geheel op te bouwen zoals een navigatie, header of footer zonder dat je daar lokaal een werkende omgeving voor nodig hebt. Het ontwikkelen van componenten kan namelijk in Storybook met zogenaamde stories.
Bij DIJ werken we nu standaard met Storybook en we willen niks anders meer!
Stories
Storybook werkt met ‘verhalen’, zogenaamde stories. Een story bevat een gerenderd UI (User Interface) component dat is opgebouwd uit properties en data (afhankelijk van het component).
Als voorbeeld nemen we een Button story met de daarbij behorende properties om een duidelijker beeld te schetsen van een een story.
Een button bevat in het bovenstaande voorbeeld de volgende properties:
- Rounded
Waar/Niet waar - $loading
Waar/Niet waar - Variant
Default/Transparant/Link waar Default het blauwe thema kleur is binnen dit project. - Size
Small - Children
Locatie om data in te tonen. In dit geval bedoelt voor tekst of een andere story (component) zoals een icoon.
Zoals je kunt zien is het Button component zo opgebouwd dat er verschillende variaties beschikbaar zijn die ook weer eenvoudig kunnen worden uitgebreid.
Een Button story zal logischerwijs onderdeel worden van een grotere story zoals een formulier waar de Button als een verzendknop zal kunnen fungeren met de $loading property op de status ‘Waar’ wanneer de knop wordt ingedrukt en het formulier bezig is met verzenden.
Of zoals in een top bar waar de Button story is ingezet als actie knop om de navigatie te laten verschijnen en weer te verbergen. In dit voorbeeld is er op de Children locatie in de story geen gebruik gemaakt van tekst maar is er een andere story ingeladen, namelijk een Icoon bestaande uit 3 witte strookjes, ook wel bekend als een ‘Hamburger’ icoon.
Mock-API
Nog een gunstige feature binnen Storybook is de Mock-API. Wij Front-end developers zijn hierdoor niet meer afhankelijk van de uiteindelijke productie-API.
Wanneer het Front-end team stories gaat uitwerken kunnen we deze gaan ontwikkelen met dummy data uit de zelf opgestelde Mock-API die de componenten van dynamische data voorziet waardoor de story werkt alsof het echte date is en direct klaar is voor gebruik met de echte API.
Het enige wat bij deze werkwijze nog van belang is, is dat de architectuur al is uitgedacht en de data benamingen zijn vastgesteld zodat deze in de Mock-API overeenkomen met de uiteindelijke productie-API. Als dit het geval is zijn de stories naadloos inzetbaar wanneer de productie API in werking wordt gesteld.
Hierdoor kunnen backend en frontend onafhankelijk van elkaar werken aan de oplevering. Wat de snelheid van het traject ten goede komt.
Automatisch testen van je stories.
Storybook biedt een mooie integratie met Cypress Component Tests. Hiermee kunnen we onze stories in Cypress gebruiken om unit tests voor onze components te maken. Dit scheelt ons tijd omdat we onze testbeds voor Cypress direct kunnen hergebruiken vanuit Storybook.
Door Cypress te gebruiken voor het unit testen van componenten kunnen we gemakkelijk de UX van een component doortesten op een visuele manier. Dankzij de tools van Cypress kunnen we alles van de kleinste elementen tot complete pagina’s testen.
Een ander voordeel van deze aanpak tegenover o.a. Jest, is dat we onze components kunnen testen in een echte browser in plaats van een emulator. Zo kunnen we ook testen of bepaalde elementen klikbaar zijn en niet verborgen achter een ander element, of testen of een element onder bepaalde omstandigheden de juiste afmetingen heeft.
Wil je meer weten over Storybook?
Kijk de talk van Gert Hengeveld terug die sprak op onze meetup!
