Почему Storybook?

Проблема

Универсальность сети подталкивает к большей сложности. Он начался с адаптивного веб-дизайна, который превратил каждый пользовательский интерфейс из одного в 10, 100, 1000 различных пользовательских интерфейсов. Со временем дополнительные требования накапливались в аналогичных устройствах, браузерах, доступности, производительности и асинхронных состояниях.

Управляемые компонентами - инструменты, такие как React, Vue и Angular, помогают разбивать сложные пользовательские интерфейсы на простые компоненты, но это не серебряные пули. По мере роста фронтов количество компонентов увеличивается. Зрелые проекты могут содержать сотни компонентов, которые дают тысячи дискретных вариаций.

Чтобы еще больше усложнить ситуацию, эти пользовательские интерфейсы болезненны для отладки, потому что они запутаны в бизнес-логике, интерактивных состояниях и контексте приложений.

Широта современных фронтов перегружает существующие рабочие процессы. Разработчики должны учитывать бесчисленные вариации пользовательского интерфейса, но не имеют возможности разрабатывать или организовывать их все. Вы попадаете в ситуацию, когда пользовательские интерфейсы сложнее создавать, менее удовлетворяющие и хрупкие.

Решение

Строить пользовательские интерфейсы в изоляции

Каждый кусок пользовательского интерфейса теперь компонент. Сверхдержава компонентов заключается в том, что вам не нужно раскручивать все приложение, чтобы увидеть, как они отображаются. Вы можете визуализировать конкретное изменение в изоляции, передавая реквизиты, насмешливые данные или фальсификацию событий.

Сборник рассказов упакован как маленький, только для разработки -, мастерскаяэто живет рядом с вашим приложением. Он предоставляет изолированную iframe для рендеринга компонентов без помех от бизнес-логики и контекста приложения. Это помогает вам сосредоточиться на разработке каждого варианта компонента, даже в жестких случаях - до -.

Захватывайте вариации пользовательского интерфейса как «истории»

При разработке вариации компонента в изоляции сохраните его как историю. историиявляются декларативным синтаксисом для предоставления реквизита и макетов данных для моделирования изменений компонентов. Каждый компонент может иметь несколько историй. Каждая история позволяет вам продемонстрировать конкретное изменение этого компонента для проверки внешнего вида и поведения.

Вы пишете истории для изменения гранулированного пользовательского интерфейса, а затем используете эти истории при разработке, тестировании и документировании.

// Histogram.stories.ts|tsx

import React from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Histogram } from './Histogram';

export default {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'Histogram',
  component: Histogram,
} as ComponentMeta<typeof Histogram>;

const Template: ComponentStory<typeof Histogram> = (args) => <Histogram {...args} />;

export const Default = Template.bind({});
Default.args = {
  dataType: 'latency',
  showHistogramLabels: true,
  histogramAccentColor: '#1EA7FD',
  label: 'Latency distribution',
};

Storybook отслеживает каждую историю

Storybook - это интерактивный каталог ваших компонентов пользовательского интерфейса и их историй. В прошлом вам приходилось раскручивать приложение, переходить на страницу и искажать пользовательский интерфейс в нужном состоянии. Это огромная трата времени и заваливает развитие внешнего интерфейса. С Storybook вы можете пропустить все эти шаги и перейти прямо к работе над компонентом пользовательского интерфейса в определенном состоянии.

Преимущества

Когда вы пишете истории для компонентов, вы получаете кучу дополнительных преимуществ бесплатно.

📝 Развивать пользовательские интерфейсы, которые являются более долговечными

Изолируйте компоненты и страницы и отслеживайте их варианты использования как истории. Проверьте жесткие - до - крайние случаи пользовательского интерфейса. Используйте дополнения, чтобы высмеивать все, что нужно компоненту — context, запросы API, функции устройства и т. Д.

✅ Тестовые интерфейсы с меньшим усилием и без хлопьев

Истории - это прагматичный, воспроизводимый способ отслеживания состояний пользовательского интерфейса. Используйте их, чтобы определить - тестирование пользовательского интерфейса во время разработки. Storybook предлагает встроенные рабочие процессы - для автоматизированного доступность, взаимодействие, а также визуальныйтестирование. Или используйте истории в качестве тестовых примеров, импортируя их в другие инструменты тестирования JavaScript.

📚 Документ UI для вашей команды для повторного использования

Storybook - единственный источник правды для вашего пользовательского интерфейса. Истории индексируют все ваши компоненты и их различные состояния, что позволяет вашей команде легко находить и повторно использовать существующие шаблоны пользовательского интерфейса. Storybook также автоматически - генерирует документацияиз тех историй.

📤 Поделитесь тем, как на самом деле работает пользовательский интерфейс

Истории показывают, как на самом деле работают пользовательские интерфейсы, а не просто картина того, как они должны работать. Это держит всех в курсе того, что в настоящее время производится. Опубликовать сборник рассказовполучить знак - от товарищей по команде. или встраиватьих в вики, Markdown и Figma для оптимизации сотрудничества.

🚦 Автоматизация рабочих процессов пользовательского интерфейса

Storybook совместим с вашим процессом непрерывной интеграции. Добавьте его в качестве шага CI для автоматизации тестирования пользовательского интерфейса, проверки реализации с товарищами по команде и получения информации от заинтересованных сторон.

Пишите истории один раз, используйте везде

Storybook работает на Формат истории компонентов, открытый стандарт на основе модулей JavaScript ES6. Это позволяет историям взаимодействовать между инструментами разработки, тестирования и проектирования. Каждая история экспортируется как функция JavaScript, позволяющая вам повторно использовать ее с другими инструментами. Нет блокировки поставщика - в.

Повторно использовать истории с Jestи Библиотека тестированияпроверить взаимодействия. Положите их в хроматическийдля визуального тестирования. Доступность истории аудита с Axe. Или протестировать потоки пользователей с драматурги кипарисы. Повторное использование открывает больше рабочих процессов без дополнительной оплаты.

Storybook - это цель -, созданная для того, чтобы помочь вам быстрее разрабатывать сложные пользовательские интерфейсы с большей прочностью и меньшим техническим обслуживанием. Используется сотнями ведущие компаниии тысячи разработчики.