Frontend Storybook: Põhjalik Juhend Komponentide Arenduskeskkondade Kohta

Pidevalt arenevas front-end arenduse maastikul on vastupidavate ja hooldatavate kasutajaliideste (UI) loomine ülioluline. Storybook on kujunenud juhtivaks tööriistaks selle väljakutse lahendamisel, pakkudes võimsat keskkonda kasutajaliidese komponentide eraldiseisvaks arendamiseks. See juhend pakub põhjalikku ülevaadet Storybookist, hõlmates selle põhimõisteid, eeliseid, praktilist rakendamist ja täiustatud tehnikaid teie front-end arenduse töövoo parandamiseks.

Mis on Storybook?

Storybook on avatud lähtekoodiga tööriist kasutajaliidese komponentide eraldiseisvaks arendamiseks. See pakub spetsiaalset keskkonda, kus saate komponente ehitada, testida ja dokumenteerida oma põhirakendusest sõltumatult. See eraldatus võimaldab teil keskenduda komponendi funktsionaalsusele ja välimusele, ilma et teid takistaks keeruline rakenduse loogika või sõltuvused.

Mõelge Storybookile kui elavale stiilijuhisele või komponenditeegile, mis visuaalselt esitleb teie kasutajaliidese komponente. See võimaldab arendajatel, disaineritel ja sidusrühmadel sirvida ja suhelda komponentidega järjepideval ja organiseeritud viisil, edendades koostööd ja tagades ühise arusaama kasutajaliidesest.

Miks kasutada Storybooki? Eelised

Storybooki integreerimine teie front-end arenduse töövoogu pakub hulgaliselt eeliseid:

• Parem komponentide taaskasutatavus: Komponentide eraldiseisev arendamine soodustab modulaarset lähenemist, muutes need paremini taaskasutatavaks teie rakenduse erinevates osades või isegi mitmes projektis.
• Suurem arenduskiirus: Storybook kiirendab arendust, võimaldades teil keskenduda üksikutele komponentidele ilma kogu rakenduse käivitamise lisakuludeta. Saate kiiresti itereerida komponentide disainide ja funktsionaalsuse kallal.
• Lihtsustatud testimine: Storybook muudab komponentide testimise erinevates olekutes ja stsenaariumides lihtsamaks. Saate luua lugusid (stories), mis esindavad erinevaid kasutusjuhtumeid ja visuaalselt kontrollida, kas komponent käitub ootuspäraselt.
• Põhjalik dokumentatsioon: Storybook toimib teie kasutajaliidese komponentide elava dokumentatsioonina. See genereerib automaatselt dokumentatsiooni teie komponendi koodi ja lugude põhjal, muutes teistele lihtsaks mõista, kuidas neid kasutada ja kohandada.
• Parem koostöö: Storybook pakub keskset kohta arendajatele, disaineritele ja sidusrühmadele kasutajaliidese komponentide osas koostöö tegemiseks. See võimaldab visuaalseid ülevaatusi, tagasisidet ja ühist arusaama kasutajaliidese teegist.
• Probleemide varajane avastamine: Komponente eraldiseisvalt arendades saate tuvastada ja lahendada probleeme arendustsükli varajases staadiumis, enne kui need muutuvad keerulisemaks ja kulukamaks parandada.
• Disainisüsteemi järjepidevus: Storybook edendab disainisüsteemi järjepidevust, pakkudes visuaalset viidet kõigile kasutajaliidese komponentidele. See tagab, et komponendid järgivad disainijuhiseid ja säilitavad ühtse välimuse kogu rakenduses.

Storybookiga Alustamine

Storybooki seadistamine on lihtne ja see integreerub sujuvalt populaarsete front-end raamistikega nagu React, Vue ja Angular.

Paigaldamine

Lihtsaim viis Storybooki paigaldamiseks on kasutada käsurea liidest (CLI). Avage oma terminal ja navigeerige oma projekti kausta. Seejärel käivitage järgmine käsk:

            npx storybook init
            

              
                Copy
              
            
          

See käsk tuvastab automaatselt teie projekti raamistiku ja paigaldab vajalikud sõltuvused. See loob ka teie projekti .storybook kausta, mis sisaldab Storybooki konfiguratsioonifaile.

Oma esimese loo loomine

"Lugu" (story) Storybookis esindab komponendi konkreetset olekut või kasutusjuhtumit. Loo loomiseks loote tavaliselt uue faili oma projekti src/stories kausta (või sarnasesse asukohta, sõltuvalt teie projekti struktuurist). Failil peaks olema .stories.js või .stories.jsx laiend (Reacti puhul) või vastav Vue või Angulari jaoks.

Siin on näide lihtsast loost Reacti nupukomponendi jaoks:

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

import { Button } from './Button'; // Eeldades, et teie nupu komponent asub failis Button.jsx

export default {
  title: 'Näide/Nupp',
  component: Button,
};

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

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

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

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

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Väike nupp',
};

            

              
                Copy
              
            
          

Selles näites määratleme komponendi nimega Button ja loome neli lugu: Primary, Secondary, Large ja Small. Iga lugu esindab nupukomponendi erinevat variatsiooni erinevate prop'idega.

Storybooki käivitamine

Storybooki käivitamiseks kasutage lihtsalt järgmist käsku:

            npm run storybook
            

              
                Copy
              
            
          

See käivitab kohaliku arendusserveri ja avab Storybooki teie brauseris. Peaksite nägema oma lugusid Storybooki kasutajaliideses.

Storybooki põhimõisted

Storybooki tõhusaks kasutamiseks on oluline mõista selle põhimõisteid:

• Komponendid: Teie kasutajaliidese fundamentaalsed ehitusplokid. Storybook on loodud üksikute komponentide eraldiseisvaks esitlemiseks ja arendamiseks.
• Lood (Stories): Esindavad komponendi konkreetseid olekuid või kasutusjuhtumeid. Need määratlevad komponendile edastatavad prop'id ja andmed, võimaldades teil visualiseerida ja testida erinevaid stsenaariume.
• Lisandmoodulid (Addons): Laiendavad Storybooki funktsionaalsust mitmesuguste funktsioonidega, nagu teemad, ligipääsetavuse testimine ja dokumentatsiooni genereerimine.
• Dekoraatorid (Decorators): Määhivad komponente täiendava funktsionaalsusega, näiteks pakkudes konteksti või stiili.
• Args: (Varem tuntud kui nupud - knobs) Võimaldavad teil interaktiivselt muuta komponendi prop'e Storybooki kasutajaliideses. See on kasulik erinevate variatsioonide ja konfiguratsioonide uurimiseks.
• Kontrollid (Controls): Kasutajaliidese elemendid Argside muutmiseks, mis teevad komponendi omaduste brauseris kohandamise lihtsaks.

Storybooki täiustatud tehnikad

Kui olete Storybooki põhitõed selgeks saanud, saate uurida täiustatud tehnikaid oma töövoo edasiseks parandamiseks:

Lisandmoodulite kasutamine

Storybook pakub laia valikut lisandmooduleid, mis võivad selle funktsionaalsust laiendada. Mõned populaarsed lisandmoodulid on:

• @storybook/addon-knobs: (Aegunud, eelistatud on Args/Controls) Võimaldab interaktiivselt muuta komponendi prop'e Storybooki kasutajaliideses.
• @storybook/addon-actions: Kuvab sündmuste käsitlejaid, mis käivituvad komponendi interaktsioonide tulemusel.
• @storybook/addon-links: Loob linke lugude vahel, võimaldades navigeerida erinevate komponendi olekute vahel.
• @storybook/addon-docs: Genereerib teie komponentidele dokumentatsiooni teie koodi ja lugude põhjal.
• @storybook/addon-a11y: Teostab teie komponentidele ligipääsetavuse kontrolle, et tagada nende kasutatavus puuetega inimestele.
• @storybook/addon-viewport: Võimaldab teil vaadata oma komponente erinevates ekraanisuurustes ja seadmetes.
• @storybook/addon-backgrounds: Võimaldab muuta oma lugude taustavärvi, et testida komponendi kontrasti.
• @storybook/addon-themes: Võimaldab teil vahetada erinevate teemade vahel oma Storybookis.

Lisandmooduli paigaldamiseks kasutage järgmist käsku:

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

              
                Copy
              
            
          

Seejärel lisage lisandmoodul oma .storybook/main.js faili:

            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
              
            
          

Dekoraatorite kasutamine

Dekoraatorid on funktsioonid, mis määhivad teie komponente täiendava funktsionaalsusega. Neid saab kasutada konteksti, stiili või muude globaalsete konfiguratsioonide pakkumiseks.

Siin on näide dekoraatorist, mis pakub teie komponentidele teemakonteksti:

            // src/stories/decorators/ThemeProvider.jsx
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme'; // Teie teema objekt

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

            

              
                Copy
              
            
          

Dekoraatori kasutamiseks lisage see oma loo konfiguratsiooni:

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

Automatiseeritud testimine Storybookiga

Storybooki saab integreerida mitmesuguste testimisvahenditega, et automatiseerida teie kasutajaliidese komponentide testimist. Mõned populaarsed testimisraamistikud on:

• Jest: JavaScripti testimisraamistik, mida saab kasutada komponentide ühiktestide kirjutamiseks.
• React Testing Library: Testimisraamatukogu, mis keskendub komponentide testimisele kasutaja vaatenurgast.
• Cypress: Otsast-lõpuni (end-to-end) testimisraamistik, mida saab kasutada kogu rakenduse, sealhulgas kasutajaliidese komponentide, testimiseks.
• Playwright: Sarnaselt Cypressile kasutatakse Playwrighti otsast-lõpuni testimiseks erinevates brauserites ja platvormidel.

Storybooki meeskond haldab ka raamatukogu nimega @storybook/testing-react (või sarnast Vue/Angulari jaoks), mis pakub utiliite teie komponentide testimiseks Storybookis.

Oma Storybooki avaldamine

Saate oma Storybooki hõlpsasti avaldada, et seda oma meeskonna või laiema kogukonnaga jagada. Saadaval on mitu võimalust:

• Netlify: Populaarne platvorm staatiliste veebisaitide, sealhulgas Storybookide, paigutamiseks.
• GitHub Pages: GitHubi pakutav tasuta hostimisteenus, mida saab kasutada oma Storybooki hostimiseks.
• Chromatic: Pilvepõhine platvorm, mis on spetsiaalselt loodud Storybookide hostimiseks ja haldamiseks. Chromatic pakub funktsioone nagu visuaalse regressiooni testimine ja koostöövahendid.
• AWS S3: Saate oma staatilisi Storybooki faile hostida Amazon S3 ämbris.

Oma Storybooki avaldamiseks peate tavaliselt looma oma Storybookist staatilise versiooni, kasutades järgmist käsku:

            npm run build-storybook
            

              
                Copy
              
            
          

See loob storybook-static kausta (või sarnase), mis sisaldab staatilisi faile, mida saab teie valitud hostimisplatvormile paigutada.

Storybooki kasutamise parimad tavad

Storybooki eeliste maksimeerimiseks järgige neid parimaid tavasid:

• Hoidke oma komponendid väikesed ja fokusseeritud: Disainige oma komponendid nii väikesed ja fokusseeritud kui võimalik. See muudab nende testimise, taaskasutamise ja dokumenteerimise lihtsamaks.
• Kirjutage põhjalikke lugusid: Looge lugusid, mis katavad kõik teie komponentide erinevad olekud ja kasutusjuhud. See tagab, et teie komponendid on põhjalikult testitud ja dokumenteeritud.
• Kasutage lisandmooduleid targalt: Valige lisandmoodulid, mis on teie projekti vajadustele asjakohased, ja vältige liiga paljude lisandmoodulite lisamist, kuna see võib jõudlust mõjutada.
• Dokumenteerige oma komponendid põhjalikult: Kasutage @storybook/addon-docs lisandmoodulit oma komponentidele dokumentatsiooni genereerimiseks. See muudab teistele lihtsamaks mõista, kuidas neid kasutada ja kohandada.
• Integreerige Storybook oma arendustöövoogu: Muutke Storybook oma arendustöövoo lahutamatuks osaks. Kasutage seda kasutajaliidese komponentide arendamiseks, testimiseks ja dokumenteerimiseks alates projekti algusest.
• Looge selge komponenditeegi struktuur: Korraldage oma komponenditeek loogilisel ja järjepideval viisil. See muudab teistele komponentide leidmise ja taaskasutamise lihtsamaks.
• Hoidke oma Storybooki regulaarselt ajakohasena: Hoidke oma Storybook ajakohasena vastavalt teie kasutajaliidese komponentide viimastele muudatustele. See tagab, et teie dokumentatsioon on täpne ja et teie komponente testitakse alati uusima koodi vastu.
• Kasutage versioonihaldust: Hoidke oma Storybooki konfiguratsiooni ja lugusid versioonihalduses (nt Git), et jälgida muudatusi ja teha koostööd teistega.

Storybook erinevates raamistikes

Kuigi põhimõisted jäävad sarnaseks, varieeruvad Storybooki rakendamise üksikasjad veidi sõltuvalt teie kasutatavast front-end raamistikust.

Storybook Reacti jaoks

React on üks populaarsemaid raamistikke Storybooki kasutamiseks. Ametlik Storybooki dokumentatsioon pakub suurepäraseid ressursse ja näiteid Reacti arendajatele.

Storybook Vue jaoks

Storybook integreerub sujuvalt ka Vue.js-iga. Vue komponente saab Storybooki lisada sarnaselt Reactile.

Storybook Angulari jaoks

Angulari arendajad saavad Storybooki abil luua oma Angulari rakenduste jaoks visuaalse komponenditeegi. Angulari CLI integratsioon muudab seadistusprotsessi lihtsaks.

Globaalsed perspektiivid ja näited

Storybooki kasutamisel globaalsetes projektides on oluline arvestada oma kasutajaliidese komponentide lokaliseerimise ja rahvusvahelistamise aspektidega. Näiteks:

• Teksti suund (RTL/LTR): Veenduge, et teie komponendid toetavad nii vasakult-paremale (LTR) kui ka paremalt-vasakule (RTL) teksti suunda. Saate kasutada Storybooki, et luua lugusid, mis esitlevad komponente mõlemas suunas. Kaaluge raamatukogude nagu `styled-components` kasutamist koos `rtlcss` pluginaga, et automaatselt käsitleda stiilide teisendusi.
• Kuupäeva ja kellaaja vormingud: Kasutage sobivaid kuupäeva ja kellaaja vorminguid vastavalt kasutaja lokaadile. Saate kasutada raamatukogusid nagu `moment.js` või `date-fns`, et kuupäevi ja kellaaegu õigesti vormindada. Looge lugusid, mis esitlevad komponente erinevate kuupäeva ja kellaaja vormingutega.
• Valuutavormingud: Kuvage valuutaväärtused kasutaja lokaadile vastavas õiges vormingus. Saate kasutada raamatukogusid nagu `numeral.js` või `Intl.NumberFormat`, et valuutaväärtusi vormindada. Looge lugusid, mis esitlevad komponente erinevate valuutavormingute ja sümbolitega.
• Tõlkimine: Kasutage rahvusvahelistamise (i18n) raamatukogusid oma kasutajaliidese komponentide tõlkimiseks erinevatesse keeltesse. Storybooki saab kasutada komponentide visualiseerimiseks erinevate tõlgetega. Tavaliselt kasutatakse raamatukogusid nagu `i18next`.
• Ligipääsetavus: Järgige veebi ligipääsetavuse juhiseid, et tagada teie kasutajaliidese komponentide kasutatavus puuetega inimestele, olenemata nende asukohast.

Näide: Kujutage ette vormikomponenti, mida kasutatakse globaalselt. Storybooki loos saaksite esitleda:

• Vormi siltide ja juhistega, mis on tõlgitud hispaania keelde.
• Sama vormi kuvatuna RTL paigutusega araabiakeelsetele kasutajatele.
• Vormi, mis kuvab kuupäevavälja vormingus MM/DD/YYYY Ameerika Ühendriikide jaoks ja DD/MM/YYYY Euroopa jaoks.

Kokkuvõte

Storybook on võimas tööriist, mis võib oluliselt parandada teie front-end arenduse töövoogu. Pakkudes eraldatud keskkonda kasutajaliidese komponentide arendamiseks, edendab see taaskasutatavust, suurendab arenduskiirust, lihtsustab testimist ja hõlbustab koostööd. Ükskõik, kas ehitate väikest veebisaiti või suuremahulist rakendust, aitab Storybook teil luua vastupidavaid, hooldatavaid ja järjepidevaid kasutajaliideseid.

Selles juhendis kirjeldatud kontseptsioone ja tehnikaid omaks võttes saate ära kasutada Storybooki täielikku potentsiaali ja luua erakordseid kasutajakogemusi oma globaalsele publikule.