Frontend Storybook: En Omfattende Guide til Komponentudviklingsmiljøer

I det stadigt udviklende landskab af frontend-udvikling er opbygning af robuste og vedligeholdelsesvenlige brugergrænseflader (UI'er) altafgørende. Storybook er dukket op som et førende værktøj til at tackle denne udfordring og tilbyder et kraftfuldt miljø til at udvikle UI-komponenter isoleret. Denne guide tilbyder en omfattende udforskning af Storybook, der dækker dets kernebegreber, fordele, praktiske implementering og avancerede teknikker til at forbedre dit frontend-udviklingsarbejdsforløb.

Hvad er Storybook?

Storybook er et open source-værktøj til at udvikle UI-komponenter isoleret. Det giver et dedikeret miljø, hvor du kan bygge, teste og dokumentere komponenter uafhængigt af din hovedapplikation. Denne isolering gør det muligt for dig at fokusere på komponentens funktionalitet og udseende uden at blive hindret af kompleks applikationslogik eller afhængigheder.

Tænk på Storybook som en levende stilguide eller et komponentbibliotek, der visuelt viser dine UI-komponenter. Det giver udviklere, designere og interessenter mulighed for at gennemse og interagere med komponenter på en konsekvent og organiseret måde, hvilket fremmer samarbejde og sikrer en fælles forståelse af UI'en.

Hvorfor bruge Storybook? Fordelene

Integration af Storybook i dit frontend-udviklingsarbejdsforløb tilbyder en lang række fordele:

• Forbedret genanvendelighed af komponenter: Udvikling af komponenter isoleret opmuntrer til en modulær tilgang, hvilket gør dem mere genanvendelige på tværs af forskellige dele af din applikation eller endda på tværs af flere projekter.
• Forbedret udviklingshastighed: Storybook fremskynder udviklingen ved at lade dig fokusere på individuelle komponenter uden omkostningerne ved at køre hele applikationen. Du kan hurtigt gentage komponentdesign og funktionalitet.
• Forenklet testning: Storybook gør det lettere at teste komponenter i forskellige tilstande og scenarier. Du kan oprette historier, der repræsenterer forskellige brugssager og visuelt verificere, at komponenten opfører sig som forventet.
• Omfattende dokumentation: Storybook fungerer som en levende dokumentation for dine UI-komponenter. Den genererer automatisk dokumentation baseret på din komponentkode og historier, hvilket gør det nemt for andre at forstå, hvordan de skal bruge og tilpasse dem.
• Bedre samarbejde: Storybook giver et centralt knudepunkt for udviklere, designere og interessenter til at samarbejde om UI-komponenter. Det giver mulighed for visuelle anmeldelser, feedback og fælles forståelse af UI-biblioteket.
• Tidlig opdagelse af problemer: Ved at udvikle komponenter isoleret kan du identificere og løse problemer tidligt i udviklingscyklussen, inden de bliver mere komplekse og dyre at rette.
• Designsystemets konsistens: Storybook fremmer designsystemets konsistens ved at give en visuel reference for alle UI-komponenter. Det sikrer, at komponenter overholder designretningslinjerne og bevarer et sammenhængende udseende på tværs af applikationen.

Kom i gang med Storybook

Opsætning af Storybook er ligetil, og det integreres problemfrit med populære frontend-frameworks som React, Vue og Angular.

Installation

Den nemmeste måde at installere Storybook på er ved hjælp af kommandolinjegrænsefladen (CLI). Åbn din terminal, og naviger til din projektmappe. Kør derefter følgende kommando:

            npx storybook init
            

              
                Copy
              
            
          

Denne kommando registrerer automatisk dit projekts framework og installerer de nødvendige afhængigheder. Det vil også oprette en .storybook-mappe i dit projekt, som indeholder konfigurationsfilerne til Storybook.

Oprettelse af din første historie

En "historie" i Storybook repræsenterer en specifik tilstand eller brugssag for en komponent. For at oprette en historie vil du typisk oprette en ny fil i dit projekts src/stories-mappe (eller en lignende placering, afhængigt af din projektstruktur). Filen skal have en .stories.js eller .stories.jsx-udvidelse (for React) eller det tilsvarende for Vue eller Angular.

Her er et eksempel på en simpel historie for en React-knapkomponent:

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

import { Button } from './Button'; // Antager at din Button-komponent er i Button.jsx

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

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Primær knap',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Sekundær knap',
};

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

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

            

              
                Copy
              
            
          

I dette eksempel definerer vi en komponent kaldet Button og opretter fire historier: Primary, Secondary, Large og Small. Hver historie repræsenterer en forskellig variation af knapkomponenten med forskellige egenskaber.

Kørsel af Storybook

For at køre Storybook skal du blot bruge følgende kommando:

            npm run storybook
            

              
                Copy
              
            
          

Dette vil starte en lokal udviklingsserver og åbne Storybook i din browser. Du bør se dine historier vist i Storybook UI.

Kernebegreber i Storybook

For effektivt at bruge Storybook er det vigtigt at forstå dets kernebegreber:

• Komponenter: De grundlæggende byggesten i din UI. Storybook er designet til at fremvise og udvikle individuelle komponenter isoleret.
• Historier: Repræsenterer specifikke tilstande eller brugssager for en komponent. De definerer de egenskaber og data, der sendes til komponenten, så du kan visualisere og teste forskellige scenarier.
• Addons: Udvider Storybooks funktionalitet med forskellige funktioner som temaer, tilgængelighedstest og dokumentationsgenerering.
• Dekoratorer: Indpak komponenter med yderligere funktionalitet, såsom at levere kontekst eller styling.
• Args: (Tidligere kendt som knapper) Gør det muligt for dig at ændre egenskaberne for en komponent interaktivt i Storybook UI. Dette er nyttigt til at udforske forskellige variationer og konfigurationer.
• Kontrolelementer: Brugergrænsefladeelementerne til at ændre Args, hvilket gør det nemt at justere komponentegenskaber i browseren.

Avancerede Storybook-teknikker

Når du først har forstået det grundlæggende i Storybook, kan du udforske avancerede teknikker for yderligere at forbedre dit workflow:

Brug af Addons

Storybook tilbyder en bred vifte af addons, der kan udvide dens funktionalitet. Nogle populære addons inkluderer:

• @storybook/addon-knobs: (Forældet til fordel for Args/Controls) Gør det muligt for dig at ændre egenskaberne for en komponent interaktivt i Storybook UI.
• @storybook/addon-actions: Viser hændelseshåndterere, der udløses af komponentinteraktioner.
• @storybook/addon-links: Opretter links mellem historier, så du kan navigere mellem forskellige komponenttilstande.
• @storybook/addon-docs: Genererer dokumentation for dine komponenter baseret på din kode og historier.
• @storybook/addon-a11y: Udfører tilgængelighedstjek på dine komponenter for at sikre, at de kan bruges af personer med handicap.
• @storybook/addon-viewport: Gør det muligt for dig at se dine komponenter i forskellige skærmstørrelser og enheder.
• @storybook/addon-backgrounds: Gør det muligt for dig at ændre baggrundsfarven på dine historier for at teste komponentkontrast.
• @storybook/addon-themes: Gør det muligt for dig at skifte mellem forskellige temaer i din Storybook.

For at installere en addon skal du bruge følgende kommando:

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

              
                Copy
              
            
          

Tilføj derefter addon'en til din .storybook/main.js-fil:

            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
              
            
          

Brug af dekoratorer

Dekoratorer er funktioner, der indpakker dine komponenter med yderligere funktionalitet. De kan bruges til at give kontekst, styling eller andre globale konfigurationer.

Her er et eksempel på en dekorator, der giver en temakontekst til dine komponenter:

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

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

            

              
                Copy
              
            
          

For at bruge dekoratoren skal du føje den til din historys konfiguration:

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

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

            

              
                Copy
              
            
          

Automatiseret testning med Storybook

Storybook kan integreres med forskellige testværktøjer for at automatisere testningen af dine UI-komponenter. Nogle populære testrammer inkluderer:

• Jest: En JavaScript-testramme, der kan bruges til at skrive enhedstests for dine komponenter.
• React Testing Library: Et testbibliotek, der fokuserer på at teste komponenter fra en brugers perspektiv.
• Cypress: En end-to-end-testramme, der kan bruges til at teste hele applikationen, inklusive UI-komponenterne.
• Playwright: Ligner Cypress, Playwright bruges til end-to-end-testning på tværs af forskellige browsere og platforme.

Storybook-teamet vedligeholder også et bibliotek kaldet @storybook/testing-react (eller lignende for Vue/Angular), som leverer værktøjer til at teste dine komponenter i Storybook.

Udgivelse af din Storybook

Du kan nemt udgive din Storybook for at dele den med dit team eller det bredere fællesskab. Flere muligheder er tilgængelige:

• Netlify: En populær platform til implementering af statiske websteder, inklusive Storybooks.
• GitHub Pages: En gratis hostingtjeneste leveret af GitHub, der kan bruges til at hoste din Storybook.
• Chromatic: En skybaseret platform, der er specifikt designet til at hoste og administrere Storybooks. Chromatic leverer funktioner som visuel regressions testning og samarbejdsværktøjer.
• AWS S3: Du kan hoste dine statiske Storybook-filer i en Amazon S3-bucket.

For at udgive din Storybook skal du typisk bygge en statisk version af din Storybook ved hjælp af følgende kommando:

            npm run build-storybook
            

              
                Copy
              
            
          

Dette vil oprette en storybook-static-mappe (eller lignende), der indeholder de statiske filer, der kan implementeres på din valgte hostingplatform.

Bedste praksis for brug af Storybook

For at maksimere fordelene ved Storybook skal du følge disse bedste praksis:

• Hold dine komponenter små og fokuserede: Design dine komponenter til at være så små og fokuserede som muligt. Dette vil gøre dem lettere at teste, genbruge og dokumentere.
• Skriv omfattende historier: Opret historier, der dækker alle de forskellige tilstande og brugssager for dine komponenter. Dette vil sikre, at dine komponenter er grundigt testet og dokumenteret.
• Brug Addons med omtanke: Vælg addons, der er relevante for dit projekts behov, og undgå at tilføje for mange addons, da dette kan påvirke ydeevnen.
• Dokumenter dine komponenter grundigt: Brug @storybook/addon-docs addon'en til at generere dokumentation for dine komponenter. Dette vil gøre det lettere for andre at forstå, hvordan de skal bruge og tilpasse dem.
• Integrer Storybook i dit udviklingsarbejdsforløb: Gør Storybook til en integreret del af dit udviklingsarbejdsforløb. Brug det til at udvikle, teste og dokumentere dine UI-komponenter fra starten af projektet.
• Etabler en klar komponentbiblioteksstruktur: Organiser dit komponentbibliotek på en logisk og konsistent måde. Dette vil gøre det lettere for andre at finde og genbruge komponenter.
• Vedligehold din Storybook regelmæssigt: Hold din Storybook opdateret med de seneste ændringer i dine UI-komponenter. Dette vil sikre, at din dokumentation er nøjagtig, og at dine komponenter altid testes mod den seneste kode.
• Brug versionskontrol: Gem din Storybook-konfiguration og historier i versionskontrol (f.eks. Git) for at spore ændringer og samarbejde med andre.

Storybook på tværs af forskellige frameworks

Mens kernebegreberne forbliver ens, varierer implementeringsdetaljerne i Storybook en smule afhængigt af det frontend-framework, du bruger.

Storybook til React

React er et af de mest populære frameworks til brug af Storybook. Den officielle Storybook-dokumentation giver fremragende ressourcer og eksempler til React-udviklere.

Storybook til Vue

Storybook integreres også problemfrit med Vue.js. Vue-komponenter kan nemt føjes til Storybook ved hjælp af en lignende tilgang til React.

Storybook til Angular

Angular-udviklere kan udnytte Storybook til at oprette et visuelt komponentbibliotek til deres Angular-applikationer. Angular CLI-integration gør opsætningsprocessen ligetil.

Globale perspektiver og eksempler

Når du bruger Storybook i globale projekter, er det vigtigt at overveje lokaliserings- og internationaliseringsaspekter af dine UI-komponenter. For eksempel:

• Tekstretning (RTL/LTR): Sørg for, at dine komponenter understøtter både venstre-til-højre (LTR) og højre-til-venstre (RTL) tekstretninger. Du kan bruge Storybook til at oprette historier, der viser komponenter i begge retninger. Overvej at bruge biblioteker som `styled-components` med `rtlcss`-plugin til automatisk at håndtere stiltransformationer.
• Dato- og tidsformater: Brug passende dato- og tidsformatering baseret på brugerens sprog. Du kan bruge biblioteker som `moment.js` eller `date-fns` til at formatere datoer og tidspunkter korrekt. Opret historier, der viser komponenter med forskellige dato- og tidsformater.
• Valutaformater: Vis valutaværdier i det korrekte format for brugerens sprog. Du kan bruge biblioteker som `numeral.js` eller `Intl.NumberFormat` til at formatere valutaværdier. Opret historier, der viser komponenter med forskellige valutaformater og symboler.
• Oversættelse: Brug internationaliseringsbiblioteker (i18n) til at oversætte dine UI-komponenter til forskellige sprog. Storybook kan bruges til at visualisere komponenter med forskellige oversættelser. Biblioteker som `i18next` bruges almindeligt.
• Tilgængelighed: Overhold retningslinjerne for webadgang for at sikre, at dine UI-komponenter kan bruges af personer med handicap, uanset deres placering.

Eksempel: Forestil dig en formularkomponent, der bruges globalt. I en Storybook-historie kan du vise:

• Formularen med etiketter og instruktioner oversat til spansk.
• Den samme formular vist med RTL-layout for arabisktalende brugere.
• Formularen, der viser et datofelt med formatet MM/DD/YYYY for USA og DD/MM/YYYY for Europa.

Konklusion

Storybook er et kraftfuldt værktøj, der kan forbedre dit frontend-udviklingsarbejdsforløb markant. Ved at tilbyde et isoleret miljø til at udvikle UI-komponenter fremmer det genanvendelighed, forbedrer udviklingshastigheden, forenkler testning og letter samarbejde. Uanset om du bygger et lille websted eller en stor applikation, kan Storybook hjælpe dig med at skabe robuste, vedligeholdelsesvenlige og konsistente brugergrænseflader.

Ved at omfavne de begreber og teknikker, der er beskrevet i denne guide, kan du udnytte det fulde potentiale i Storybook og opbygge ekstraordinære brugeroplevelser for dit globale publikum.