Frontend Storybook: Een Uitgebreide Gids voor Componentontwikkelomgevingen

In het steeds veranderende landschap van frontend-ontwikkeling is het bouwen van robuuste en onderhoudbare user interfaces (UI's) van cruciaal belang. Storybook is naar voren gekomen als een toonaangevende tool om deze uitdaging aan te gaan, en biedt een krachtige omgeving voor het ontwikkelen van UI-componenten in isolatie. Deze gids biedt een uitgebreide verkenning van Storybook, met de kernconcepten, voordelen, praktische implementatie en geavanceerde technieken om uw frontend-ontwikkelingsworkflow te verbeteren.

Wat is Storybook?

Storybook is een open-source tool voor het ontwikkelen van UI-componenten in isolatie. Het biedt een speciale omgeving waar u componenten onafhankelijk van uw hoofdapplicatie kunt bouwen, testen en documenteren. Deze isolatie stelt u in staat om u te concentreren op de functionaliteit en het uiterlijk van het component zonder gehinderd te worden door complexe applicatielogica of afhankelijkheden.

Beschouw Storybook als een levende style guide of componentbibliotheek die uw UI-componenten visueel weergeeft. Het stelt ontwikkelaars, ontwerpers en stakeholders in staat om componenten op een consistente en georganiseerde manier te bekijken en ermee te interageren, waardoor samenwerking wordt bevorderd en een gemeenschappelijk begrip van de UI wordt gewaarborgd.

Waarom Storybook gebruiken? De voordelen

Het integreren van Storybook in uw frontend-ontwikkelingsworkflow biedt een veelheid aan voordelen:

• Verbeterde herbruikbaarheid van componenten: Het ontwikkelen van componenten in isolatie stimuleert een modulaire aanpak, waardoor ze herbruikbaarder zijn in verschillende delen van uw applicatie of zelfs in meerdere projecten.
• Verbeterde ontwikkelingssnelheid: Storybook versnelt de ontwikkeling door u in staat te stellen u te concentreren op individuele componenten zonder de overhead van het uitvoeren van de volledige applicatie. U kunt snel itereren op componentontwerpen en functionaliteit.
• Vereenvoudigd testen: Storybook maakt het gemakkelijker om componenten in verschillende staten en scenario's te testen. U kunt verhalen maken die verschillende use cases vertegenwoordigen en visueel verifiëren dat het component zich gedraagt zoals verwacht.
• Uitgebreide documentatie: Storybook dient als levende documentatie voor uw UI-componenten. Het genereert automatisch documentatie op basis van uw componentcode en verhalen, waardoor het voor anderen gemakkelijk is om te begrijpen hoe ze deze kunnen gebruiken en aanpassen.
• Betere samenwerking: Storybook biedt een centrale hub voor ontwikkelaars, ontwerpers en stakeholders om samen te werken aan UI-componenten. Het maakt visuele beoordelingen, feedback en een gemeenschappelijk begrip van de UI-bibliotheek mogelijk.
• Vroege detectie van problemen: Door componenten in isolatie te ontwikkelen, kunt u problemen vroeg in de ontwikkelingscyclus identificeren en oplossen, voordat ze complexer en kostbaarder worden om op te lossen.
• Consistentie van het ontwerp: Storybook bevordert de consistentie van het ontwerp door een visuele referentie te bieden voor alle UI-componenten. Het zorgt ervoor dat componenten zich houden aan de ontwerprichtlijnen en een samenhangende uitstraling behouden in de hele applicatie.

Aan de slag met Storybook

Het instellen van Storybook is eenvoudig en het integreert naadloos met populaire frontend-frameworks zoals React, Vue en Angular.

Installatie

De gemakkelijkste manier om Storybook te installeren is met behulp van de command-line interface (CLI). Open uw terminal en navigeer naar uw projectdirectory. Voer vervolgens de volgende opdracht uit:

            npx storybook init
            

              
                Copy
              
            
          

Deze opdracht detecteert automatisch het framework van uw project en installeert de benodigde afhankelijkheden. Het maakt ook een .storybook-directory in uw project, die de configuratiebestanden voor Storybook bevat.

Uw eerste verhaal maken

Een "verhaal" in Storybook vertegenwoordigt een specifieke staat of use case van een component. Om een verhaal te maken, maakt u doorgaans een nieuw bestand in de src/stories-directory van uw project (of een vergelijkbare locatie, afhankelijk van uw projectstructuur). Het bestand moet een .stories.js- of .stories.jsx-extensie hebben (voor React) of het equivalent voor Vue of Angular.

Hier is een voorbeeld van een eenvoudig verhaal voor een React-knopcomponent:

            // src/stories/Button.stories.jsx
import React from 'react';

import { Button } from './Button'; // Assuming your Button component is in Button.jsx

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Large Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Small Button',
};

            

              
                Copy
              
            
          

In dit voorbeeld definiëren we een component genaamd Button en maken we vier verhalen: Primary, Secondary, Large en Small. Elk verhaal vertegenwoordigt een andere variant van de knopcomponent met verschillende props.

Storybook uitvoeren

Om Storybook uit te voeren, gebruikt u eenvoudigweg de volgende opdracht:

            npm run storybook
            

              
                Copy
              
            
          

Hiermee start u een lokale ontwikkelserver en opent u Storybook in uw browser. U zou uw verhalen moeten zien worden weergegeven in de Storybook-UI.

Kernconcepten van Storybook

Om Storybook effectief te gebruiken, is het belangrijk om de kernconcepten ervan te begrijpen:

• Componenten: De fundamentele bouwstenen van uw UI. Storybook is ontworpen om individuele componenten in isolatie te presenteren en te ontwikkelen.
• Verhalen: Vertegenwoordigen specifieke staten of use cases van een component. Ze definiëren de props en gegevens die aan het component worden doorgegeven, zodat u verschillende scenario's kunt visualiseren en testen.
• Addons: Breiden de functionaliteit van Storybook uit met verschillende functies zoals theming, toegankelijkheidstesten en het genereren van documentatie.
• Decorators: Wikkel componenten met extra functionaliteit, zoals het leveren van context of styling.
• Args: (Voorheen bekend als knobs) Hiermee kunt u interactief de props van een component wijzigen in de Storybook-UI. Dit is handig voor het verkennen van verschillende varianten en configuraties.
• Controls: De UI-elementen voor het wijzigen van Args, waardoor het gemakkelijk wordt om component-eigenschappen in de browser aan te passen.

Geavanceerde Storybook-technieken

Zodra u de basisprincipes van Storybook hebt begrepen, kunt u geavanceerde technieken verkennen om uw workflow verder te verbeteren:

Addons gebruiken

Storybook biedt een breed scala aan addons die de functionaliteit kunnen uitbreiden. Enkele populaire addons zijn:

• @storybook/addon-knobs: (Afgeschaft ten gunste van Args/Controls) Hiermee kunt u interactief de props van een component wijzigen in de Storybook-UI.
• @storybook/addon-actions: Geeft event handlers weer die worden geactiveerd door componentinteracties.
• @storybook/addon-links: Maakt links tussen verhalen, zodat u kunt navigeren tussen verschillende componentstatussen.
• @storybook/addon-docs: Genereert documentatie voor uw componenten op basis van uw code en verhalen.
• @storybook/addon-a11y: Voert toegankelijkheidstests uit op uw componenten om ervoor te zorgen dat ze bruikbaar zijn door mensen met een handicap.
• @storybook/addon-viewport: Hiermee kunt u uw componenten in verschillende schermformaten en apparaten bekijken.
• @storybook/addon-backgrounds: Hiermee kunt u de achtergrondkleur van uw verhalen wijzigen om het componentcontrast te testen.
• @storybook/addon-themes: Hiermee kunt u schakelen tussen verschillende thema's in uw Storybook.

Om een addon te installeren, gebruikt u de volgende opdracht:

            npm install @storybook/addon-name --save-dev
            

              
                Copy
              
            
          

Voeg vervolgens de addon toe aan uw .storybook/main.js-bestand:

            module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  features: {
    interactionsDebugger: true,
  },
};

            

              
                Copy
              
            
          

Decorators gebruiken

Decorators zijn functies die uw componenten omhullen met extra functionaliteit. Ze kunnen worden gebruikt om context, styling of andere globale configuraties te leveren.

Hier is een voorbeeld van een decorator die een themacontext biedt aan uw componenten:

            // src/stories/decorators/ThemeProvider.jsx
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme'; // Your theme object

export const ThemeDecorator = (Story) => (
  <ThemeProvider theme={theme}>
    <Story />
  </ThemeProvider>
);

            

              
                Copy
              
            
          

Om de decorator te gebruiken, voegt u deze toe aan de configuratie van uw verhaal:

            // src/stories/Button.stories.jsx
import React from 'react';
import { Button } from './Button';
import { ThemeDecorator } from './decorators/ThemeProvider';

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [ThemeDecorator],
};

            

              
                Copy
              
            
          

Geautomatiseerd testen met Storybook

Storybook kan worden geïntegreerd met verschillende testtools om het testen van uw UI-componenten te automatiseren. Enkele populaire testframeworks zijn:

• Jest: Een JavaScript-testframework dat kan worden gebruikt om unit tests te schrijven voor uw componenten.
• React Testing Library: Een testbibliotheek die zich richt op het testen van componenten vanuit het perspectief van een gebruiker.
• Cypress: Een end-to-end testframework dat kan worden gebruikt om de hele applicatie te testen, inclusief de UI-componenten.
• Playwright: Vergelijkbaar met Cypress, Playwright wordt gebruikt voor end-to-end testen op verschillende browsers en platforms.

Het Storybook-team onderhoudt ook een bibliotheek genaamd @storybook/testing-react (of iets dergelijks voor Vue/Angular) die hulpprogramma's biedt voor het testen van uw componenten in Storybook.

Uw Storybook publiceren

U kunt uw Storybook eenvoudig publiceren om deze met uw team of de bredere community te delen. Er zijn verschillende opties beschikbaar:

• Netlify: Een populair platform voor het implementeren van statische websites, waaronder Storybooks.
• GitHub Pages: Een gratis hostingservice van GitHub die kan worden gebruikt om uw Storybook te hosten.
• Chromatic: Een cloudgebaseerd platform dat speciaal is ontworpen voor het hosten en beheren van Storybooks. Chromatic biedt functies zoals visuele regressietests en samenwerkingstools.
• AWS S3: U kunt uw statische Storybook-bestanden hosten in een Amazon S3-bucket.

Om uw Storybook te publiceren, moet u doorgaans een statische versie van uw Storybook bouwen met behulp van de volgende opdracht:

            npm run build-storybook
            

              
                Copy
              
            
          

Hiermee wordt een storybook-static-directory (of iets dergelijks) gemaakt met de statische bestanden die kunnen worden geïmplementeerd op uw gekozen hostingplatform.

Best practices voor het gebruik van Storybook

Om de voordelen van Storybook te maximaliseren, volgt u deze best practices:

• Houd uw componenten klein en gefocust: Ontwerp uw componenten zo klein en gefocust mogelijk. Dit maakt ze gemakkelijker te testen, hergebruiken en documenteren.
• Schrijf uitgebreide verhalen: Maak verhalen die alle verschillende staten en use cases van uw componenten behandelen. Dit zorgt ervoor dat uw componenten grondig worden getest en gedocumenteerd.
• Gebruik addons verstandig: Kies addons die relevant zijn voor de behoeften van uw project en vermijd het toevoegen van te veel addons, omdat dit van invloed kan zijn op de prestaties.
• Documenteer uw componenten grondig: Gebruik de @storybook/addon-docs-addon om documentatie voor uw componenten te genereren. Dit maakt het voor anderen gemakkelijker om te begrijpen hoe ze deze kunnen gebruiken en aanpassen.
• Integreer Storybook in uw ontwikkelingsworkflow: Maak Storybook een integraal onderdeel van uw ontwikkelingsworkflow. Gebruik het om uw UI-componenten vanaf het begin van het project te ontwikkelen, testen en documenteren.
• Stel een duidelijke componentbibliotheekstructuur vast: Organiseer uw componentbibliotheek op een logische en consistente manier. Dit maakt het voor anderen gemakkelijker om componenten te vinden en te hergebruiken.
• Onderhoud uw Storybook regelmatig: Houd uw Storybook up-to-date met de laatste wijzigingen in uw UI-componenten. Dit zorgt ervoor dat uw documentatie correct is en dat uw componenten altijd worden getest tegen de nieuwste code.
• Gebruik versiebeheer: Sla uw Storybook-configuratie en verhalen op in versiebeheer (bijv. Git) om wijzigingen bij te houden en met anderen samen te werken.

Storybook in verschillende frameworks

Hoewel de kernconcepten vergelijkbaar blijven, verschillen de implementatiedetails van Storybook enigszins, afhankelijk van het frontend-framework dat u gebruikt.

Storybook voor React

React is een van de populairste frameworks voor het gebruik van Storybook. De officiële Storybook-documentatie biedt uitstekende bronnen en voorbeelden voor React-ontwikkelaars.

Storybook voor Vue

Storybook integreert ook naadloos met Vue.js. Vue-componenten kunnen gemakkelijk aan Storybook worden toegevoegd met een vergelijkbare aanpak als React.

Storybook voor Angular

Angular-ontwikkelaars kunnen Storybook gebruiken om een visuele componentbibliotheek voor hun Angular-applicaties te maken. Angular CLI-integratie maakt het installatieproces eenvoudig.

Globale perspectieven en voorbeelden

Bij het gebruik van Storybook in wereldwijde projecten is het belangrijk om rekening te houden met lokalisatie- en internationalisatieaspecten van uw UI-componenten. Bijvoorbeeld:

• Tekstrichting (RTL/LTR): Zorg ervoor dat uw componenten zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) tekstrichtingen ondersteunen. U kunt Storybook gebruiken om verhalen te maken die componenten in beide richtingen laten zien. Overweeg om bibliotheken zoals styled-components met de rtlcss-plugin te gebruiken om stijlstijlwijzigingen automatisch af te handelen.
• Datum- en tijdformaten: Gebruik de juiste datum- en tijdformattering op basis van de landinstelling van de gebruiker. U kunt bibliotheken zoals moment.js of date-fns gebruiken om datums en tijden correct te formatteren. Maak verhalen die componenten met verschillende datum- en tijdformaten laten zien.
• Valutaformaten: Geef valutawaarden weer in het juiste formaat voor de landinstelling van de gebruiker. U kunt bibliotheken zoals numeral.js of Intl.NumberFormat gebruiken om valutawaarden te formatteren. Maak verhalen die componenten met verschillende valutaformaten en -symbolen laten zien.
• Vertaling: Gebruik internationalisatie (i18n)-bibliotheken om uw UI-componenten in verschillende talen te vertalen. Storybook kan worden gebruikt om componenten met verschillende vertalingen te visualiseren. Bibliotheken zoals i18next worden vaak gebruikt.
• Toegankelijkheid: Houd u aan webtoegankelijkheidsrichtlijnen om ervoor te zorgen dat uw UI-componenten bruikbaar zijn door mensen met een handicap, ongeacht hun locatie.

Voorbeeld: Stel je een formuliercomponent voor dat wereldwijd wordt gebruikt. In een Storybook-verhaal zou je het volgende kunnen presenteren:

• Het formulier met labels en instructies vertaald in het Spaans.
• Hetzelfde formulier weergegeven met RTL-lay-out voor Arabisch sprekende gebruikers.
• Het formulier met een datumveld weergegeven met het formaat MM/DD/JJJJ voor de Verenigde Staten en DD/MM/JJJJ voor Europa.

Conclusie

Storybook is een krachtige tool die uw frontend-ontwikkelingsworkflow aanzienlijk kan verbeteren. Door een geïsoleerde omgeving te bieden voor het ontwikkelen van UI-componenten, bevordert het herbruikbaarheid, verbetert het de ontwikkelingssnelheid, vereenvoudigt het testen en vergemakkelijkt het de samenwerking. Of u nu een kleine website of een grootschalige applicatie bouwt, Storybook kan u helpen robuuste, onderhoudbare en consistente user interfaces te creëren.

Door de concepten en technieken die in deze gids worden beschreven te omarmen, kunt u het volledige potentieel van Storybook benutten en uitzonderlijke gebruikerservaringen creëren voor uw wereldwijde publiek.