← Все статьи

Arcovia: проверка архитектуры React и Next.js-проектов

Arcovia строит карту зависимостей React и Next.js-проекта, объясняет оценку архитектуры и подсказывает, с чего начать рефакторинг.

Arcovia: проверка архитектуры React и Next.js-проектов
Содержание

Коротко

Arcovia — проект с открытым кодом для анализа архитектуры приложений на React и Next.js. Он собирает интерактивный HTML-отчёт: карту зависимостей, проблемные модули, разбор оценки и рекомендации по следующему рефакторингу.

Автор собрал первую версию за выходные на хакатоне OpenAI. Главная идея в том, что статический анализ не должен превращаться в непрозрачный вердикт: оценка строится по воспроизводимым правилам, а не генерируется языковой моделью.

Что произошло

У фронтенд-команд уже есть инструменты для локальных проблем: ESLint замечает подозрительные конструкции, форматтер приводит код к единому виду, а анализаторы качества показывают нарушения правил. Но в большом приложении остаётся вопрос уровнем выше: какие части системы стали центрами чрезмерной связанности и где поддержка начнёт дорожать.

Arcovia читает исходный код, разбирает его синтаксическое дерево и собирает модель проекта. Затем она строит граф импортов, применяет набор правил и формирует отчёт. В нём есть общая оценка состояния архитектуры, распределение баллов по категориям и объяснение факторов, которые повлияли на результат.

Среди обнаруживаемых признаков автор называет слишком крупные модули и компоненты, чрезмерную вложенность JSX, дублирующиеся импорты, неиспользуемые экспорты, модули без связей, а также узлы с необычно большим числом входящих или исходящих зависимостей. По отдельности такие сигналы не всегда означают ошибку; ценность отчёта — в их связке и приоритизации.

Почему это важно

Архитектурные проблемы редко возникают одним большим изменением. Чаще компонент постепенно берёт на себя новые обязанности, общий модуль становится точкой притяжения импортов, а обходной путь закрепляется в нескольких местах. Когда это становится заметно при обзоре кода, исправление уже может затрагивать значительную часть приложения.

Сводная оценка полезна только вместе с объяснением. Команде недостаточно услышать, что проект получил 62 балла: ей нужно увидеть, какие правила сработали, какие файлы внесли наибольший вклад и почему именно эти связи важнее других. Arcovia пытается сделать такой разговор предметным, а не заменить архитектурное решение числом.

Детерминированный подход здесь принципиален. Один и тот же снимок проекта должен давать один и тот же результат, чтобы отчёты можно было сравнивать между ветками и релизами. Языковая модель может позже помочь объяснить находки или предложить варианты перестройки, но не должна быть единственным источником оценки.

На практике

Инструмент можно запустить в корне проекта командой npx arcovia analyze .. Перед тем как включать отчёт в постоянный процесс, стоит проверить его на знакомом коде и договориться, какие сигналы действительно важны именно вашей команде.

  1. Начните с графа зависимостей: найдите модули, через которые проходит слишком много связей, и проверьте, не смешались ли в них разные обязанности.
  2. Сопоставьте крупные компоненты с историей изменений. Если файл часто меняют по несвязанным причинам, это хороший кандидат на разделение.
  3. Не превращайте оценку в запрет на релиз. Используйте её как исходную точку для обзора и как способ увидеть изменение структуры после большой задачи.
  4. Сохраняйте отчёты для ключевых веток. Тогда ухудшение или улучшение будет видно не по впечатлению, а по конкретным зависимостям и правилам.

Планы Arcovia включают запуск в GitHub Actions, историю отчётов, расширение для VS Code, сравнение проектов и панели для команд. Эти возможности ещё не заменяют проверку инструмента на настоящем репозитории: правила и их вес неизбежно требуют настройки под конкретный продукт.

Итог

Arcovia интересна не обещанием «исправить архитектуру с помощью ИИ», а разделением ролей. Код и зависимости анализируются по понятным правилам, а интеллектуальные помощники могут сделать выводы отчёта понятнее и ускорить обсуждение вариантов.

Для React и Next.js-проектов это может стать дополнительным слоем между линтером и архитектурным обзором. Если оценка остаётся объяснимой, её удобно использовать как повод вовремя заметить накопившуюся связанность, а не как автоматический приговор коду.