低代码前端框架研究

低代码前端框架是指那些通过图形化界面和简化的代码编写方式，使得开发者能够快速构建应用程序的工具。这些框架通常提供拖放功能、预制组件和可视化设计工具，使得非专业开发者也能参与开发。它们的优势包括显著缩短开发周期、降低开发成本、提高协作效率以及允许快速迭代和部署。

（1）百度amis

Amis 是百度开源的一款前端低代码框架，基于React语言开发，通过 JSON 配置就能生成各种后台页面，包括数据获取、表单提交及验证等功能，同时，Amis是一个开源的JavaScript库，它提供了一套完整的API和组件，用于构建富交互式的Web应用程序。它具有简单易用、高效灵活、易于扩展和维护等特点。同时，Amis还提供了丰富的主题和样式定制选项，以及支持各种常见的Web应用程序功能和插件。Amis是完全基于后端http接口的前端低代码框架，符合标准的前后端分离开发模式。

amis 的工作原理是将编写好的 json 数据转化成对应的 react 组件，先通过 json 的 type 属性去找到 component，然后把其他属性作为组件的 props 传递过去，最终完成渲染。

官方地址：https://github.com/baidu/amis ，https://gitee.com/baidu/amis.git

amis 提供可视化编辑工具，通过点击拖拽的方式，生成自定义页面，复制对应的 json 数据到项目文件中，即可完成页面开发功能。能本地运行，共有114个组件。

{
  "type": "page",
  "body": {
    "type": "crud",
    "api": "/amis/api/mock2/sample",
    - [x] "syncLocation": false,
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "engine",
        "label": "Rendering engine"
      },
      {
        "name": "browser",
        "label": "Browser"
      },
      {
        "type": "operation",
        "label": "操作",
        "buttons": [
          {
            "label": "详情",
            "type": "button",
            "level": "link",
            "actionType": "dialog",
            "dialog": {
              "title": "查看详情",
              "body": {
                "type": "form",
                "body": [
                  {
                    "type": "input-text",
                    "name": "engine",
                    "label": "Engine"
                  },
                  {
                    "type": "input-text",
                    "name": "browser",
                    "label": "Browser"
                  }
                ]
              }
            }
          },
          {
            "label": "删除",
            "type": "button",
            "level": "link",
            "className": "text-danger",
            "disabledOn": "this.grade === 'A'"
          }
        ]
      }
    ]
  }
}

（2）华为TinyEngine

TinyEngine 低代码引擎是华为公司开发发布的一款开源低代码框架（Vue），TinyEngine 提供了低代码底层能力，并集成了人工智能，从而使用户能够高效开发。TinyEngine 具有强大的拖拽功能，无论是图元还是复杂组件，都能在画布上带来流畅的体验。它适用于多场景的低代码平台开发，包括资源编排、流程编排、服务端渲染、模型驱动、移动端、大屏端以及页面编排等低代码平台。

TinyEngine 提供了一套完善的插件体系，涵盖了插件开发所需的基础 UI 库、工具库、插件面板的显示控制、生命周期管理、公共 API 注册与共享等。这一体系使得开发者只需遵循简单的规范，即可快速开发出业务所需的插件，从而极大地提高了开发效率和灵活性。通过使用 TinyEngine 提供的插件体系，开发者可以更加轻松地管理和维护复杂的插件生态系统，同时降低维护成本。

官方地址：https://opentiny.design/tiny-engine

其画布通过iframe渲染组件。能本地运行。导出的是Vue应用。有51个组件。

（3）阿里Low-Code Engine

Low-Code Engine由阿里巴巴钉钉宜搭团队开源的低代码框架，开发语言是React 。Low-Code Engine是一款为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架。它通常包含一个用于生产软件的可视化编辑器，中间包含了一些用于组装的物料，可以通过编排、组合和配置它们以生成丰富的功能或表现。

Low-Code Engine可以描述源码物料规范和搭建物料规范，描述低代码搭建平台产物的Schema结构，还有低代码引擎资产包协议规范和描述低代码平台资产包结构。它精心打造了编排模块，让拖拽、配置能力集成变得更简单，还有入料模块，让组件在低代码平台使用更容易。它还支持运行时渲染，快速提供协议的渲染能力，出码能力则可以提升低代码的扩展性和性能。lowcode-engine的商业版本UIPaaS。

导出的是react应用。有84个组件。

官方地址：https://github.com/alibaba/lowcode-demo

编排原理：https://lowcode-engine.cn/site/docs/guide/design/editor

设计器和渲染器其实处在不同的 Frame 下，渲染器以单独的 iframe 嵌入。这样做的好处，一是为了给渲染器一个更纯净的运行环境，更贴近生产环境，二是扩展性考虑，让用户基于接口约束自定义自己的渲染器。

（4）PagePlug（Appsmith）

PagePlug 是 Appsmith 的中国化项目，是一个开源的、声明式的、可视化的前端低代码框架(React)，可以用来制作 web 应用、微信小程序。

虽然PagePlug与其他无代码、低代码平台一样都是为了让人们更轻松地创建应用程序和自动化流程，但其支持API和数据管理功能的强大和灵活性更高，无需侵入客户架构，直接连接数据源（API、DB），任何的后端数据都变成了 JS 变量，可以随意转换、并配置到任意的视图组件。因此对于需要更高度定制和更广泛的操作的用户，PagePlug可能是更好的选择。

PagePlug支持任意一处使用JavaScript编写自定义代码，目前也支持添加第三方JS库，可以方便地自定义组件和控制逻辑，从而更好地实现个性化需求。

UI组件只有47个。

项目地址：https://gitee.com/cloudtogo/pageplug

1、WidgetRegistry定义了ALL_WIDGETS_AND_CONFIG: [T extends BaseWidget, WidgetConfiguration][]和registerWidgets()注册所有的widget组件；
2、WidgetRegisterHelpers.registerWidget(BaseWidget, WidgetConfiguration)根据传入的参数注册对应的Widget，并配置Widget（如是否显示在widget列表-hideCard，组件的默认数据配置-defaults等），最终的Widget信息都在WidgetFactory中；
3、通过调用WidgetFactory.createWidget(widgetData，COMPONENT_PANE|CANVAS|PAGE|CANVAS_SELECTED):ReactNode来显示Widget组件，过程中通过调用BaseWidget.getWidgetView()来返回ReactNode；
4、一个Widget设计基本包含以下内容：

• index.ts: 该文件包含组件的配置。
• constants.tsx: 该文件包含将组件及其组件中使用的常量。
• icon.svg: 这是代表组件的图标的 SVG 文件。
• widget/index.tsx: 这包含组件代码，它利用组件开发 API 并让PagePlug平台知道如何呈现组件。
• component/index.tsx: 这包含在主画布上呈现的核心组件。

class RadioButtonWidgetWidget extends BaseWidget<RadioButtonWidgetWidgetProps, WidgetState> {
  /** PropertyPaneControlConfig定义属性控件的配置 */
  static getPropertyPaneContentConfig() {
    return [];
  }
  /** PropertyPaneStyleConfig定义样式控件的配置 */
  static getPropertyPaneStyleConfig() {
    return [];
  }
  /** （可选，派生属性）：返回可以从其他属性派生的属性映射 */
  static getDerivedPropertiesMap(): DerivedPropertiesMap {
    return {};
  }
  /** （可选，对象）：返回默认情况下采用默认属性值的属性列表 */
  static getDefaultPropertiesMap(): Record<string, string> {
    return {};
  }
  /** （可选，对象）：返回将被视为和存储为元属性的属性 */
  static getMetaPropertiesMap(): Record<string, any> {
    return {};
  }
  /** React.render 的加强版。这应该返回需要在画布上呈现的 React 组件 */
  getPageView() {
    return <RadioButtonWidgetComponent />;
  }
  /** （必需，字符串）：返回小部件的唯一类型 */
  static getWidgetType(): string {
    return "RADIOBUTTONWIDGET_WIDGET";
  }
}

export default RadioButtonWidgetWidget;

5、Canvas画布用于呈现组件，可配置Widget组件根据摆放位置进行显示。

总结

框架	底层框架	UI组件数	画布通信原理
Amis	React	114	在同一个Document中
TinyEngine	Vue	51	iframe
Low-Code Engine	React	84	iframe
PagePlug	React	47	在同一个Document中