Codekraker 13: Marco Slooten - Werkenbijtopicus
naar topicus.nl
naar topicus.nl
Codekraker 13: Marco Slooten

Codekraker 13: Marco Slooten

‘Hergebruiken van componenten is met deze tool een no-brainer.’

Maak een component library met Storybook

Probeer zelf niet opnieuw het wiel uit te vinden. Dat principe is typisch Topicus. Met veel getalenteerde developers is de kans namelijk groot dat wat je probeert te bouwen, in een zekere vorm al door iemand is gemaakt. Maar ben je daadwerkelijk iets heel nieuws aan het bouwen, dan wil je wél dat het makkelijk beschikbaar is voor je collega’s. Zowel binnen je team als daarbuiten. Gebruik daarvoor een component library. En als je het mij vraagt, ga dan voor Storybook.

De regel binnen ons team: elk component dat (waarschijnlijk) hergebruikt gaat worden, moet in deze component library terecht komen. Alleen dan hebben we onze bouwstenen op één centrale plek bij elkaar staan. Wanneer je als developer dan een bepaalde button of grafiek nodig hebt, werp je een blik in de component library en zie je direct of het al beschikbaar is.

De perfecte tool hiervoor is Storybook, waar je per component een aparte pagina krijgt. Daar zie je het werkende component, kun je er mee spelen en zie je wat de inputs en outputs zijn. Kortom: alles wat je nodig hebt om het component zelf te kunnen gebruiken. Daarnaast voegen we vaak nog een stukje documentatie toe over het optimale gebruik van het component. Storybook genereert dan een statische website die je makkelijk ergens kunt hosten, bijvoorbeeld op Github Pages of op je intranet. Je kunt developers die één van jouw componenten willen gebruiken dan makkelijk dat linkje sturen, zodat ze weten hoe het er uit ziet en hoe het werkt. Het enige dat ze dan nog moeten doen is het component zelf in hun code importeren.

Ook voor het ontwikkelen van nieuwe componenten is het ideaal. Je hebt een soort sandbox omgeving die helemaal los staat van je applicatie. Je hoeft tijdens het ontwikkelen dus niet iedere keer je applicatie te draaien. Een stuk simpeler en overzichtelijker dus. Ook loop je geen risico meer dat een component alleen in jouw applicatie werkt. Want, werkt het in Storybook, dan moet het ook op andere plekken werken.

Zo’n tool om je componenten te managen is echt onmisbaar in een goede samenwerking. Heb je componenten die hergebruikt kunnen worden, dan is Storybook een no-brainer. Een fijne developer-experience én je kunt de code gemakkelijk delen. Dat scheelt weer documentatie schrijven!

Voorbeeld van een component uit onze applicatie.

Zie dit voorbeeld van een component uit onze applicatie. Het is een balkje waar in je snel kunt zien hoe een toets gemaakt is. Je voert in hoeveel leerlingen een onvoldoende, matig, voldoende of goed scoorden en het balkje laat met kleuren in één oogopslag zien hoe de verdeling is. In Storybook kan ik deze data live aanpassen, zodat ik meteen zie hoe dat eruit komt te zien.

Benieuwd naar andere codekrakers? Check ze hier.