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

无论大公司还是小公司，我们开发前端工程时候，项目工程又很多类似的功能或者页面，开发经常是加班加点搬砖去做一些无成长反复操作的工作，看键盘上 ctrle 键已经被磨掉了漆，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": []    }}

4. 说明

说明：业界调研中每个项目点击标题都可查看项目详情，markDown文档插入图片太麻烦了，于是小圆脸儿同学放弃了图片介绍，有需要了解的同学我后面再来补（copy过来）各个我知道的设计架构及详设的图，哈哈哈

更多前端文档请参考 小圆脸儿^[1]

参考资料