Frontend Storybook: En omfattende guide til utviklingsmiljøer for komponenter

I det stadig utviklende landskapet av frontend-utvikling er det avgjørende å bygge robuste og vedlikeholdbare brukergrensesnitt (UI). Storybook har dukket opp som et ledende verktøy for å møte denne utfordringen, og gir et kraftig miljø for å utvikle UI-komponenter isolert. Denne guiden tilbyr en omfattende utforskning av Storybook, og dekker kjernekonsepter, fordeler, praktisk implementering og avanserte teknikker for å forbedre din frontend-utviklingsarbeidsflyt.

Hva er Storybook?

Storybook er et åpen kildekode-verktøy for å utvikle UI-komponenter isolert. Det gir et dedikert miljø der du kan bygge, teste og dokumentere komponenter uavhengig av hovedapplikasjonen din. Denne isolasjonen lar deg fokusere på komponentens funksjonalitet og utseende uten å bli hindret av kompleks applikasjonslogikk eller avhengigheter.

Tenk på Storybook som en levende stilguide eller et komponentbibliotek som visuelt viser frem UI-komponentene dine. Det lar utviklere, designere og interessenter bla gjennom og samhandle med komponenter på en konsistent og organisert måte, noe som fremmer samarbeid og sikrer en felles forståelse av brukergrensesnittet.

Hvorfor bruke Storybook? Fordelene

Integrering av Storybook i din frontend-utviklingsarbeidsflyt gir en rekke fordeler:

• Forbedret gjenbruk av komponenter: Utvikling av komponenter isolert oppmuntrer til en modulær tilnærming, noe som gjør dem mer gjenbrukbare på tvers av forskjellige deler av applikasjonen din eller til og med på tvers av flere prosjekter.
• Økt utviklingshastighet: Storybook akselererer utviklingen ved å la deg fokusere på individuelle komponenter uten overhead av å kjøre hele applikasjonen. Du kan raskt iterere på komponentdesign og funksjonalitet.
• Forenklet testing: Storybook gjør det enklere å teste komponenter i forskjellige tilstander og scenarier. Du kan lage historier som representerer forskjellige brukstilfeller og visuelt verifisere at komponenten oppfører seg som forventet.
• Omfattende dokumentasjon: Storybook fungerer som en levende dokumentasjon for UI-komponentene dine. Den genererer automatisk dokumentasjon basert på komponentkoden din og historiene dine, noe som gjør det enkelt for andre å forstå hvordan de skal bruke og tilpasse dem.
• Bedre samarbeid: Storybook gir et sentralt knutepunkt for utviklere, designere og interessenter for å samarbeide om UI-komponenter. Det gir mulighet for visuelle gjennomganger, tilbakemeldinger og felles forståelse av UI-biblioteket.
• Tidlig oppdagelse av problemer: Ved å utvikle komponenter isolert, kan du identifisere og løse problemer tidlig i utviklingssyklusen, før de blir mer komplekse og kostbare å fikse.
• Designsystemkonsistens: Storybook fremmer designsystemkonsistens ved å gi en visuell referanse for alle UI-komponenter. Det sikrer at komponenter følger designretningslinjene og opprettholder et sammenhengende utseende på tvers av applikasjonen.

Komme i gang med Storybook

Det er enkelt å sette opp Storybook, og det integreres sømløst med populære frontend-rammeverk som React, Vue og Angular.

Installasjon

Den enkleste måten å installere Storybook er ved å bruke kommandolinjegrensesnittet (CLI). Åpne terminalen og naviger til prosjektmappen din. Kjør deretter følgende kommando:

            npx storybook init
            

              
                Copy
              
            
          

Denne kommandoen vil automatisk oppdage prosjektets rammeverk og installere de nødvendige avhengighetene. Den vil også opprette en .storybook-mappe i prosjektet ditt, som inneholder konfigurasjonsfilene for Storybook.

Opprette din første historie

En "historie" i Storybook representerer en spesifikk tilstand eller et brukstilfelle for en komponent. For å lage en historie, vil du vanligvis opprette en ny fil i prosjektets src/stories-mappe (eller en lignende plassering, avhengig av prosjektstrukturen din). Filen skal ha en .stories.js- eller .stories.jsx-utvidelse (for React) eller det tilsvarende for Vue eller Angular.

Her er et eksempel på en enkel historie for en React-knappkomponent:

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

import { Button } from './Button'; // Antar at Button-komponenten din er i 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
              
            
          

I dette eksemplet definerer vi en komponent kalt Button og lager fire historier: Primary, Secondary, Large og Small. Hver historie representerer en annen variasjon av knappkomponenten med forskjellige props.

Kjøre Storybook

For å kjøre Storybook, bruk ganske enkelt følgende kommando:

            npm run storybook
            

              
                Copy
              
            
          

Dette vil starte en lokal utviklingsserver og åpne Storybook i nettleseren din. Du bør se historiene dine vises i Storybook UI.

Kjernekonsepter i Storybook

For å bruke Storybook effektivt, er det viktig å forstå kjernekonseptene:

• Komponenter: De grunnleggende byggeklossene i brukergrensesnittet ditt. Storybook er designet for å vise frem og utvikle individuelle komponenter isolert.
• Historier: Representerer spesifikke tilstander eller brukstilfeller for en komponent. De definerer props og data som sendes til komponenten, slik at du kan visualisere og teste forskjellige scenarier.
• Addons: Utvid Storybooks funksjonalitet med forskjellige funksjoner som tema, tilgjengelighetstesting og dokumentasjonsgenerering.
• Dekoratører: Omslutter komponenter med ekstra funksjonalitet, for eksempel å gi kontekst eller styling.
• Args: (Tidligere kjent som knapper) Lar deg interaktivt endre props til en komponent i Storybook UI. Dette er nyttig for å utforske forskjellige variasjoner og konfigurasjoner.
• Controls: UI-elementene for å endre Args, noe som gjør det enkelt å justere komponenteegenskaper i nettleseren.

Avanserte Storybook-teknikker

Når du har forstått det grunnleggende om Storybook, kan du utforske avanserte teknikker for å forbedre arbeidsflyten din ytterligere:

Bruke Addons

Storybook tilbyr et bredt spekter av addons som kan utvide funksjonaliteten. Noen populære addons inkluderer:

• @storybook/addon-knobs: (Avskrevet til fordel for Args/Controls) Lar deg interaktivt endre props til en komponent i Storybook UI.
• @storybook/addon-actions: Viser hendelsesbehandlere som utløses av komponentinteraksjoner.
• @storybook/addon-links: Oppretter lenker mellom historier, slik at du kan navigere mellom forskjellige komponenttilstander.
• @storybook/addon-docs: Genererer dokumentasjon for komponentene dine basert på koden din og historiene dine.
• @storybook/addon-a11y: Utfører tilgjengelighetssjekker på komponentene dine for å sikre at de er brukbare for personer med funksjonshemninger.
• @storybook/addon-viewport: Lar deg se komponentene dine i forskjellige skjermstørrelser og enheter.
• @storybook/addon-backgrounds: Lar deg endre bakgrunnsfargen på historiene dine for å teste komponentkontrast.
• @storybook/addon-themes: Lar deg bytte mellom forskjellige temaer i Storybook.

For å installere et addon, bruk følgende kommando:

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

              
                Copy
              
            
          

Legg deretter til addon i .storybook/main.js-filen din:

            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
              
            
          

Bruke dekoratører

Dekoratører er funksjoner som omslutter komponentene dine med ekstra funksjonalitet. De kan brukes til å gi kontekst, styling eller andre globale konfigurasjoner.

Her er et eksempel på en dekoratør som gir en temakontekst til komponentene dine:

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

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

            

              
                Copy
              
            
          

For å bruke dekoratøren, legg den til historiens konfigurasjon:

            // 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
              
            
          

Automatisert testing med Storybook

Storybook kan integreres med forskjellige testverktøy for å automatisere testingen av UI-komponentene dine. Noen populære testrammeverk inkluderer:

• Jest: Et JavaScript-testrammeverk som kan brukes til å skrive enhetstester for komponentene dine.
• React Testing Library: Et testbibliotek som fokuserer på å teste komponenter fra en brukers perspektiv.
• Cypress: Et ende-til-ende-testrammeverk som kan brukes til å teste hele applikasjonen, inkludert UI-komponentene.
• Playwright: Ligner på Cypress, Playwright brukes til ende-til-ende-testing på tvers av forskjellige nettlesere og plattformer.

Storybook-teamet vedlikeholder også et bibliotek kalt @storybook/testing-react (eller lignende for Vue/Angular) som gir verktøy for å teste komponentene dine i Storybook.

Publisere Storybook

Du kan enkelt publisere Storybook for å dele det med teamet ditt eller det bredere fellesskapet. Flere alternativer er tilgjengelige:

• Netlify: En populær plattform for å distribuere statiske nettsteder, inkludert Storybooks.
• GitHub Pages: En gratis hostingtjeneste levert av GitHub som kan brukes til å hoste Storybook.
• Chromatic: En skybasert plattform som er spesielt designet for hosting og administrering av Storybooks. Chromatic tilbyr funksjoner som visuell regresjonstesting og samarbeidsverktøy.
• AWS S3: Du kan hoste de statiske Storybook-filene dine i en Amazon S3-bucket.

For å publisere Storybook, må du vanligvis bygge en statisk versjon av Storybook ved hjelp av følgende kommando:

            npm run build-storybook
            

              
                Copy
              
            
          

Dette vil opprette en storybook-static-mappe (eller lignende) som inneholder de statiske filene som kan distribueres til din valgte hostingplattform.

Beste praksis for bruk av Storybook

For å maksimere fordelene med Storybook, følg disse beste praksisene:

• Hold komponentene dine små og fokuserte: Design komponentene dine til å være så små og fokuserte som mulig. Dette vil gjøre dem enklere å teste, gjenbruke og dokumentere.
• Skriv omfattende historier: Lag historier som dekker alle de forskjellige tilstandene og brukstilfellene for komponentene dine. Dette vil sikre at komponentene dine er grundig testet og dokumentert.
• Bruk Addons klokt: Velg addons som er relevante for prosjektets behov, og unngå å legge til for mange addons, da dette kan påvirke ytelsen.
• Dokumenter komponentene dine grundig: Bruk @storybook/addon-docs-addon for å generere dokumentasjon for komponentene dine. Dette vil gjøre det enklere for andre å forstå hvordan de skal bruke og tilpasse dem.
• Integrer Storybook i utviklingsarbeidsflyten din: Gjør Storybook til en integrert del av utviklingsarbeidsflyten din. Bruk den til å utvikle, teste og dokumentere UI-komponentene dine fra starten av prosjektet.
• Opprett en tydelig komponentbibliotekstruktur: Organiser komponentbiblioteket ditt på en logisk og konsistent måte. Dette vil gjøre det enklere for andre å finne og gjenbruke komponenter.
• Vedlikehold Storybook regelmessig: Hold Storybook oppdatert med de siste endringene i UI-komponentene dine. Dette vil sikre at dokumentasjonen din er nøyaktig og at komponentene dine alltid testes mot den nyeste koden.
• Bruk versjonskontroll: Lagre Storybook-konfigurasjonen og historiene dine i versjonskontroll (f.eks. Git) for å spore endringer og samarbeide med andre.

Storybook på tvers av forskjellige rammeverk

Mens kjernekonseptene forblir like, varierer implementeringsdetaljene for Storybook litt avhengig av hvilket frontend-rammeverk du bruker.

Storybook for React

React er et av de mest populære rammeverkene for å bruke Storybook. Den offisielle Storybook-dokumentasjonen gir utmerkede ressurser og eksempler for React-utviklere.

Storybook for Vue

Storybook integreres også sømløst med Vue.js. Vue-komponenter kan enkelt legges til Storybook ved hjelp av en lignende tilnærming som React.

Storybook for Angular

Angular-utviklere kan utnytte Storybook til å lage et visuelt komponentbibliotek for Angular-applikasjonene sine. Angular CLI-integrasjon gjør oppsettprosessen enkel.

Globale perspektiver og eksempler

Når du bruker Storybook i globale prosjekter, er det viktig å vurdere lokalisering og internasjonalisering av UI-komponentene dine. For eksempel:

• Tekstretning (RTL/LTR): Sørg for at komponentene dine støtter både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) tekstretninger. Du kan bruke Storybook til å lage historier som viser komponenter i begge retninger. Vurder å bruke biblioteker som `styled-components` med `rtlcss`-plugin for å automatisk håndtere stiltransformasjoner.
• Dato- og tidsformater: Bruk passende dato- og tidsformatering basert på brukerens lokale innstillinger. Du kan bruke biblioteker som `moment.js` eller `date-fns` for å formatere datoer og klokkeslett riktig. Lag historier som viser komponenter med forskjellige dato- og tidsformater.
• Valutaformater: Vis valutabeløp i riktig format for brukerens lokale innstillinger. Du kan bruke biblioteker som `numeral.js` eller `Intl.NumberFormat` for å formatere valutabeløp. Lag historier som viser komponenter med forskjellige valutaformater og symboler.
• Oversettelse: Bruk internasjonaliseringsbiblioteker (i18n) til å oversette UI-komponentene dine til forskjellige språk. Storybook kan brukes til å visualisere komponenter med forskjellige oversettelser. Biblioteker som `i18next` brukes ofte.
• Tilgjengelighet: Følg retningslinjene for webtilgjengelighet for å sikre at UI-komponentene dine er brukbare for personer med funksjonshemninger, uavhengig av deres plassering.

Eksempel: Tenk deg en skjemakomponent som brukes globalt. I en Storybook-historie kan du vise frem:

• Skjemaet med etiketter og instruksjoner oversatt til spansk.
• Det samme skjemaet vist med RTL-layout for arabisktalende brukere.
• Skjemaet som viser et datofelt med formatet MM/DD/YYYY for USA og DD/MM/YYYY for Europa.

Konklusjon

Storybook er et kraftig verktøy som kan forbedre din frontend-utviklingsarbeidsflyt betydelig. Ved å tilby et isolert miljø for å utvikle UI-komponenter, fremmer det gjenbruk, øker utviklingshastigheten, forenkler testing og legger til rette for samarbeid. Enten du bygger et lite nettsted eller en stor applikasjon, kan Storybook hjelpe deg med å lage robuste, vedlikeholdbare og konsistente brukergrensesnitt.

Ved å omfavne konseptene og teknikkene som er skissert i denne guiden, kan du utnytte det fulle potensialet i Storybook og bygge eksepsjonelle brukeropplevelser for ditt globale publikum.