Всем привет! Если вы считаете Storybook лишним инструментом, эта статья для вас. Раньше я и сам мог присоединиться к такому мнению, но попробовал Storybook в деле, когда участвовал в разработке сервиса рассрочки для одного из крупнейших маркетплейсов. Разработкой этого проекта занимались две команды, состоящие из 15 человек.
Меня зовут Александр, я frontend-разработчик в Simbirsoft. Хочу поделиться, как этот инструмент может сократить время на разработку и тестирование, улучшить качество конечного продукта, а также сэкономить бюджет на больших проектах.
Советую к прочтению фронтенд-разработчикам и тимлидам, которые хотят упростить процесс тестирования и отладки компонентов интерфейса веб-приложений. Также материал может помочь менеджерам проектов и владельцам бизнеса в поиске новых подходов для ускорения и оптимизации процесса разработки. И даже если вы новичок во frontend-разработке и хотите узнать о новых инструментах и технологиях в этой области — welcome.
Мы рассмотрим такие возможности, как создание документации, тестирование, тестирование доступности, работу с моками, аддоны для имитации API и контекста. Я поделюсь, какие проектные задачи мне удалось решить, и чем может быть полезен Storybook для вас.
Для начала развеем одно из наиболее распространенных заблуждений среди разработчиков, что фронтенд — это просто. С появлением адаптивного дизайна количество пользовательских интерфейсов значительно возросло — каждый с уникальными ограничениями. С течением времени появились новые требования к интерфейсам устройств и браузеров, к доступности и производительности. Мы начали использовать JavaScript-фреймворки, добавлять различные типы рендеринга наших приложений (CSR, SSR, SSG и ISR) и разбивать монолит на микрофронтенды. В конечном итоге всё это усложнило фронтенд и создало необходимость в новых подходах к разработке и тестированию приложений.
Результаты исследования от 2020 года показали, что 77% разработчиков считают нынешнюю разработку более сложной, чем 10 лет назад. Несмотря на достижения в области инструментов JavaScript, специалисты продолжают сталкиваться с более сложными задачами. Компонентный подход, используемый в React, Vue и Angular, помогает разбить сложные пользовательские интерфейсы на простые компоненты, но этого не всегда достаточно. По мере роста приложения увеличивается количество компонентов, в серьезных проектах их может быть сотни, что дает тысячи вариаций. Еще больше усложняют ситуацию интерфейсы, которые трудно отлаживать, потому что они запутаны в бизнес-логике, интерактивных состояниях и контексте приложения.
И здесь на помощь приходит Storybook.
Что такое Storybook
Storybook — это инструмент JavaScript для организации пользовательских интерфейсов, который делает процессы разработки компонентов, тестирования и создания документации более эффективными и простыми. Он поддерживает множество фреймворков и библиотек для веб-приложений, в том числе React, Vue и Angular.
Storybook пропагандирует подход Component-Driven Development (CDD), согласно которому каждая часть пользовательского интерфейса — это компонент. Это основные строительные блоки приложения. Каждый из них разрабатывается, тестируется и документируется отдельно от других, что упрощает процесс разработки и поддержки приложения в целом.
Компонент — это независимый фрагмент интерфейса приложения. Например, кнопка, инпут, бейдж и так далее. Если мы понимаем принципы CDD и умеем применять этот подход в разработке, то можем использовать компоненты в качестве основы для создания приложений. Они должны быть максимально независимы друг от друга и разрабатываться с возможностью переиспользования в других частях приложения.
Можно подходить к созданию компонентов по-разному: начинать с меньших и постепенно объединять их в более крупные, и наоборот. Можно создавать их как в рамках самого приложения, так и в отдельном проекте — в виде библиотеки компонентов.
Благодаря мощной функциональности Storybook вы можете просматривать ваш интерфейс так, как это делают пользователи. Он предоставляет возможность запускать автоматические тесты, анализировать различные состояния интерфейса, работать с моковыми данными, создавать документацию и даже проводить ревью кода. Все эти задачи выполняются в рамках так называемой Story, что позволяет эффективно использовать Storybook для разработки.
Что такое Story?
Это основная единица конструкции Storybook, которая позволяет продемонстрировать различные состояния компонента для проверки его внешнего вида и поведения. Каждый компонент может иметь несколько историй, и каждую можно рассматривать как отдельный тест-кейс для проверки функциональности компонента.
Вы пишете истории для определенных состояний компонентов пользовательского интерфейса, а затем используете их для демонстрации внешнего вида во время разработки, тестирования и документирования.
// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
export default {
title: 'Button',
component: Button,
};
// Интересные статьи
Интересные статьи
