Nop 的三个前端项目：关系与演化

Nop 平台目前有三个前端仓库，它们代表了不同的设计阶段和定位。本文理清三者的关系。

nop-chaos 是最早的前端项目，基于 Vue3 + ant-design-vue + 百度 AMIS + logicflow + xspreadsheet。

特点：

• 与后端 nop-entropy 配套使用
• 页面由后端生成的 AMIS JSON 驱动
• 构建产物被打包为 Java jar 模块（nop-web-site、nop-web-amis-editor）
• 开发时不需要单独编译前端

这个项目目前处于维护状态。新功能开发主要在 chaos-flux 和 chaos-next 上进行。

nop-chaos-flux 是用 TypeScript/React 从零构建的前端运行时，核心是七个原语（Template、ScopeRef、Value、Resource、Reaction、Capability、Host Projection）。

与 chaos 的关键区别：

• 不依赖 AMIS，有自己的渲染引擎
• JSON Schema 驱动，支持编译期优化
• 内建 Flow Designer、Report Designer、电子表格、文字编辑器
• MIT 许可证

定位：“从 JSON 生成 UI”的底层基础设施。适合平台团队构建低代码工具。

nop-chaos-next 是 TypeScript/React 的应用框架，基于 AMIS 渲染，提供企业应用脚手架。

核心能力：

• Extension 系统 — 品牌、主题、菜单、语言、页面的统一配置
• Plugin 系统 — 基于 SystemJS 的远程插件加载和隔离
• 内置页面模板：Dashboard、AI Workbench、Flow Editor、主子表 CRUD
• 多租户、多主题、国际化

定位：“如何构建可扩展的业务应用”的应用框架。适合业务团队快速开发企业级后台。

nop-chaos（Vue3 + AMIS，旧版）
    │
    ├─→ 演进方向
    │
    └─→ nop-chaos-flux（React，自研渲染引擎）
           └─→ 提供 UI 组件库、主题 token
                   │
                   ↓
           nop-chaos-next（React + AMIS，应用框架）
                   │
                   ├─→ 同步 flux 的 ui/tailwind/theme 包
                   └─→ 后续可引入 flux 作为可选渲染层

一套后端（nop-entropy），三套前端可选：

三个前端项目共享同样的后端 API 和 Delta 定制机制，选择哪个取决于你的技术栈偏好和项目需求。

• Chaos Flux 运行时详解
• Chaos Next 应用框架
• 前端架构概述