Представьте что ваше приложение это живой органзим. Любой организм подвержен старению. Чтобы сгладить углы мы должны ухаживать за ним. Уход должен быть комплексным. В мире разработки абсолютно так же. С годами наши проекты стареют. В мире фронтенда нет единого подхода к организации структуры проекта. Мало реальных примеров с жизнеспособной архитектурой. Каждый проект делают по внутренним стандартам компании и в итоге каждый раз надо вникать в архитектуру. К тому же, чаще всего она затачивается под конкретный фреймворк или библиотеку. Последствия не верного выбора архитектуры в проекте обычно выражаются в росте хаоса, беспорядка,как следствие - неустойчивость к изменениям. Я постараюсь рассказать вам про один стандартизированный подход - Feature-Sliced Design. Но перед этим изучим популярные ошибки и подходы к их решению.
Я бы очень советовал посмотреть этот доклад:
Доклад: FSD — Архитектура Frontend проектов / Илья Азин
Более свежая презентация, но без видосика, с закрытого выступления, Илья разрешил 👀
Eslint-config, CRA-template, CLI и многое полезеное по FSD
Про разделение хуков по смыслу
Про shared segments, assets и тд
Где располагать Layout (Header/Footer/...)
Формулировка определения "Feature"
Public API, Антихрупкость или все же Усточивость
Про side effects free для Webpack, для Public API
Про тришейкинг ре-экспортов, Side effects free
Decompose Github Decompose Twitter
Чистая архитектура на фронтенде
Еще немного про чистую архитектуру
Atomic Design: What is it and why is it important in 2022?
Feature Driven Architecture - Oleg Isonen
Live-coding: Чистая архитектура во фронтенде / Александр Беспоясов
Доклад Ильи Климова про бесконечный рефакторинг
Webpack Circular Dependency Plugin - Судя по ишью, не подойдет для 5 версии вебпака
Dpdm - Статический анализ зависимостей
На выбор по импорт сортировке:
Plant UML:
Про Feature Slices, хорошо подойдёт для начала
Почему utils & helpers это свалка