loyep.com avatar loyep
  • techJune 20, 2024

    低代码引擎对比分析

    对比分析主流低代码引擎的功能特性、技术架构和实际应用场景,为技术选型提供参考

    low-codeenginescomparison技术选型

    低代码引擎对比分析

    本文对比分析了四个主流低代码引擎的功能特性、技术架构和实际应用场景,为低代码平台技术选型提供参考。

    评分标准

    分数区间:1-10 分

    • 6 分(及格线):功能可以满足基本要求,允许有一定瑕疵
    • 8 分(良好):易用性佳,功能完善,但需要二次开发
    • 10 分(优秀):开箱即用,无需任何改动

    基本要求定义

    模块能满足系统对其功能上的要求,允许有一定的瑕疵。

    瑕疵定义

    • 性能瑕疵:交互上偶尔出现卡顿或者资源加载缓慢的现象
    • UI 瑕疵:UI 布局有视觉上不美观,组件错位没对齐等现象

    评分参考

    • 8 分:易用,功能上不存在上述瑕疵,但需要在原有功能上二次开发
    • 10 分:开箱即用,无须任何改动(如可以包的形式引入项目直接使用)

    引擎对比

    基本信息对比

    引擎开发团队商业化产品技术栈协议类型
    tiny-engine华为云 Web 能力中心华为云 OpenTinyVue + ES6MIT License
    amis百度智能云爱速搭React + MobX + TypeScriptApache-2.0 License
    lowcode-engine阿里低代码引擎团队宜搭阿里云魔笔imgcookReact + MobX + TypeScriptMIT License
    tango网易云音乐网易云音乐内部搭建系统React + TypeScriptMIT 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-enginenew Function
    无 eval()
    ★★★★☆12 次8分
    amisnew Function
    无 eval()
    ★★★★☆2188 次9分
    lowcode-enginenew 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-engine7.67🥇⭐⭐⭐⭐
    tiny-engine7.6🥈⭐⭐⭐⭐⭐
    amis6.33🥉⭐⭐⭐
    tango3.04️⃣

    结论与建议

    核心发现

    基于以上详细对比分析,我们得出以下核心发现:

    1. 功能完整性:lowcode-engine 和 tiny-engine 在功能完整性方面领先,都支持完整的低代码开发流程
    2. 技术质量:所有引擎在安全性和代码质量方面表现良好,amis 在更新频率上表现突出
    3. 生态支持:lowcode-engine 拥有最丰富的生态系统,tiny-engine 在二次开发成本上有优势
    4. 社区活跃度:lowcode-engine 社区最为活跃,文档最为完善

    选型建议

    推荐:tiny-engine ⭐⭐⭐⭐⭐

    适用场景

    • 需要与现有 Vue 技术栈集成
    • 对二次开发成本敏感
    • 需要复用现有组件库和基础设施

    核心优势

    • 低二次开发成本:能复用现有 onix 组件,能集成 delight formily
    • 技术栈一致性:与公司 Vue 技术栈保持一致
    • 编辑渲染分离:架构设计合理
    • MIT 协议:商业友好

    备选:lowcode-engine ⭐⭐⭐⭐

    适用场景

    • 对可扩展性要求极高
    • 需要丰富的插件生态
    • 团队技术栈以 React 为主

    核心优势

    • 可扩展性最强:完整的插件机制和 API
    • 生态最丰富:支持多种组件库和工具
    • 文档最完善:学习成本相对较低
    • 社区活跃:问题解决效率高

    最终建议

    综合考虑技术匹配度、开发成本和维护成本,建议选择 tiny-engine

    1. 技术栈契合度高:与公司现有 Vue 技术栈完美匹配
    2. 开发成本低:可复用现有组件和基础设施,减少重复投入
    3. 维护成本低:团队学习成本小,技术债务少
    4. 功能满足需求:在编辑器 Topbar 扩展等核心需求上表现优秀

    注意:如果未来对插件生态和可扩展性有更高要求,可以考虑迁移到 lowcode-engine,两者的低代码协议基本一致,迁移成本相对可控。

    Last updated on