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

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

IT知识分享网

demo2：

IT知识分享网{
    "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过来）各个我知道的设计架构及详设的图，哈哈哈。–2020年10月

说明：如下是2022年10月27日补充的关于低代码其他资料链接，根据需要自行选择查看

全栈平台

• 阿里-云凤蝶
  • 蚂蚁杨周璇：我做前端这十多年来的感悟
  • 云凤蝶可视化搭建的推导与实现
  • 云凤蝶中台研发提效实践
  • 中台建站的智能化探索
  • 云凤蝶如何打造媲美 sketch 的自由画布
  • 云凤蝶自由画布之道：分层模型
• 阿里-金蝉
  • 长夜未央——企业级研发提效的下一阶段
  • 十倍效能提升——Web 基础研发体系的建立
  • 前端服务化——页面搭建工具的死与生
• 阿里-宜搭
• 阿里-通用低代码基础设施
  • 低代码引擎搭建协议规范 | 低代码引擎物料协议规范 | 低代码引擎资产包协 议规范
  • 阿里开源的低代码引擎 | 官网
  • 阿里低代码引擎和生态建设实战及思考
• 阿里-天马
  • 如何设计阿里经济体都在用的搭建服务—天马
• 腾讯-积木
  • 积木系统v2@江源.pptx
  • 积木系统，将运营系统做到极致
• 腾讯-lowcode
  • 腾讯云开发低码平台
• 葡萄城-活字格
  • 活字格企业级低代码开发平台
  • 活字格产品经理胡耀：看活字格低代码平台是如何诞生的
  • 驳“低代码开发取代程序员”论 为什么专业开发者也需要低代码？
• 无远开发平台
  • 案例
  • 为什么专业开发者都选择无远
• 奥哲
  • 氚云
• ivx
  • 关于iVX平台实现的总体技术栈【低代码/无代码、可视化开发语言】
  • iVX是怎么开发出来的？0代码开发的理论基础是什么？
  • iVX和其他低代码的开发平台区别究竟在哪里
  • ih5
• 闪电数据管理
  • 闪电数据管理 —— 无代码数据管理(开发)系统
  • lightning —— 基于Django的无代码Admin及低代码开发框架
• 巴克云
• 数式科技
• 明道云 支持公共云和私有部署，私有部署在Github可获得免费社区版下载
• 轻流
• 速融云
• 简道云
• 启业云
• 双链DaaS
  • 直接通过Github Actions体验
  • 大型系统构建案例-1.5K Stars
  • 包含实时预效果的KSML操练场-开发中
• 炎黄盈动
• 广州天翎myApps
• 起步科技
• 金蝶云-苍穹
• 普元
• OpsMind
  • OpsMind 前端低代码开发平台–MPlatform
• xdeer
• 湘北智造
• 表单大师
• Zion/载航
• Appsmith（Github）
• 白码
• 捷码
  • 支持业务系统/管理系统、可视化大屏、3D园区低码快速开发
  • 支持离线部署
• 明源云-天际开放平台
  • 移动平台
  • 建模平台
• 织信低代码平台
  • 平台简介
  • 生产领域实践案例&君乐宝
  • 织信Informat携手低码星球探讨「企业数字化转型之路」
  • 如何通过织信Informat快速搭建流程审批系统？
  • 5K字深度讲解：如何用织信Informat搭建OA和进销存？
• crudapi-增删改查接口平台
  • 无需编程，通过配置零代码生成crud增删改查RESTful API和UI
  • 前端（开源）：Vue + Quasar实现Web管理UI，可任意修改。
  • 后端（商业使用永久免费，无任何功能限制）：Java + Jdbc实现Service，数据库支持MySQL、PostgreSQL、SQL Server和Oracle，支持二次开发和私有部署。
  • demo演示
• Gadmin企业级低代码开发平台
  • 平台简介
  • 平台演示
• 象传智慧
  • Yao
• 引迈信息
• 兰途科技
  • aPass软件工厂
• 矩阵低代码 : 支持私有化部署，支持离线部署，私有化部署版本可跟随主版本免费升级
  • 平台演示 : 账户：15000000000 密码： 123456
  • 平台介绍
  • 系统文档
• 星云座插件式低代码
  • 插件方式融入现有的业务系统，贯通用户权限和业务数据，赋能业务系统具备低代码开发能力
  • 支持开发平台/项目私有化部署，开发平台与项目相互独立互补依赖
  • 产品介绍
  • 平台演示: 用户名：18888888888 密码：888888
  • 产品视频
• 瓦立应用
  • 支持可视化小程序搭建、
  • 支持各种业务系统开发（具有表单、工作流、报表设计等模块）
  • 系统文档

页面搭建

阿里的低代码引擎：

• lowcode-engine.cn/index
• github.com/alibaba/low…

仅包含前端部分的 low code 平台

• MAKA
• 易企秀
• 上线了
• 兔展
• 稿定设计
• 壹伴
• 创客贴
• 点石
• 腾讯-tmagic-editor
  • 开源的页面可视化搭建编辑器tmagic-editor
• 京东-通天塔
  • 京东商城活动页面构建系统——通天塔
• 阿里-imgcook
• 转转-魔方
  • 持续迭代的电商可视化运营页面生成系统
• 人人贷-活动运营平台
  • 活动运营自动化平台实践
• 美团-乐高
  • 美团外卖前端可视化界面组装平台 —— 乐高
• 百度-h5
  • 前端即服务-通向零成本开发之路
• 政采云-鲁班
  • 前端工程实践之可视化搭建系统（一）
• 携程-民宿CMS
  • 活动专题系统搭建过程中我的一些思考
• 携程-乐高
  • 干货 | 已配置4000+页面，携程前端组件化探索之“乐高”运营系统
• 知乎-Versatile Editor
  • 「可视化搭建系统」——从设计到架构，探索前端领域技术和业务价值
• 阿里-bi designer
• 360 – 即视
• h5.dooring.cn/
• quarkly.io/ No-code / Low-code platform for creating websites and web apps.
• 乐搭云
• 愚公
• 榫卯（sunmao-ui）

店铺装修

非独立页面，依附于业务系统存在的页面搭建

• shopify
• 有赞-微页面
• 淘宝店铺装修
• 阿里-飞冰
• 阿里-formilyjs
  • MegaLayout – 下一代Formily表单布局解决方案
  • github.com/alibaba/des…
• 阿里-gaea-editor
  • 可视化在线编辑器架构设计
• 阿里-sula
• 视搭-视频可视化搭建
• github.com/alibaba/low…
• blockVisualEditor
• pager
• 运满满-码良
  • 如何设计高扩展的在线网页制作平台
• X-Page-Editor
• Vue-Layout
• antd-visual-editor
• pipeline-editor
  • 【第1524期】页面可视化搭建工具技术要点
• panel-magic
  • 基于 Angular 的小程序可视化编辑器 Panel-Magic 的实现解析
• 百度外卖-blocks
  • 百度外卖如何做到前端开发配置化
• Esview
• gen
• bee gen pro
• 百度-amis
  • Ovine：基于 amis 补全了路由、权限相关的组件
  • 爱速搭
• 唯品会-ams
• vue-admin
• 鲁班 H5
• 华炎魔方
  • 低代码 DevOps 平台协议
• h5-factory
  • 一个简单易用的电商活动页面生成系统
• vision
• brick-design
• 随心秀
• yh5
• rxeditor
• activity-YD
• layoutit
• Ramiko
  • 使用 React 构建页面可视化搭建工具
• jeecg-boot
• sparrow-js
  • 实时输出前端代码，折腾大半年的开源项目 sparrow-js
• Tefact: Tefact 轻量级无代码/低代码，H5、表单编辑器
• 星搭: 星搭无代码平台，快速构建中后台、小程序
• 好未来晓黑板go-zero微服务框架: 你不需要懂微服务，懂业务就行
• cube：快速搭建中后台页面
• react-visual-design: 基于react的h5组件搭建
• Web Designer
• h5maker
• pl-drag-template
• form-generator：Element UI表单设计及代码生成器
• form-render：通过 JSON Schema 生成标准 Form，基于React
• Vue Json Design
• rebuild
• W5 SOAR
• Moria – Lowcode development platform
• nocobase
• Mall-Cook
• 全象低代码平台渲染引擎 Artery Renderer
• github.com/bojue/Web-E…
• OpenDataV – 基于Vue3的拖拽式、低代码数据可视化平台

• github.com/blocks/bloc…
• github.com/frappe/frap…
• github.com/ipselon/str…
• github.com/vigetlabs/c…
• github.com/BuilderIO/b…
• github.com/vuegg/vuegg
• webcodesk.com/
• github.com/odoo/odoo
• github.com/imgcook/imo…

办公/管理系统 a.k.a no-code

• 黑帕云
• 极星协作
• 维格表
• 阿里云-Teambition
• 阿里云-RPA
• SeaTable
• 蒲公英-Tracup
• 蒲公英-Seed
• 伙伴云
• monday.com
• Airtable
• Notion
• welovenocode.com/nocodelist
• Taskade

声明式编程

• “Probabilistic scripts for automating common-sense tasks” by Alexander Lew

行业综述

• Forrester《The State Of Low-Code Platforms In China》（中国低代码平台发展报告）
• 精读《对低代码搭建的理解》
• 页面可视化搭建工具前生今世
• React.js 可视化编辑工具
• 对低代码、零代码产品的一些看法
• 对 aPaaS 的产品认知
• 无代码编程
• 万物代码化：从低代码、云开发到云研发的思考
• 《早早聊搞搭建》搞过搭建的我收获了什么？
• 工程化之低代码体系
• LowCode平台前端实战之京东投放素材中心

技术点

• 可逆计算
  • 可逆计算：下一代软件构造理论
  • 从可逆计算看声明式编程
• 161.精读《可视化搭建思考 – 富文本搭建》
• 面向 Model 编程的前端架构设计
• 流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑
• 使用 React 写个简单的活动页面运营系统 – 设计篇
• 【电商】用可视化编辑，解构看起来非常炫酷的专题页面
• 如何搭建一个功能复杂的前端配置化框架(一)
• 可视化拖拽组件库一些技术要点原理分析
• 可视化拖拽组件库一些技术要点原理分析（二）
• 可视化拖拽组件库一些技术要点原理分析（三）
• 可视化拖拽组件库一些技术要点原理分析（四）
• 揭秘活字格最受程序员喜爱的三大功能背后的设计思路

国外

• www.honeycode.aws/
• developers.google.com/appmaker
• powerapps.microsoft.com/zh-cn/
• www.zoho.com/creator/
• www.salesforce.com/
• www.appian.com/
• bubble.io/
• www.adalo.com/
• thunkable.com/
• www.vvveb.com/vvvebjs/edi…
• www.forestadmin.com/
• mobirise.com/
• paperbits.io/
• builderx.io/
• grapesjs.com/
• reactstudio.com/
• www.wix.com/
• university.webflow.com/
• www.squarespace.com/
• www.framer.com/
• www.figma.com/
• linx.software/
• www.mendix.com/zh/
• www.outsystems.com/
• retool.com/
• www.quickbase.com/
• layoutit.com/
• www.claris.com/zh/filemake…
• marianoguerra.github.io/future-of-c…
• www.joget.com/
• help.appsheet.com/en/

5.可视化拖拽组件库一些技术要点原理分析

直接引入掘金其他用户的文章链接如下：

• 可视化拖拽组件库一些技术要点原理分析
• 可视化拖拽组件库一些技术要点原理分析（二）
• 可视化拖拽组件库一些技术要点原理分析（三）

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

参考资料

[1]

更多文档: https://juejin.im/user/1398234520230989/posts