Подсобрал список типовых проблем и их решений, с которыми неизбежно сталкиваются разросшиеся фронтовые монорепы или семейства проектов, если заранее не позаботиться о решениях.
⚠️ Неудобная локальная разработка, зоопарк технологий/подходов, сложно вкатываться в существующие проекты
Решения:
0️⃣ Переход на единую типовую сборку (Vite, Webpack…) с общим конфигом, общий инструментарий для монореп (workspaces, turbo, lerna…).
1️⃣ Создание единого шаблона для старта нового приложения.
2️⃣ Выработка единообразного стека:
🔡 система: node/bun, TS, фреймворк (React, Vue, Next…)
🔡 зависимости:
🔵пакетный менеджер (yarn/npm/pnpm, для консистентности лок-файлов)
🔵стейт-менеджер (или его отсутствие => Tanstack Query)
🔵роутер
🔵инструменты для работы с формами (хуки, валидация, маски для инпутов…) и валидатор схем
🔵стилизация (CSS Modules, SASS, Styled-подобные, ваниль), использование единообразного UI-kit (Storybook)
🔵утилиты (работа с датами, общие либы типа lodash)
3️⃣ Процесс регулярных обновлений зависимостей.
4️⃣ Единообразная структура проекта/проектов, приведение к единому виду (FSD…).
5️⃣ Архитектурные соглашения по выносу шаренных кусочков в микрофронты, связь между «отдельными кусочками» приложений в рамках общих приложений.
6️⃣ Общий/стандартизированный CI/CD.
7️⃣ Общий подход к проксированию запросов на бэк, к развёртыванию проекта локально.
8️⃣ Общий код-стайл и линтинг (ESLint, Prettier, Biome…).
9️⃣ Общий подход к логированию аналитики.
⚠️ Долгая разработка, необходимость частых ресерчей
Решения:
0️⃣ Централизованное внедрение AI-инструментов для помощи в написании кода (выбор единых агентов, генерация вспомогательных артефактов типа
claude.md)1️⃣ Создание бойлерплейта для документации и внедрение AI-генерации документации. Хранение документации в самих проектах и регулярная перегенерация.
⚠️ Дублирования кода, велосипеды
Решение:
Вынос повторяющихся пакетов в шареное хранилище переиспользуемых решений, хостинг в приватном npm-реестре, поддержка.
⚠️ Большое количество багов, уязвимостей и неконтролируемый/плохой перф и UX
Решения:
0️⃣ Внедрение мониторинга ошибок (Sentry), настройка алертов в чаты/дашбордов на ошибки (Grafana).
1️⃣ Подключение измерения метрик перфа в рантайме у пользователей (Vitals, TTVC и подобные), а также на CI/CD («бюджет» на перф в пулреквестах).
2️⃣ Интеграция в CI/CD инструментов для поиска уязвимостей в коде.
3️⃣ Процесс регулярного пополнения и разгребания бэклога техдолга (баги, уязвимости, оптимизации).
4️⃣ Внедрение среды для тестов/автотестов, написание/генерация юнит-тестов и e2e-тестов, регрессионное тестирование, запуск на CI/CD.
5️⃣ Выработка плавил работы со статикой (картинки на CDN, автоматизированное сжатие, ленивая загрузка).
⚠️ Несогласованная командная работа
Решения:
0️⃣ Использование контрактов (Open API) на бэке/фронте, кодогенерации типов и API-клиентов, клиент-серверных фреймворков (trpc).
1️⃣ Внедрение автоматизации в код-ревью (автоназначение ревьюеров, выработка правил мерджа в master, AI-генерация описаний пулреквестов и ревью).
2️⃣ Договорённости в единообразном именовании коммитов (conventional commits), веток, пулреквестов; единые подходы к организации дев/стейдж/релиз-веток; семантическое версионирование релизов.
#Лаборатория_веб_платформы
@web_platform | Поддержать платформу 💕