Storybook за Frontend: Изчерпателно ръководство за среди за разработка на компоненти

В постоянно развиващия се пейзаж на frontend разработката, изграждането на здрави и поддържащи се потребителски интерфейси (UIs) е от първостепенно значение. Storybook се появи като водещ инструмент за справяне с това предизвикателство, предоставяйки мощна среда за разработване на UI компоненти изолирано. Това ръководство предлага изчерпателно проучване на Storybook, обхващайки неговите основни концепции, ползи, практическа реализация и усъвършенствани техники за подобряване на вашия работен процес за frontend разработка.

Какво е Storybook?

Storybook е инструмент с отворен код за разработване на UI компоненти изолирано. Той предоставя специална среда, в която можете да изграждате, тествате и документирате компоненти независимо от основното си приложение. Тази изолация ви позволява да се съсредоточите върху функционалността и външния вид на компонента, без да бъдете възпрепятствани от сложна логика или зависимости на приложението.

Представете си Storybook като жива стилова ръководство или библиотека от компоненти, която визуално показва вашите UI компоненти. Той позволява на разработчиците, дизайнерите и заинтересованите страни да разглеждат и взаимодействат с компоненти по последователен и организиран начин, насърчавайки сътрудничеството и осигурявайки общо разбиране на UI.

Защо да използвате Storybook? Ползите

Интегрирането на Storybook във вашия работен процес за frontend разработка предлага множество предимства:

• Подобрена повторна употреба на компоненти: Разработването на компоненти изолирано насърчава модулен подход, което ги прави по-повторно използваеми в различни части на вашето приложение или дори в множество проекти.
• Подобрена скорост на разработка: Storybook ускорява разработката, като ви позволява да се съсредоточите върху отделни компоненти, без режийните разходи за стартиране на цялото приложение. Можете бързо да итерирате върху дизайна и функционалността на компонентите.
• Опростено тестване: Storybook улеснява тестването на компоненти в различни състояния и сценарии. Можете да създадете истории, които представляват различни случаи на употреба и визуално да проверите дали компонентът се държи според очакванията.
• Изчерпателна документация: Storybook служи като жива документация за вашите UI компоненти. Той автоматично генерира документация въз основа на вашия код и истории на компонентите, което улеснява другите да разберат как да ги използват и персонализират.
• По-добро сътрудничество: Storybook предоставя централен център за разработчици, дизайнери и заинтересовани страни да си сътрудничат по UI компоненти. Той позволява визуални прегледи, обратна връзка и общо разбиране на UI библиотеката.
• Ранно откриване на проблеми: Чрез разработване на компоненти изолирано можете да идентифицирате и решите проблеми рано в цикъла на разработка, преди те да станат по-сложни и скъпи за отстраняване.
• Последователност на дизайн системата: Storybook насърчава последователността на дизайн системата, като предоставя визуална справка за всички UI компоненти. Той гарантира, че компонентите се придържат към насоките за проектиране и поддържат сплотен външен вид в цялото приложение.

Първи стъпки със Storybook

Настройването на Storybook е лесно и той се интегрира безпроблемно с популярни frontend рамки като React, Vue и Angular.

Инсталация

Най-лесният начин да инсталирате Storybook е с помощта на интерфейса на командния ред (CLI). Отворете терминала си и отидете в директорията на вашия проект. След това изпълнете следната команда:

            npx storybook init
            

              
                Copy
              
            
          

Тази команда автоматично ще открие рамката на вашия проект и ще инсталира необходимите зависимости. Тя също така ще създаде директория .storybook във вашия проект, която съдържа конфигурационните файлове за Storybook.

Създаване на вашата първа история

„История“ в Storybook представлява конкретно състояние или случай на използване на компонент. За да създадете история, обикновено ще създадете нов файл в директорията src/stories на вашия проект (или подобно местоположение, в зависимост от структурата на вашия проект). Файлът трябва да има разширение .stories.js или .stories.jsx (за React) или еквивалента за Vue или Angular.

Ето пример за проста история за React бутон компонент:

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

В този пример дефинираме компонент, наречен Button и създаваме четири истории: Primary, Secondary, Large и Small. Всяка история представлява различна вариация на компонента на бутона с различни свойства.

Стартиране на Storybook

За да стартирате Storybook, просто използвайте следната команда:

            npm run storybook
            

              
                Copy
              
            
          

Това ще стартира локален сървър за разработка и ще отвори Storybook във вашия браузър. Трябва да видите историите си, показани в UI на Storybook.

Основни концепции на Storybook

За да използвате ефективно Storybook, важно е да разберете основните му концепции:

• Компоненти: Основните градивни елементи на вашия UI. Storybook е предназначен да показва и разработва отделни компоненти изолирано.
• Истории: Представляват конкретни състояния или случаи на използване на компонент. Те дефинират свойствата и данните, които се предават на компонента, което ви позволява да визуализирате и тествате различни сценарии.
• Addons: Разширяват функционалността на Storybook с различни функции като тематизиране, тестване на достъпност и генериране на документация.
• Декоратори: Обвиват компоненти с допълнителна функционалност, като предоставяне на контекст или стилизиране.
• Args: (Преди известни като knobs) Ви позволяват да променяте интерактивно свойствата на компонент в Storybook UI. Това е полезно за изследване на различни варианти и конфигурации.
• Controls: UI елементите за промяна на Args, което улеснява коригирането на свойствата на компонента в браузъра.

Усъвършенствани техники на Storybook

След като усвоите основите на Storybook, можете да проучите усъвършенствани техники за по-нататъшно подобряване на вашия работен процес:

Използване на Addons

Storybook предлага широка гама от добавки, които могат да разширят неговата функционалност. Някои популярни добавки включват:

• @storybook/addon-knobs: (Отхвърлена в полза на Args/Controls) Ви позволява да променяте интерактивно свойствата на компонент в Storybook UI.
• @storybook/addon-actions: Показва обработчици на събития, които се задействат от взаимодействия с компоненти.
• @storybook/addon-links: Създава връзки между истории, което ви позволява да навигирате между различни състояния на компоненти.
• @storybook/addon-docs: Генерира документация за вашите компоненти въз основа на вашия код и истории.
• @storybook/addon-a11y: Извършва проверки за достъпност на вашите компоненти, за да се гарантира, че могат да бъдат използвани от хора с увреждания.
• @storybook/addon-viewport: Позволява ви да преглеждате вашите компоненти в различни размери на екрана и устройства.
• @storybook/addon-backgrounds: Позволява ви да промените цвета на фона на вашите истории, за да тествате контраста на компонентите.
• @storybook/addon-themes: Позволява ви да превключвате между различни теми във вашия Storybook.

За да инсталирате добавка, използвайте следната команда:

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

              
                Copy
              
            
          

След това добавете добавката към вашия файл .storybook/main.js:

            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
              
            
          

Използване на декоратори

Декораторите са функции, които обвиват вашите компоненти с допълнителна функционалност. Те могат да бъдат използвани за предоставяне на контекст, стилизиране или други глобални конфигурации.

Ето пример за декоратор, който предоставя контекст на темата на вашите компоненти:

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

За да използвате декоратора, добавете го към конфигурацията на вашата история:

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

Автоматизирано тестване със Storybook

Storybook може да бъде интегриран с различни инструменти за тестване за автоматизиране на тестването на вашите UI компоненти. Някои популярни рамки за тестване включват:

• Jest: JavaScript рамка за тестване, която може да се използва за писане на unit тестове за вашите компоненти.
• React Testing Library: Библиотека за тестване, която се фокусира върху тестване на компоненти от гледна точка на потребителя.
• Cypress: Рамка за тестване от край до край, която може да се използва за тестване на цялото приложение, включително UI компонентите.
• Playwright: Подобно на Cypress, Playwright се използва за тестване от край до край в различни браузъри и платформи.

Екипът на Storybook също поддържа библиотека, наречена @storybook/testing-react (или подобна за Vue/Angular), която предоставя помощни програми за тестване на вашите компоненти в Storybook.

Публикуване на вашия Storybook

Можете лесно да публикувате вашия Storybook, за да го споделите с вашия екип или по-широката общност. Налични са няколко опции:

• Netlify: Популярна платформа за разгръщане на статични уебсайтове, включително Storybooks.
• GitHub Pages: Безплатна услуга за хостинг, предоставена от GitHub, която може да се използва за хостване на вашия Storybook.
• Chromatic: Базирана в облака платформа, специално проектирана за хостване и управление на Storybooks. Chromatic предоставя функции като тестване на визуална регресия и инструменти за сътрудничество.
• AWS S3: Можете да хоствате вашите статични Storybook файлове в кофа за Amazon S3.

За да публикувате вашия Storybook, обикновено ще трябва да създадете статична версия на вашия Storybook, като използвате следната команда:

            npm run build-storybook
            

              
                Copy
              
            
          

Това ще създаде директория storybook-static (или подобна), съдържаща статичните файлове, които могат да бъдат разположени на избраната от вас хостинг платформа.

Най-добри практики за използване на Storybook

За да увеличите максимално ползите от Storybook, следвайте тези най-добри практики:

• Поддържайте вашите компоненти малки и фокусирани: Проектирайте вашите компоненти да бъдат възможно най-малки и фокусирани. Това ще ги направи по-лесни за тестване, повторно използване и документиране.
• Пишете изчерпателни истории: Създавайте истории, които обхващат всички различни състояния и случаи на употреба на вашите компоненти. Това ще гарантира, че вашите компоненти са старателно тествани и документирани.
• Използвайте Addons разумно: Изберете добавки, които са подходящи за нуждите на вашия проект и избягвайте добавянето на твърде много добавки, тъй като това може да повлияе на производителността.
• Документирайте старателно вашите компоненти: Използвайте добавката @storybook/addon-docs, за да генерирате документация за вашите компоненти. Това ще улесни другите да разберат как да ги използват и персонализират.
• Интегрирайте Storybook във вашия работен процес за разработка: Направете Storybook неразделна част от вашия работен процес за разработка. Използвайте го за разработка, тестване и документиране на вашите UI компоненти от самото начало на проекта.
• Създайте ясна структура на библиотеката от компоненти: Организирайте библиотеката си от компоненти по логичен и последователен начин. Това ще улесни другите да намират и повторно използват компоненти.
• Поддържайте редовно вашия Storybook: Поддържайте Storybook актуален с най-новите промени във вашите UI компоненти. Това ще гарантира, че вашата документация е точна и че вашите компоненти винаги се тестват спрямо най-новия код.
• Използвайте контрол на версиите: Съхранявайте конфигурацията и историите на вашия Storybook в контрола на версиите (напр. Git), за да проследявате промените и да си сътрудничите с другите.

Storybook в различни рамки

Докато основните концепции остават подобни, детайлите на реализацията на Storybook варират леко в зависимост от frontend рамката, която използвате.

Storybook за React

React е една от най-популярните рамки за използване на Storybook. Официалната документация на Storybook предоставя отлични ресурси и примери за React разработчици.

Storybook за Vue

Storybook също се интегрира безпроблемно с Vue.js. Vue компонентите могат лесно да бъдат добавени към Storybook, използвайки подход, подобен на React.

Storybook за Angular

Angular разработчиците могат да използват Storybook, за да създадат визуална библиотека от компоненти за своите Angular приложения. Интеграцията с Angular CLI прави процеса на настройка лесен.

Глобални перспективи и примери

При използване на Storybook в глобални проекти е важно да се вземат предвид аспектите на локализация и интернационализация на вашите UI компоненти. Например:

• Посока на текста (RTL/LTR): Уверете се, че вашите компоненти поддържат както посоките на текста отляво надясно (LTR), така и отдясно наляво (RTL). Можете да използвате Storybook, за да създадете истории, които показват компоненти и в двете посоки. Обмислете използването на библиотеки като `styled-components` с плъгина `rtlcss` за автоматично обработване на трансформациите на стила.
• Формати за дата и час: Използвайте подходящо форматиране на дата и час въз основа на локала на потребителя. Можете да използвате библиотеки като `moment.js` или `date-fns` за правилно форматиране на дати и часове. Създайте истории, които показват компоненти с различни формати за дата и час.
• Валутни формати: Показвайте валутните стойности в правилния формат за локала на потребителя. Можете да използвате библиотеки като `numeral.js` или `Intl.NumberFormat` за форматиране на валутни стойности. Създайте истории, които показват компоненти с различни валутни формати и символи.
• Превод: Използвайте библиотеки за интернационализация (i18n), за да преведете вашите UI компоненти на различни езици. Storybook може да се използва за визуализиране на компоненти с различни преводи. Библиотеки като `i18next` се използват често.
• Достъпност: Придържай се към насоките за уеб достъпност, за да се уверите, че вашите UI компоненти могат да бъдат използвани от хора с увреждания, независимо от тяхното местоположение.

Пример: Представете си компонент на формуляр, използван глобално. В история на Storybook можете да покажете:

• Формулярът с етикети и инструкции, преведени на испански.
• Същият формуляр, показан с RTL оформление за потребители, говорещи арабски.
• Формулярът, показващ поле за дата с формат MM/DD/YYYY за Съединените щати и DD/MM/YYYY за Европа.

Заключение

Storybook е мощен инструмент, който може значително да подобри вашия работен процес за frontend разработка. Като предоставя изолирана среда за разработване на UI компоненти, той насърчава повторната употреба, подобрява скоростта на разработка, опростява тестването и улеснява сътрудничеството. Независимо дали изграждате малък уебсайт или голямо приложение, Storybook може да ви помогне да създадете здрави, поддържащи се и последователни потребителски интерфейси.

Като приемете концепциите и техниките, описани в това ръководство, можете да използвате пълния потенциал на Storybook и да създадете изключителни потребителски изживявания за вашата глобална аудитория.