Введение в атомарный дизайн
Можете ли вы сразу прочитать, что у вас есть в общем модуле? И скажите, не открывая другой файл, какие компоненты имеют зависимости или полагаются на другие компоненты?
Независимо от ответа, я приглашаю вас выпить чашку кофе и присоединиться ко мне в этом погружении в Атомный дизайн Брэда Фроста! ☕
Определение атомарного дизайна в контексте Angular
Разработчики Angular часто используют container-presenter или smart-dumb, чтобы говорить о компонентах. Это простой простой способ рассказать о зависимостях и о том, как компоненты взаимодействуют друг с другом, но не содержит подробностей о пользовательском интерфейсе.
Понятие «тупой» компонент может быть любым - от кнопки до макета. Атомарный дизайн дополняет определение, предоставляя подробную информацию о структуре пользовательского интерфейса и взаимосвязях.
Атомы и молекулы - немые компоненты
Это простые, многоразовые и легкие для тестирования фрагменты кода. Оба они получают @Input и могут выдавать @Ouput. Идеальные кандидаты в библиотеки пользовательского интерфейса.
- Атомы: наименьшая возможная единица, используемая повсеместно. Обычно это один элемент HTML с базовым стилем.
- Молекулы: отдельная группа атомов.
Организмы и шаблоны - упрощение интеллектуальных компонентов
С точки зрения уменьшения сложности интеллектуальных компонентов, шаблоны помогают уменьшить шаблонный HTML и организует их аналог машинописного текста.
По своему опыту ведения проектов я обнаружил, что хотя эти два аспекта являются ключевыми для масштабируемости приложения и производительности команды, они также редко встречаются.
И это связано с временностью. Когда мы изначально проектируем сложный интеллектуальный компонент, мы делаем это как единое целое. Мы создаем полную страницу, медленно добавляя небольшие фрагменты. И внезапно умный компонент может легко вырасти до 500 строк ts и почти до 1 КБ HTML-CSS, превратившись в лужу грязи, где каждый шаг делать труднее, чем предыдущий. Даже если логика проста, длина файла затрудняет поддержание.
Шаблоны и организмы могут помочь уменьшить шум и сохранить структуру кода и готовность к масштабированию. Будет легче распознать и повторно использовать фрагменты кода в будущих похожих функциях.
Шаблоны
Думайте о шаблонах как о каркасе и оболочке для определенного компонента.
Просто HTML-CSS с ng-содержимым.
Они используются компонентами высокого порядка (например, страницами или организмами), чтобы заботиться о вариативности стилей и шаблоне HTML. Этот компонент не должен иметь никаких зависимостей ввода, вывода, логики или конструктора.
Давайте посмотрим на это на простом примере:
Этот подход отлично подходит не только для небольших фрагментов кода, таких как угловые карты материалов, но и для дизайна на весь экран. Когда компонента макета с выходом маршрутизатора недостаточно или вам нужно разделить код, это может быть хорошим решением. После того, как исходный код станет стабильным, рефакторинг до шаблонов станет делом вырезания и вставки, занимающего не более нескольких минут.
Организмы
Группа молекул, действующих как единое целое, с определенным уровнем сложности.
Сайт Брэда использует заголовок страницы в качестве примера организма.
На мой взгляд, это более функциональный подход, чем структурный. Мне нравится думать о них как о виджетах. Автономные разделы приложения, которые могут быть повторно использованы на нескольких страницах и имеют автономное значение.
Умные они или глупые?
Эмпирического правила не существует. Я предпочитаю по возможности сохранять зависимости и логику службы на странице / контроллере. Но на самом деле сложные страницы, может быть рекомендовано превратить страницу в более тип макета и разделить логику на несколько дочерних компонентов организма с их собственными зависимостями.
Страницы - Умные компоненты
В классической структуре проекта core / features / shared обычно называется features. Интеллектуальные компоненты управляют вводом / выводом, соединяясь с ядром вашего приложения через службы.
Статья показалась вам интересной?
Каково ваше мнение?
Как всегда,
Спасибо за внимание! 🙂
