De toegevoegde waarde van Storybook bij het bouwen van webapplicaties

Front-End developers weten dat de ontwikkeling van Front-End technieken nooit stil staat. De ontwikkeling van frameworks als React, Vue, Angular en Svelte is de laatste jaren flink gegroeid. Daarnaast komen er steeds vaker handige tools beschikbaar die het leven van een frontender net iets makkelijker kunnen maken. Deze keer kijken we naar Storybook en wat de meerwaarde hiervan kan zijn zowel voor een developer als voor andere disciplines. In eerste plaats moeten we weten wat Storybook is, en waar het voor gebruikt kan worden.

Wat is Storybook?

Het maken en onderhouden van een style guide is over het algemeen een uitdaging. Storybook is een open source framework dat het eenvoudiger maakt om de user interface van projecten te bouwen, documenteren, testen en demonstreren.

Storybook kan gebruikt worden als playground voor UI componenten. Doordat Storybook zelf buiten de applicatie draait, kunnen we het gedrag van de componenten in Storybook aanpassen naar een gewenste situatie, zonder dat dit invloed heeft op de componenten in de applicatie.

De huidige versies van Storybook ondersteunen functionaliteiten die een groot aantal onduidelijkheden in de moderne workflow voor webontwikkeling opvult.

Storybook ondersteunt de meest gangbare Front-End frameworks van het moment zoals React, Vue en Angular, maar is ook vanuit native JavaScript te gebruiken.

Wat is de story van Storybook?

Uit de behoefte om componenten in een geïsoleerde omgeving te kunnen definiëren, developen en de UI te kunnen testen, begon Storybook in april 2016 met een eerste release van versie 1.0 vanuit de Kadira startup (de originele developer van Storybook), waarna in september van het zelfde jaar versie 2.0 vrijgegeven werd.

Na dat de startup werd stopgezet en het project dood werd verklaard, volgde er een korte break en werd het project in 2017 door de open source verder omarmd. Inmiddels is versie 6.3 gereleased (juni 2021). De hele storybook story is te vinden op https://storybook.js.org/blog/the-storybook-story/

Ondertussen hebben ze meer dan 10.000 github stars en 290k maandelijkse downloads.

Wie kunnen Storybook gebruiken en hoe?

Developers binnen het team zullen Storybook gebruiken als werkruimte om componenten op dezelfde manier neer te zetten. Een voordeel is dan ook dat de opgedane kennis van Storybook te gebruiken is bij elk framework dat momenteel door Storybook ondersteunt wordt.

Storybook kan opengesteld worden voor externe developers, wat interessant kan zijn voor open source ontwikkeling. Hiervoor kan Storybook vooral ingezet worden als documentatie waarbij de API van de componenten wordt uitgelegd.

Voor UX/UI designers kan Storybook als onderdeel dienen van hun design system met koppelingen naar o.a. Frontify waardoor het als gemeenschappelijk bron kan dienen. Als er aanpassingen gedaan moeten worden of er een nieuw component ontwikkeld is, hebben ze gelijk alle (nieuwe) componenten tot hun beschikking

Naast dat het documentatie oplevert, heeft het nog een voordeel dat de stakeholders sneller een nieuwe component kunnen beoordelen op het design en functionaliteit en niet afhankelijk zijn van een nieuwe release. Ook kan Storybook gebruikt worden voor verdere communicatie binnen of buiten het bedrijf.

Om Storybook te gebruiken binnen een project, moet er wel rekening gehouden worden met het gekozen framework van het project. Zo zal de installatie en de structuur/syntax voor React net iets even anders zijn dan voor bijvoorbeeld Vue of Angular.

Storybook is gebaseerd op componenten: maak daarom componenten zo compact mogelijk. Terwijl een project groeit met steeds meer componenten, is het verstandig om de volgende richtlijnen te hanteren:

Je codeert de stories in Storybook om een component weer te geven, maar het kan ook op zichzelf documentatie worden over hoe het component te implementeren is.
Heldere en duidelijke code. Het doel is om te begrijpen hoe je het component kunt gebruiken zonder te veel na te denken.
Om dit te doen, probeer zo statisch mogelijk te zijn: vermijd abstracties, herhaal indien nodig, vermijd elk soort algoritme.
Een juiste benaming en locatie van je story, zodat deze overeenkomt met je codebase

Op het eerste gezicht lijkt Storybook alleen te zijn bedoeld voor zo gezegd ‘domme componenten’ die alleen gebruikt worden voor de user interface. Door de complexere componenten te isoleren en business logica te verminderen, kunnen deze echter prima binnen Storybook gebruikt worden waarbij de focus verlegd wordt van de functionaliteit naar het component zelf.

Storybook addons

In de basis is Storybook vrij compleet, maar dat wil niet zeggen dat we er niet meer mee kunnen doen. Daarom zijn er tal van addon’s voor te vinden die net even dat stukje extra functionaliteit kunnen geven.

Een aantal veel gebruikte addons zijn:

Links - dit kan gebruikt worden om componenten onderling te verbinden om demo’s of prototypes mee te maken.
Viewport - met Storybook Viewport Addon kunnen jouw verhalen in Storybook in verschillende formaten en lay-outs worden weergegeven. Dit helpt bij het bouwen van responsieve componenten in Storybook.
Actions – geeft data weer in de UI na het uitvoeren van een event handler
Accessibillty - test je componenten tegen de huidige webstandaard
Docs – standaard heeft elke story al een DocsPage. Mocht deze niet voldoende zijn kan er gebruik gemaakt worden van deze addon waarna er meer mogelijkheden zijn voor documentatie

Conclusie

Storybook kan optimaal functioneren als het gebruikt wordt door developers, UX/UI developers en de stakeholders. Door combinatie van deze verschillende disciplines levert Storybook een grote meerwaarde voor het ontwikkelen en het onderhouden van webapplicaties.

Zelf aan de slag?

Wil je zelf aan de slag met Storybook, maar kan jouw team wel iemand gebruiken die hier ervaring mee heeft? Mijn mede-frontenders bij ShareValue en ikzelf hebben hier ervaring mee, werken graag met Storybook en komen dan ook graag jouw team helpen bij het opzetten hiervan.

Bronnen

Storybook: https://storybook.js.org/

Addons: https://storybook.js.org/addons

Storybook Story: https://storybook.js.org/blog/the-storybook-story/

Deel deze pagina:

Auteur

Wietze

Developer

Heb je vragen over dit onderwerp of zou je Wietze willen inhuren voor een vergelijkbare opdracht?

Neem contact met ons op

Lees ook onze andere berichten

Blog

Grenzen verleggen: verhuizen naar Nederland met ShareValue

Het verhuizen naar een nieuw land is niet alleen een “change of scenery”. Het is een avontuur vol uitdagingen, persoonlijke groei en kansen. In deze blog vertel ik graag over mijn reis: een reis die begon in het zonnige Zuid-Afrika en die me leidde naar de schilderachtige landschappen van Nederland.

Strapi: het open-source headless Content Management Systeem

In de snel veranderende wereld van Front-End development is er behoefte aan flexibele en schaalbare oplossingen. Een nauw met elkaar verworven systeem is niet altijd schaalbaar en flexibel en kan daardoor moeilijk meebewegen met business requirements en development-behoeften. Om deze flexibiliteit te bieden, kan gebruik worden gemaakt van een headless oplossing: een architectuur waarbij de Front-End applicatie losgekoppeld wordt van de Back-End. Omdat de content op deze manier losstaat, kunnen ontwikkelaars elk gewenst framework gebruiken. Dit maakt development flexibel en toekomstbestendig.

GraphQL, de query taal om te spelen met API’s

GraphQL is een query language voor API’s die de aangeboden data verrijkt en begrijpelijk maakt voor ontwikkelaars. Dit zorgt ervoor dat de client (eindgebruiker) op een efficiënte manier alleen de data krijgt waar op dat moment behoefte aan is. GraphQL is in 2015 ontworpen door Facebook (tegenwoordig Meta) om de API’s snel en flexibel te verwerken voordat het door de Front-End aangesproken kan worden.