Внесли свой вклад в несколько систем дизайна сейчас, я обнаружил, что те же проблемы появляются снова и снова. В большинстве случаев эти проблемы могут быть решены с небольшим прямом планированием и некоторым здравым смыслом, но остальная часть зависит от проб и ошибок. У каждой команды есть свои потребности из системы дизайна, поэтому то, что работает для одного человека, может не работать для другого. Надеемся, что предложения в этой статье могут быть применены к вашей системе проектирования.
Четко определить, что должно и не должно быть включены в вашу библиотеку компонентов
На мой взгляд, система проектирования должна включать только примитивы компонентов и наиболее распространенные повторные модели. Они будут известны как атомы или молекулы Если вы используете методологию атомного дизайна.
Если компонент слишком сложный, я предлагаю вывести его из репозитория системы проектирования. Точно так же, если он не будет использоваться всеми, которые потребляют вашу систему проектирования, то это также хороший кандидат для перемещения в другой репозиторий. Используйте систему дизайна в качестве базы для всего остального, который строит ваша команда.
Это решение также имеет основу в результате работы. Больше компонентов увеличит размер упаковки результата.
У каждой команды будут свои собственные критерии того, что должно быть включено в систему дизайна, но в конечном итоге это личное и эволюционное решение. Как только вы пришли к своему решению, убедитесь, что вы документируете его в месте, которое легко найти.
Иметь четкую и последовательную стратегию именования
Это может показаться очевидным, но давление вашим компонентам полезных и интуитивно понятных имен имеет решающее значение. То, что может показаться хорошим для дизайнера, может быть неясным для разработчика (и наоборот). Это звучит легко, но на самом деле довольно сложно на практике.
Документировать все
Чем больше информации вы предоставляете для каждого компонента, тем больше он будет использоваться и поддерживаться. Вы не хотели бы, чтобы ваш компонент использовался неправильно, поэтому предоставьте информацию о том, как и когда его следует использовать.
Предоставьте информацию о том, как ее потреблять с точки зрения развития, например, Какой код необходим для его импорта, и каковы примеры для него варианты использования.
Docz является отличным решением для документирования компонентов. Документация записана в формате разметки (.mdx), и компоненты могут быть встроены прямо в документацию.
Сборник рассказов Также имеет возможность отображать разметку (с использованием дополнений README или Info) и является отличной альтернативой для поддержания документов близко к деталям реализации.
Сделайте компоненты легко найти
Если возможно, предоставьте поиск, чтобы найти ваши компоненты. Оба Сборник рассказов и Docz иметь поиск Но они ограничены только именами историй/предметов. В качестве альтернативы создайте индекс всех компонентов на одной странице, чтобы их можно было легко искать, Fannypack делает блестящую работу на их домашней странице. Наличие последовательной стратегии именования также поможет в этом вопросе.
Сделайте ваши компоненты легко развивать
Предоставление специальной среды развития также чрезвычайно важно. Инструмент как Сборник рассказов идеально подходит для этого, потому что он создает среду для предварительного просмотра и развития ваших компонентов в изоляции.
Проверьте свои компоненты в различных условиях, используя надстройки сборника рассказов. Ручки а также ViewPort Дополнения делают разработку намного проще, позволяя пользователям изменять значения и данные, которые использует компонент.
Источник истории Дополнение показывает исходный код для данного компонента, поэтому разработчикам еще проще увидеть его примеры.
Предоставить интерактивную демонстрацию
Если вы можете опубликовать свои компоненты в npm , тогда вы можете использовать что -то вроде CodeSandbox чтобы разработчики могли экспериментировать с ними и проверить различные комбинации.
Сделайте ваши токены дизайна легко получить доступ и редактировать
Ваши жетоны дизайна будут использоваться больше, чем любой другой аспект вашей системы, поэтому упростите их для ссылки и еще более просты в обновлении. Если вы пишете CSS-In-JS, моя библиотека, Система дизайна utils может очень помочь в этом вопросе.
Где бы вы ни решили документировать свои компоненты, ваши жетоны также должны быть включены и там.
Сделайте ваши компоненты доступными по умолчанию
Дополнительные усилия, необходимые для обеспечения доступных компонентов, незначительны по сравнению с разочарованием, которое они вызывают пользователям с особыми потребностями. Есть много ресурсов о доступности онлайн, вот Мой постоянно растущий список ресурсов A11Y.
Проверьте свои компоненты
Чем больше тестов вы добавляете, тем более надежными и надежными будут ваши компоненты. Есть несколько различных типов тестов, которые вам понадобятся: модульные тесты, тесты на снимки и визуальные регрессионные тесты.
Визуальные регрессионные тесты великолепны для подбора ошибок в компонентах с течением времени. Например, если кто -то изменяет значение токена для цвета границы, который предназначен для входов формы, но другой компонент также использует его для своей границы, то ваши тесты на визуальную регрессию уведомит вашу команду об изменении при выполнении тестов. Хромат Отлично подходит для этого, потому что он блестяще интегрируется с сборницей рассказов, и это бесплатно, если ваш проект является открытым исходным кодом.
Версии
Используя правильное Семантическое управление версией (например, 1.2.3 ) действительно поможет, когда люди потребляют вашу систему проектирования. Существует четкое понимание того, почему версия изменилась и что это значит для людей, ссылающихся и потребляющих вашу работу.
Есть много инструментов, которые помогают автоматизировать управление версиями, один из которых Обычные коммиты ; Он автоматически определяет семантическую версию; автоматизирует генерацию изменений; И он также интегрируется с вашим процессом непрерывной интеграции, поэтому он компенсирует эти функции, и больше, поэтому разработчикам не нужно думать об этом.
Автоматизировать как можно больше
Если вы можете автоматизировать свои модульные тесты, визуальные регрессионные тесты, покрытие кода, кодовое склад и даже процесс выпуска, вы снова будете компенсировать мирские и повторяющиеся задачи, о которых не придется беспокоиться вашей команде.
Посвятить время и ресурсы для поддержания кодовой базы
Я не могу подчеркнуть этот момент достаточно: если вы не посвящаете время и ресурсы для поддержания вашей кодовой базы, она в конечном итоге потерпит неудачу. Нельзя использовать; не измениться со временем; и не быть полезным для тех, кто в этом нуждается.
Я хотел бы услышать ваши мысли по этому поводу. Вам есть что добавить? Можно ли улучшить какую -либо из моих очков?
Оригинал: “https://dev.to/mrmartineau/lessons-learnt-building-design-systems-5cmj”