Hoe zet je Storybook in als je bij een digital agency werkt?

Storybook: een fantastische tool om componenten geisoleerd te ontwikkelen. Een paar jaar geleden hoorde ik deze tool steeds vaker langskomen in gesprekken en las erover op online fora. Ik zou zelf geen front-end developer zijn als ik niet meteen een twinkeling in m’n ogen kreeg en op deze nieuwe tool dook.

Bij agencies, met hun snel wisselende projecten, kan de tijd voor tools als Storybook soms lastig te verantwoorden zijn in verhouding tot de omvang van het project. In deze talk deel ik mijn ervaringen, zodat jij als ontwikkelaar zelf kunt bepalen of Storybook waarde toevoegt aan je project.

Wat is Storybook precies

Ze leggen het zelf perfect uit: 'Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app.' Bron: https://storybook.js.org/docs/get-started .

Je kunt er dus componenten mee ontwikkelen in isolatie. Je kunt het eenvoudig installeren als npm package. Storybook komt met een eigen UI om de componenten te bekijken, die draait geisoleerd naast je project.

Ook biedt Storybook diverse add-ons om bijvoorbeeld tests te draaien met Playwright.

Voor welke type klanten zet je dit in?

Als je bij Picnic of Albert Heijn werkt, waar je een vaste set met componenten hebt die er altijd hetzelfde uit moet zien dan is Storybook je beste vriend. Projectleden kunnen meteen zien welke componenten er bestaan binnen de component library

Developers kunnen een nieuwe campagnepagina of website maken die volledig opgebouwd kan worden met componenten die al bestaan. Zo verdien je de investering die het onderhouden van Storybook kost makkelijk terug.

Wanneer je bij een agency werkt en veel kortlopende projecten doet kan de tijd om tooling als Storybook bij te houden soms lastig te verantwoorden zijn tegenover de grootte en de complexiteit van het project.

In welk project?

Zelf ben ik vaak begonnen met Storybook intergratie in een project. Op een gegeven moment merkte ik dat ik in de website zelf aan het ontwikkelen was, en niet meer in Storybook.

Toen ik na een maand storybook wilde opstarten zag ik een groot, rood scherm. De node modules van de website conflicteerden met de packages die Storybook nodig had. Componenten waren in sommige gevallen aangepast waardoor ik de Storybook configuratie moest aanpassen.

Het kost tijd om je Storybook config bij te houden.

In de 1,5 jaar dat ik nu bij Linku werk ben ik geen situatie tegengekomen die zich leende voor Storybook.

Tot een week geleden: Het ontwikkelen van een applicatie wat onderdeel is van een langer lopend project. Het design is afgerond, maar er staat nog geen API om tegenaan te babbelen. In dit geval kunnen we Storybook inzetten om de componenten geisoleerd te ontwikkelen zolang we nog geen passende front-end hebben om ze in te plaatsen.

Conclusie

Probeer het eens uit. Storybook is een krachtige tool met veel opties. Bespreek aan de start van het project met je collega developers wat de Storybook strategie is. Spreek af waar je een story van maakt. Is een story van de navigatiebalk overbodig, of moet die ook in Storybook komen?

Kies je voor Storybook, wees je dan bewust dat je de configuratie bestanden (stories) moet updaten wanneer je component verandert.

Het zou ook kunnen zijn dat Storybook een tijdelijke meerwaarde heeft. Mijn advies is dan: gebruik het zolang het waarde heeft, en verwijder het (in overleg uiteraard) als het geen meerwaarde meer heeft.