Что отличает отличную дизайн-систему и как вы можете создать свою собственную для своего проекта или компании?

Такие компании, как Airbnb, Apple, Uber и GitHub, изменили способы разработки цифровых продуктов, включив свой язык дизайна и организовав его в систему, которую можно использовать для всех сотрудников - и даже за пределами компании.

Он быстро стал популярным во всей отрасли: просто погуглите название компании и слово дизайн рядом с ним, и вы удивитесь, сколько компаний имеют что-то подобное. Airbnb Design, Apple Design, Uber Base Web, GitHub Primer - вот примеры хороших систем дизайна.

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

Черты хорошей дизайн-системы

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

Многоразовые компоненты

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

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

Обширная документация

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

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

Ориентированный на производительность

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

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

Поддерживайте высочайшее качество

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

StencilJS и веб-компоненты на помощь

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

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

Компоненты, созданные с помощью Stencil, полностью совместимы со стандартами браузера и могут запускаться в любой среде, включая простой HTML-файл. Вы можете использовать конечные цели, чтобы добавить собственный веб-сайт, на котором будут представлены ваши работы. Также есть возможность тестирования скриншотов (кроме интеграции с e2e и Jest).

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

Представляем кнопку извлечения

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

Для начала запустите генератор трафаретов: npm init stencil. Вам будет предложено выбрать стартер. Выберите компонент. В результате будет создана папка с простым тестовым компонентом, чтобы вы могли начать с ним играть (npm install && npm start).

В папке src/components вы найдете папкуmy-component. Переименуйте его в fetch-button, а также файлы css и tsx внутри него. CSS-файл отвечает за стиль нашей кнопки, поэтому давайте добавим несколько стилей:

Теперь переходим в файлtsx. Это фактический компонент, который нам нужно построить.

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

Затем внутри класса нам нужно определить prop с именем url. Он будет работать как атрибут HTML и позволит нам передавать данные в компонент.

Следующая строка создает переменную состояния: каждый раз, когда мы ее изменяем, функция рендеринга запускается повторно.

@Eventdirective регистрирует для нас два события: onSuccess и onError.

@Listen помогает нам прослушивать события щелчка и выполнять соответствующую функцию. В нашем случае мы вызовем встроенную функцию выборки и обновим состояние и инициируем события в зависимости от результата.

Наконец, функция therender определяет DOM, который «будет» создан. Тег <slot /> будет заменен <fetch-button> дочерними элементами.

Вот и все. Теперь посмотрим, как мы можем это использовать.

Помимо собственного примера HTML, я добавил интеграцию с React. Как видите, это так же просто, как написать простые div элементы.

Известные сложности

А теперь пора поговорить о недостатках использования веб-компонентов.

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

В качестве обходного пути вы можете прикрепить собственное событие с помощью свойства theref - что я и сделал в приведенном выше примере. На веб-сайте Custom Elements Everywhere показана совместимость веб-компонентов с популярными фреймворками.

Заключение

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

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

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