老赵写字的地方

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

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

nop-chaos(旧版,Vue3)

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(新版 Runtime)

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(新版应用框架)

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),三套前端可选:

项目 技术栈 定位 适合谁
nop-chaos Vue3 + AMIS 旧版前端,维护中 已有项目
chaos-flux React 19 + 自研 Schema 驱动运行时 平台团队
chaos-next React 19 + AMIS 企业应用框架 业务团队

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

进一步阅读

zh/nop/practical_guide/frontend/overview.txt · 最后更改: 由 127.0.0.1