Системы проектирования для разработчиков

Сообщения
460
Реакции
189
1630311740543.png
Вступление

Современная интерфейсная разработка более сложной, чем раньше. Разработчикам приходится думать о создании пользовательских интерфейсов, которые работают и адаптируются к различным устройствам и размерам экрана. Это привело к тому, что интерфейсы стали восприниматься не как страница, а скорее как комбинация различных компонентов. Эти компоненты, из которых состоят пользовательские интерфейсы, называются шаблонами проектирования (pattern, паттерн). Шаблоны дизайна - это многоразовые элементы дизайна. С появлением веб-фреймворков на основе компонентов, таких как React, Vue и Angular, это привело к увеличению модульности с точки зрения понимания пользовательских интерфейсов.

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

Зачем проектировать системы?

  1. Наличие системы проектирования помогает поддерживать согласованность различных частей пользовательского интерфейса. Поскольку существует набор шаблонов проектирования и рекомендаций по их использованию, пользовательский интерфейс всегда согласован.​
  2. Системы проектирования обеспечивают простоту сотрудничества между дизайнерами и разработчиками​
  3. Благодаря эффективной системе проектирования проще и быстрее вносить изменения в определенную часть пользовательского интерфейса​

Что такое маркеры (токены) проектирования?


Маркеры (токены) проектирования - это набор переменных, используемых для различных компонентов и шаблонов системы проектирования. В основном это имена переменных, присвоенные значениям дизайна, таким как типография, цвет, интервал и т.д. Они важны, потому что помогают поддерживать согласованность между различными платформами продукта. Маркеры дизайна могут помочь фронтенд - разработчикам в присвоении имен переменным CSS. Ответственность за согласование определения маркеров дизайна лежит как на разработчиках, так и на дизайнерах. Ниже приведен скриншот из системы проектирования Adobe Spectrum, на котором показаны их маркеры дизайна для интервалов и их соответствующие значения.
1630313091973.png
Процесс построения системы проектирования

Существуют различные современные инструменты для построения системы проектирования. Для дизайнеров они включают Adobe XD, Figma, Invision и Sketch. После проектирования система доступна разработчикам. Разработчики должны создать библиотеку компонентов на основе этих систем проектирования. Такие инструменты, как Fractal, Storybook, Bit.dev и многие другие, предоставляют современную систему для создания библиотек компонентов. Мой личный фаворит - storybook, потому что он с открытым исходным кодом и работает с современными интерфейсными библиотеками, такими как React, Vue и Angular, без особых настроек. Это также обеспечивает простой способ документирования компонентов в библиотеке компонентов. В остальной части статьи показано, как storybook можно использовать для создания компонентов React.

Создание библиотек компонентов с помощью Storybook

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

Начало работы со Storybook в React

Storybook можно легко использовать для создания компонентов React. Это упрощает процесс, поскольку компоненты могут быть созданы, протестированы и задокументированы изолированно перед интеграцией с приложением react. Чтобы добавить storybook в react, все, что нам нужно сделать, это использовать интерфейс командной строки storybook для инициализации storybook в react. В корневой папке приложения React выполните команду ниже:

npx sb init

Выполнив команду выше, интерфейс командной строки storybook инициализирует новый проект storybook в приложении react. Он создает папку stories в каталоге src приложения. storybook читает каждый файл, заканчивающийся на .jsx или .tsx в качестве компонента. Он также создает шаблон storybook по умолчанию в приложении react. Шаблон по умолчанию состоит из трех компонентов: Button, Header и Page. Он также генерирует *.stories.js файл для каждого компонента.
1630317941835.png

Эти файлы называются историей. История представляет отображаемое состояние компонента. Компонент обычно имеет несколько историй в зависимости от текущего состояния визуализации. Чтобы просмотреть компоненты в storybook, мы можем выполнить команду ниже:

Код:
npm run storybook

При этом сервер storybook запускается на порту по умолчанию 6006.

Default storybook Template

Мы можем видеть все компоненты в папке "Stories" на боковой панели. Под каждым компонентом есть подразделы, эти подразделы являются историями, которые определяют различное состояние, которое могут иметь компоненты.

stories in a component

Написание истории

Stories - это в основном компоненты React, экспортируемые из файла, заканчивающегося на .stories.js или .stories.ts. Компонент может иметь несколько историй в зависимости от того, в каком состоянии мы хотим, чтобы компонент находился.
История экспортирует объект по умолчанию, который содержит заголовок истории, соответствующий компонент и аргументы компонента. Состояние компонента контролируется аргументами. В дополнение к экспорту объекта по умолчанию, история должна также экспортировать различные истории, которые должен иметь компонент. Истории обычно привязываются к компоненту, и свойство args устанавливается для каждой из историй. Ниже приведен пример историй для компонента кнопки:

JavaScript:
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

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

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

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

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

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Из приведенного выше компонента каждый из экспортируемых объектов (Primary, Large, Secondary и Small) представляет собой истории. Каждый из них имеет свойство args, ограниченное шаблоном (компонентом). Экспорт по умолчанию содержит название компонента, сам компонент и типы аргументов. Значением типа аргумента можно управлять из приложения "Storybook" в зависимости от типа.

Существуют и другие концепции storybook, такие как параметры, дополнения и декораторы, которые выходят за рамки этой статьи.

Стоит так же почитать:

 
Назад
Верх Низ