Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Создаем универсальную дизайн систему с помощью React

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

React сделал очень много для упрощения веб-разработки. Его компонентная архитектура принципиально упрощает задачу разложения и повторного использования кода. Однако, разработчикам не всегда ясно, как использовать одни и те же компоненты в разных проектах. В этой статье я покажу вам несколько способов, как это исправить.

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

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

Приступая к работе

Для начала вам понадобится пустой проект React. Самый быстрый способ его создать - это через команду create-react-app, но потребуется немного постараться, чтобы настроить для этого Sass. Я создал базовое приложение, которое вы можете клонировать из GitHub. Вы также можете найти окончательный проект в репозитории GitHub нашего урока.

Для запуска, выполните команду yarn-install, чтобы установить все зависимости, и затем выполните команду yarn start для запуска приложения.

Все визуальные компоненты будут находиться в папке design_system наряду с соответствующими стилями. Все глобальные стили или переменные будут располагаться в src/styles.

Project folder structure

Определяем основы дизайна

Помните последний раз, когда ваши коллеги дизайнеры смотрели на вас неодобрительным взглядом за то, что вы ошиблись на пол пикселя в расчетах отступа или не смогли отличить два разных оттенка серого цвета? (Оказывается есть разница между #eee и #efefef, как мне сказали, и однажды я может и сам ее замечу.)

Одной из целей создания библиотеки пользовательского интерфейса является улучшение отношений между командами дизайна и разработки. Front-end разработчики уже определенное время сотрудничают с разработчиками API и теперь способны неплохо вырабатывать API соглашения. Но почему-то этот момент ускользает от нас при координации с командой дизайнеров. Если задуматься, то существует только определенное число состояний, в которых может существовать элемент пользовательского интерфейса. Если нам нужно создать компонент заголовка, например, то это будет элемент от h1 до h6, который может быть полужирным, курсивным или подчеркнутым. Это должно быть несложно описать в коде.

Grid разметка

Первое, что нужно сделать, прежде чем приступать к созданию любого дизайн проекта - это определиться со структурой grid сетки. Для многих приложений она носит случайных характер. И это приводит к тому, что нет четкой системы расположения элементов, что вызывает затруднения у разработчиков при определении какую систему использовать. Так что выберите конкретную систему! Мне очень понравилась система grid разметки 4px - 8px, когда я впервые прочитал о ней. То, что я придерживался именно ее, помогло мне упростить решение многих вопросов с оформлением.

Начнем с того, что создадим базовую систему grid разметки в коде. Мы начнем с компонента приложения, который определяет макет.

Далее мы определяем несколько компонентов для стилей и блоков контента.

Наконец мы создаем наши CSS стили в SCSS.

Тут есть много над чем поработать. Начнем с основ. variables.scss - это файл, в котором мы задаем наши глобальные значения, такие как цвет и настройка разметки. Поскольку мы используем сетку 4px-8px, наша базовая величина будет 4px. Родительский компонент - Page, и он контролирует разметку страницы. Затем элемент нижнего уровня - это Box, который определяет, как содержимое отображается на странице. Это просто div, который знает, как отображаться правильно в определенном контексте.

Теперь нам нужен компонент Container, который объединяет несколько divов. Мы выбрали flex-box, отсюда и название компонента Flex.

Определение системы типографии

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

Во-первых мы определим некоторые стилевые константы и создадим класс оболочки.

Далее мы определим стили CSS, которые будут использоваться для текстовых элементов.

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

Молекулы состоят из атомов

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

Во-первых мы определяем класс компонента для модального окна.

Далее мы можем определить стили CSS для модального окна.

Для непосвященных createPortal очень похож на метод render, за исключением того, что он создает дочерние элементы в ячейке, которая существует за пределами DOM иерархии родительского компонента. Такой функционал был добавлен в React 16.

Использование компонента Modal

Теперь, когда определен компонент, давайте посмотрим, как мы можем использовать его в реальной ситуации.

Мы можем использовать модальное окно везде и поддерживать его состояние в вызывающем объекте. Просто, правда? Но здесь есть ошибка. Не работает кнопка закрытия. Это потому, что мы создали все компоненты в виде закрытой системы. Он просто принимает те параметры, которые ему нужны, и игнорирует все остальное. В данном контексте, компонент текста игнорирует обработчик события onClick. К счастью это легко исправить.

ES6 предоставляет удобный способ для извлечения оставшихся параметров в виде массива. Просто применяем этот способ и передаем параметры компоненту.

Создаем средства поиска доступных компонентов

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

Чтобы начать, выполните:

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

API очень простой. storiesOf определяет новую запись, обычно это ваш компонент. Затем можно создать новый подраздел с помощью add, для обозначения различных состояний этого компонента.

A simple Type storybook

Конечно это довольно простой пример, но для сборников есть несколько дополнений, которые помогут вам добавить функциональность для вашей документации. А я рассказывал, что они имеют поддержку emoji? 😲�

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.