低代码引擎对比分析
本文对比分析了四个主流低代码引擎的功能特性、技术架构和实际应用场景,为低代码平台技术选型提供参考。
评分标准
分数区间:1-10 分
- 6 分(及格线):功能可以满足基本要求,允许有一定瑕疵
- 8 分(良好):易用性佳,功能完善,但需要二次开发
- 10 分(优秀):开箱即用,无需任何改动
基本要求定义
模块能满足系统对其功能上的要求,允许有一定的瑕疵。
瑕疵定义
- 性能瑕疵:交互上偶尔出现卡顿或者资源加载缓慢的现象
- UI 瑕疵:UI 布局有视觉上不美观,组件错位没对齐等现象
评分参考
- 8 分:易用,功能上不存在上述瑕疵,但需要在原有功能上二次开发
- 10 分:开箱即用,无须任何改动(如可以包的形式引入项目直接使用)
引擎对比
基本信息对比
| 引擎 | 开发团队 | 商业化产品 | 技术栈 | 协议类型 |
|---|---|---|---|---|
| tiny-engine | 华为云 Web 能力中心 | 华为云 OpenTiny | Vue + ES6 | MIT License |
| amis | 百度智能云 | 爱速搭 | React + MobX + TypeScript | Apache-2.0 License |
| lowcode-engine | 阿里低代码引擎团队 | 宜搭、阿里云魔笔、imgcook | React + MobX + TypeScript | MIT License |
| tango | 网易云音乐 | 网易云音乐内部搭建系统 | React + TypeScript | MIT License |
核心功能对比
| 引擎 | 代码编辑 | 可扩展性 | 用户体验 | 评分 |
|---|---|---|---|---|
| tiny-engine | 内置 Monaco Editor 支持 JavaScript、CSS 插入 | 高低代码混合编程 支持出码 | UI 观感比较粗糙 拖放体验较为良好,无明显 bug | 8分 |
| amis | 支持 CSS 插入 支持事件 JavaScript 插入 | 低代码 only 不支持出码 | UI 界面完成度比较高 拖放体验不完善,有 bug | 6分 |
| lowcode-engine | 通过 plugin-code-editor 支持 支持 JS、CSS、Schema 编辑 | 支持插件机制 支持出码 | UI 界面完成度比较高 拖放体验良好 | 9分 |
| tango | 支持 CSS 支持 JavaScript 编辑 | 基于 AST 源码 & 低代码双向生成 (不适合业务搭建系统) | UI 界面非常简陋 拖放 bug 较多 | 5分 |
主要功能特性
tiny-engine
- ✅ 拖拽编辑、撤销重做、自定义布局
- ✅ 数据源、事件系统、大纲树
- ✅ Schema 预览、CSS 插入、JavaScript 编码
- ✅ ActionBar、出码、自定义渲染器、自定义设置器
- ✅ 插件拓展
- ❌ 快捷键
amis
- ✅ 拖拽编辑、快捷键、撤销重做
- ✅ 自定义布局、数据源、事件系统
- ✅ 大纲树、Schema 预览、CSS 插入
- ✅ JavaScript 编码、ActionBar
lowcode-engine
- ✅ 拖拽编辑、快捷键、撤销重做
- ✅ 自定义布局、数据源、事件系统
- ✅ 大纲树、Schema 预览、CSS 插入
- ✅ JavaScript 编码、ActionBar、出码
- ✅ 自定义渲染器、自定义设置器、插件拓展
tango
- ✅ 拖拽编辑、快捷键、数据源
- ✅ 事件系统、大纲树、CSS 插入
- ✅ JavaScript 编码、ActionBar、出码
- ✅ 自定义渲染器、自定义设置器
技术质量对比
| 引擎 | 安全性 | 代码质量 | 更新频率(年提交数) | 评分 |
|---|---|---|---|---|
| tiny-engine | new Function 无 eval() | ★★★★☆ | 12 次 | 8分 |
| amis | new Function 无 eval() | ★★★★☆ | 2188 次 | 9分 |
| lowcode-engine | new Function 无 eval() | ★★★★☆ | 316 次 | 8分 |
| tango | 基于 AST,产物为源码 无运行时函数、变量解析问题 | ★★★☆☆ | 80 次 | 6分 |
文档与社区支持
| 引擎 | 文档支持 | 社区活跃度 | 评分 |
|---|---|---|---|
| tiny-engine | 官方文档 | 中等 | 7分 |
| amis | 官方文档 | 高 | 8分 |
| lowcode-engine | 官方文档 文档非常详细 | 高 项目 fork、star、issues 讨论都处于较高水位 | 9分 |
| tango | 官方文档 文档简陋不全 | 低 | 2分 |
开发与部署成本
| 引擎 | 二次开发成本 | 迁移成本 | 评分 |
|---|---|---|---|
| tiny-engine | 低 能复用现有 onix 组件 能集成 delight formily 编辑渲染分离 | 低 | 9分 |
| amis | 高 和 Vue 组件库集成难度高 无法复用现有 onix 组件 无法集成 delight formily 编辑渲染耦合 | 高 | 4分 |
| lowcode-engine | 高 无法直接复用现有 onix 组件 无法集成 delight formily 编辑渲染分离 渲染 Vue 组件需要适配画布层 | 高 | 4分 |
| tango | 非常高(不考虑) 基于 AST 的搭建模式更适合研发向的搭建系统,不适合业务搭建系统 | 非常高 | 0分 |
| 低代码协议结构 | 和 lowcode-engine 基本一致 | ||
| 布局能力 | 支持多层嵌套布局 8分 | 支持多层嵌套布局 自带多种复杂布局组件 9分 | 支持多层嵌套布局 支持自由布局 9分 |
| 配套生态 | TinyVue 组件库 生态中心 插件 物料 工具栏 主题 7分 | amis组件库 6分 | Fusion 组件库 AntD组件库 插件生态 研发工具生态 Setter生态 9分 |
| 插件方案 | 组件即插件,可以对编辑器骨架上预定义好的位置插入自定义组件 6分 | 不支持插件拓展 支持React组件拓展 4分 | 完整的模型抽象、配套API及插件规范 8分 |
| 技术栈 | vue es6 7分 | react mobx typescript 6分 | react mobx typescript 5分 |
| 物料包方案 | 支持动态加载远程物料包 7分 | 没有物料包的概念,物料和编辑器深度集成 4分 | 支持动态加载远程物料包 支持本地物料包 7分 |
详细分析
综合评分对比
| 引擎 | 平均分 | 排名 | 推荐指数 |
|---|---|---|---|
| lowcode-engine | 7.67 | 🥇 | ⭐⭐⭐⭐ |
| tiny-engine | 7.6 | 🥈 | ⭐⭐⭐⭐⭐ |
| amis | 6.33 | 🥉 | ⭐⭐⭐ |
| tango | 3.0 | 4️⃣ | ⭐ |
结论与建议
核心发现
基于以上详细对比分析,我们得出以下核心发现:
- 功能完整性:lowcode-engine 和 tiny-engine 在功能完整性方面领先,都支持完整的低代码开发流程
- 技术质量:所有引擎在安全性和代码质量方面表现良好,amis 在更新频率上表现突出
- 生态支持:lowcode-engine 拥有最丰富的生态系统,tiny-engine 在二次开发成本上有优势
- 社区活跃度:lowcode-engine 社区最为活跃,文档最为完善
选型建议
推荐:tiny-engine ⭐⭐⭐⭐⭐
适用场景:
- 需要与现有 Vue 技术栈集成
- 对二次开发成本敏感
- 需要复用现有组件库和基础设施
核心优势:
- ✅ 低二次开发成本:能复用现有 onix 组件,能集成 delight formily
- ✅ 技术栈一致性:与公司 Vue 技术栈保持一致
- ✅ 编辑渲染分离:架构设计合理
- ✅ MIT 协议:商业友好
备选:lowcode-engine ⭐⭐⭐⭐
适用场景:
- 对可扩展性要求极高
- 需要丰富的插件生态
- 团队技术栈以 React 为主
核心优势:
- ✅ 可扩展性最强:完整的插件机制和 API
- ✅ 生态最丰富:支持多种组件库和工具
- ✅ 文档最完善:学习成本相对较低
- ✅ 社区活跃:问题解决效率高
最终建议
综合考虑技术匹配度、开发成本和维护成本,建议选择 tiny-engine:
- 技术栈契合度高:与公司现有 Vue 技术栈完美匹配
- 开发成本低:可复用现有组件和基础设施,减少重复投入
- 维护成本低:团队学习成本小,技术债务少
- 功能满足需求:在编辑器 Topbar 扩展等核心需求上表现优秀
注意:如果未来对插件生态和可扩展性有更高要求,可以考虑迁移到 lowcode-engine,两者的低代码协议基本一致,迁移成本相对可控。
Last updated on