首页 / 文章 / Arcovia:一款用于React应用的基于规则的架构智能工具

Arcovia:一款用于React应用的基于规则的架构智能工具

了解一个黑客松项目如何运用确定性规则分析 React 和 Next.js 代码库,从而评估架构健康状况并揭示潜在的技术债务。

1169 词

启动这个项目的挑战

在最近的一次OpenAI Build Week黑客马拉松中,一个团队设定了一个简单的目标:打造出开发者真正愿意日常使用的工具。

第一个晚上结束时,方案已经明确。又过了两天,这个方案便发展成了一个名为Arcovia的可用开源项目。

这并非只是个一次性的AI演示,而是为了解决开发者在长期维护大型React代码库时经常遇到的问题。

现有工具的不足

已经有许多优秀的工具可用于保持代码整洁。

  • ESLint能识别有问题的代码模式。
  • Prettier负责代码格式化。
  • SonarQube能发现代码质量问题。
  • 基于AI的审查工具可提出行级优化建议。

然而,这些工具都无法回答更宏观的结构性问题,例如:

  • 整体架构是否良好?
  • 哪些模块正在变成瓶颈?
  • 技术债务堆积在何处?
  • 哪些文件最需要优先进行重构?
  • 究竟是什么导致了该项目当前的评分?

架构问题往往只有在代码审查讨论中才会显现,更糟糕的是,等到代码库已经难以维护时才被发现。此前缺乏一种在问题真正变成负担之前评估架构健康状况的方法。

认识 Arcovia

Arcovia 被描述为专为 React 和 Next.js 代码库设计的架构智能工具。

它不会向你展示一长串相互关联性不强的警告,而是会对项目进行整体评估,并生成交互式的 HTML 报告。

该报告包含以下内容:

  • 架构健康评分
  • 依赖关系图
  • 架构热点问题
  • 说明评分计算方式的详细分解
  • 基于规则的检测结果
  • 维护负担指标
  • 可操作的改进建议

Arcovia 并非要取代代码检查工具,其目的是让开发人员能够了解单个代码检查规则无法呈现的更宏观的架构状况。

内部机制

该工具在内部运行一个完全确定性的分析流程。

Project
   │
   ▼
Scanner
   │
   ▼
AST Parser
   │
   ▼
Project Model
   │
   ▼
Dependency Graph
   │
   ▼
Rule Engine
   │
   ▼
Score Engine
   │
   ▼
Interactive HTML Report

目前该分析器能够识别多种架构问题,其中包括:

  • 过度中心化的“核心模块”,导致应用程序过度依赖它们
  • 入度较高的组件或文件
  • 出度较高的组件或文件
  • 没有其他模块引用的孤立模块
  • 规模过大的组件
  • 深度的JSX嵌套结构
  • 体积过大的模块
  • 分散在多个文件中的重复导入
  • 代码库中遗留的未使用导出
  • Arcovia并未将这些问题单独列出,而是将它们汇总为一个易于理解的架构评分。

    规则优先,AI其次

    开发者们非常认同的一个决定是不在核心分析逻辑中使用AI。

    架构评分本身绝非由语言模型生成

    相反,Arcovia的工作流程为:

    • 通过抽象语法树解析代码库
    • 构建依赖关系图
    • 根据确定的架构规则处理分析结果
    • 按类别计算评分
  • 计算维护负担指标
  • 将所有这些数据整合为最终的架构评分
  • 由于采用了这种设计,结果具有稳定性且可重复生成。

    更宏观的目标是让人工智能提升使用体验,而非取代评分功能。计划中的应用包括:

    • 用通俗语言解释各项检测结果
    • 提出代码重构方案
    • 推荐相关的学习资源
    • 回答关于报告的后续问题

    确定性分析仍是唯一的真实数据来源,人工智能则作为解释层叠加在其之上。

    与GPT-5.6及Codex的合作

    这次黑客松也标志着团队首次在整个开发过程中真正将人工智能视为合作伙伴,而非仅仅将其视作功能更强的自动补全工具。

    在周末期间,GPT-5.6和Codex被用于:

    • 探讨哪些架构规则值得纳入
    • 优化评分模型对不同因素的权重分配
    • 实现各项功能特性
    • 完善报告的视觉设计
    • 简化复杂的逻辑结构
    • 对实现方案进行合理性检查

    ChatGPT Images也被用来设计Arcovia的品牌形象,包括其猫头鹰吉祥物、标志以及其他宣传材料。

    整个工作流程比预期更为顺畅。与其将整个功能从头到尾完全交给模型生成,不如通过快速的反复迭代来取得最佳效果,这就好比有另一名工程师在场协助讨论设计方案并权衡各种取舍。

    周末工作的收获

    将这次开发工作压缩在单个周末内完成,让我们获得了几项宝贵的经验。

    架构难以用简单指标衡量

    单独评估代码质量其实相当机械化。

    而评估架构则困难得多,因为它取决于具体情境、各种相互冲突的权衡因素,以及需要对众多不同规则进行精心调整后的权重设定。

    如何在真正有用的信号与大量虚假阳性结果之间找到恰当平衡,仍是一项持续进行的挑战。

    缺乏背景信息的分数毫无用处

    仅仅给出一个数字并不能让对方了解太多信息。

    开发人员需要看到:

    • 该分数为何会如此产生
    • 哪些因素影响最大
    • 哪些问题最为重要
    • 应优先解决什么问题

    这就是为何设计该报告时会着重解释评分机制,而非将其视为不可理解的输出结果。

    AI虽能提升效率,但并非如人们所预期的那样

    GPT-5.6与Codex确实加快了代码生成的速度。

    然而,生产力提升的最大贡献并非来自更快的代码生成速度。

    真正的优势在于将AI作为思考伙伴:共同探讨设计方案、质疑既有假设,并快速测试各种创意。

    未来展望

    此次发布仅是起点。

    未来版本正在考虑的功能包括:

    • 与GitHub Action的集成
    • 报告历史记录功能
    • 长期架构趋势分析
    • VS Code扩展程序
    • 项目并排对比功能
    • 团队级控制面板
    • AI驱动的架构优化建议

    长期目标在于帮助工程团队持续监控、评估并逐步改进其软件的架构。

    欢迎反馈

    Arcovia是完全开源的,那些正在开发React或Next.js应用程序的开发者所提供的反馈将尤为宝贵。

    有一些值得探讨的问题:

    • 架构评分是否真的能够反映有意义的信息?
    • 还有哪些架构问题需要被识别出来?
    • 要使这类报告在您的日常工作中真正发挥作用,需要具备哪些条件?

    该项目的源代码存储在 github.com/gkhan205/arcovia 这个仓库中,该包可直接从 npmjs.com/package/arcovia 安装,完整文档则托管在 arcovia.ghazikhan.in 上。

    我们真诚欢迎各种想法、反馈,甚至是反对意见,因为实际使用是让 Arcovia 日渐完善的最佳方式。

    相关阅读

  • 面向高级应用架构的20种Next.js 16进阶模式 — 梳理了服务器优先设计、缓存、流式传输、PPR、并行路由与拦截路由等用于构建可扩展的Next.js 16应用程序的各种模式。