页面可视化搭建工具业界的轮子

无论大公司还是小公司，我们开发前端工程时候，项目工程又很多类似的功能或者页面，开发经常是加班加点搬砖去做一些无成长反复操作的工作，看键盘上 Ctrl 键已经被磨掉了漆，C 和 V 也马上磨白了，那对于开发如何把这些重复的工作用机器去解决？在前端资源紧缺的情况下，是否可直接有工具直接就可以搭建出我想要的前端页面？于是业界的页面可视化搭建工具就出现了，本文会介绍目前最流行的页面可视化搭建工具，也会提供一些业界开源的可视化搭建项目供大家参考（Copy）。

1 页面可视化搭建 简介

编程开发页面：动态逻辑页面分解为 HTML Tree, Data 和 Dynamic Logic. 前端开发工程师开发前端页面的过程, 本质上是用编程工具(IDE)对页面的 HTML Tree, Data 和 Dynamic Logic 进行增删和修改.

页面可视化搭建：是用可视化交互的方式对页面的 HTML Tree, Data 和 Dynamic Logic 进行增删和修改, 从而实现页面的生成. 页面可视化搭建工具是实现页面可视化编辑的软件工具

目的：任何工具的存在都是更高效地解决问题. 页面可视化搭建工具, 用于解决页面生成的效率问题. 可能前端工程师会觉得最有效率的页面生成方式是打代码, 但有搭建页面需求的不只是前端工程师. 而可视化页面搭建工具, 恰恰是面向"就缺一个前端工程师"的人员, 用于提升他们生成页面的效率.

2 业界调研（20+）3 业界调研要点总结

基于对以上页面可视化搭建工具调研，业界有很多看法，拿出两个比较有代表性的文章供大家参考：

• 基于现代的前端框架，为什么没有成熟的支持控件拖拽布局，并可以自动生成前端代码的设计器出现？
• 前端服务化——页面搭建工具的死与生

以上调研了那么多业界比较牛的前端可视化的框架工程，大致思路是类似的，百家争鸣，尽管阿里的飞冰云凤蝶很完善了但还是存在以下两点问题：

• 无法自动生成交互逻辑
• 只能在受限、具体的业务场景下发挥作用

这两个问题存在就会导致我们生产设计出来的东西需要low code，如果是low code开发人员不愿意用，因为生成的代码不易维护且臃肿；如果给非开发人员用，他们又不会写代码，一点代码都不想写，所以他们也不愿意用；

而我们站在巨人的肩膀上，能否把上面两个问题解决呢？目前我没有什么好的办法，但是我们可以先去把他们实现思路研究明白，才有可能去处上面的最难以解决的问题。

3.1 业界的工具总结要点3.2 DSL方式

JSON Schem数据结构特点：

• 扁平化
• 树状化

demo1：

{
  "type": "object",
  "properties": {
    "$attr": {
      "type": "object",
      "properties": {
        "hidden": {
          "type": "boolean"
        }
      }
    },
    "$theme": {
      "type": "object",
      "properties": {
        "themeColor": {
          "type": "string"
        }
      }
    },
    "items": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          “itemId”: {
            "type": "string"
          }
        }
      }
    }
  }
}
复制代码

demo2：

{
    "type": "page",
    "body": {
        "title": "",
        "type": "form",
        "autoFocus": false,
        "api": "https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=1",
        "mode": "horizontal",
        "controls": [
            {
                "type": "fieldSet",
                "title": "基本配置",
                "controls": [
                    {
                        "name": "a",
                        "type": "text",
                        "label": "文本1"
                    },
                    {
                        "name": "a",
                        "type": "text",
                        "label": "文本2"
                    }
                ]
            },
            {
                "type": "fieldSet",
                "title": "其他配置",
                "collapsable": true,
                "collapsed": true,
                "controls": [
                    {
                        "name": "c",
                        "type": "text",
                        "label": "文本3"
                    },
                    {
                        "name": "d",
                        "type": "text",
                        "label": "文本4"
                    }
                ]
            }
        ],
        "submitText": null,
        "actions": []
    }
}