🧠 Как строить UI-компоненты по принципу атомов, молекул и организмов

Компоненты делятся на уровни:

1️⃣ Атомы — базовые элементы: кнопки, инпуты, иконки.

2️⃣ Молекулы — простые комбинации атомов, например форма поиска.

3️⃣ Организмы — сложные блоки интерфейса, например хедер или карточка товара.

4️⃣ Шаблоны — структура страницы с расставленными организмами, без конкретного контента.

5️⃣ Страницы — финальная реализация шаблонов с реальными данными.

➡️ Зачем это нужно:

— Упрощает повторное использование компонентов

— Делает код предсказуемым и масштабируемым

— Помогает поддерживать дизайн-систему

📌 Atomic Design особенно полезен для больших проектов, где интерфейс постоянно растёт и нужно избегать хаоса в компонентах.

🐸 Библиотека фронтендера

#blueprint

📢 Навигация по каналу

Чтобы не теряться в потоке постов, мы собрали удобную навигацию по тегам. Всё нужное — в пару кликов:

#readme — код-сниппеты, CSS-трюки, JS one-liners, команды Git/CLI

#hotfix — реальные баги и проблемы с объяснением, как их исправить

#blueprint — high-level концепции и паттерны

#under_hood — разбираем, что происходит внутри фреймворков и браузера

#stack — обзоры библиотек, плагинов, инструментов

#release_digest — все важное за неделю/месяц в одном месте: новые версии фреймворков, релизы библиотек, ссылки и краткие описания

#code_challenge — интерактивные задачи с разбором на следующий день

#code_battle — столкновение технологий или подходов

#pixel_pause— мемы, юмор и забавные истории из фронтенд-жизни

#career_merge — советы по резюме, soft skills, вопросы с собеседований, обсуждение зарплат

#ux_review — изучаем интерфейсы и UX известных сайтов и приложений

#read_watch — подборки полезных материалов: статьи, конференции, GitHub, книги

🔈 Включайте уведомления, используйте теги для быстрого поиска и оставайтесь в курсе всего: от практических фич до мемов и свежих трендов.

🐸 Библиотека фронтендера

🏗️ Plugin Architecture во фронтенде

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

Плагинная архитектура решает эту проблему иначе: ядро остаётся стабильным, всё остальное — расширения.

⏬ Как это работает:

Есть core — минимальная часть с бизнес-правилами, безопасностью, логированием и общими утилитами.

А вокруг — плагины, которые подключаются через публичный API или события. Ядро не знает о них ничего — только о контракте.

⏬ Зачем это нужно:

— модульность и независимые релизы
— возможность кастомизации под клиента или регион
— развитие без трогания основного кода

🔆 VS Code, Figma, Obsidian, Grafana — все построены на этой идее.

⏯ Когда не подойдёт:

— если нет строгого API
— если плагины тесно зависят от общей логики
— если команда одна и продукт небольшой

🐸 Библиотека фронтендера

#blueprint

🧿 Паттерн недели — Container / Presentational

Иногда компонент делает всё сразу: тянет данные, хранит стейт, обрабатывает события и рендерит UI. Через месяц — каша, через три — баги и боль.

⚪️ Что это дает:

— код становится чище и стабильнее,
— проще тестировать (UI отдельно, логика отдельно),
— UI можно переиспользовать,
— границы между слоями становятся прозрачными.

⚪️ Когда применять:

— компонент разросся и делает всё,
— нужно использовать один UI с разными данными,
— хочешь сделать код «архитектурно зрелым».

🆖 Чек-лист:

✅ Presenter без useEffect и fetch

✅ Только пропсы и рендер

✅ Контейнер решает, что показать, Presenter — как

🐸 Библиотека фронтендера

#blueprint

🎯 Feature-Sliced Design: организация кода по фичам

Feature-Sliced Design (FSD) — это методология для архитектуры фронтенд-приложений, ориентированная на упрощение понимания кода и его стабильность при постоянных изменениях бизнес-требований.

Структура из 7 слоёв:

1️⃣ app/ — инициализация приложения: роутинг, точки входа, глобальные стили, провайдеры

2️⃣ processes/ — устаревший слой, сейчас рекомендуется использовать features и app

3️⃣ pages/ — полные страницы приложения или крупные части страницы при вложенной маршрутизации

4️⃣ widgets/ — крупные самодостаточные блоки функциональности или UI, реализующие целый сценарий использования

5️⃣ features/ — продуктовые функции, которые приносят
бизнес-ценность пользователю

6️⃣ entities/ — бизнес-сущности, с которыми работает проект (например, user или product)

7️⃣ shared/ — переиспользуемая функциональность, не привязанная к специфике проекта или бизнеса

〰️ Модуль может импортировать другие слайсы только с нижележащих слоёв. Верхний слой не может использовать модули из других слоёв.

⚙️ FSD универсальна: её можно использовать в любых проектах с любым стеком, языком или фреймворком.

🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

🐸 Библиотека фронтендера

#blueprint