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

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

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

1 页面可视化搭建 简介

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

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

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

差异点	编程开发页面	可视化搭建页面
技能要求	需要编程基础	可以没有编程基础
操作方式	在代码编辑器中编写代码	在可视化搭建工具中拖拉/填表/编写代码

2 业界调研（20+）

项目名称	项目简介	能解决什么
百度amis（开源）	前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端	不需要懂前端就能做出专业且复杂的后台界面，不受前端技术更新的影响，可以完全使用可视化页面编辑器来制作页面
政采云-鲁班（未开源）	鲁班是一个基于业务组件快速生成页面的搭建系统（站点、页面、组件、数据、权限） ，JSON Schema将业务转成数据→将数据转为定义→将定义规范成结构	提升用户体验：页面采用静态化方案，渲染及访问速度更快；提高稳定性：采用 Nginx 直接转发的方案，页面路由可用性保障及响应性能更具优势，同时支持更健壮的容灾方案，支持快速发版、回滚。；快速响应业务需求：通过组件化复用，能够快速响应业务需求、提高研发人效；更好的业务赋能：使得产品、运营等同学也能参与页面的搭建，提升业务迭代效率和数据可用性。；更好的系统化能力：基于搭建系统，便于横向和性能检测系统、稳定性保障系统、运维部署系统、线上监控系统进行打通，形成系统级合力、复利。
淘宝-imgcook（未开源）	由设计稿一键智能生成代码Skecher、ps、图片、原型图通过算法UI智能识别表达式转成DSL，再解析DSL为前端页面	还原设计稿；Skecher、ps、图片、原型图直接生成代码；精准还原；所见所得生；成代码可维护强；机器智能识别理解；DSL / Plugin可自定义
阿里-iceluna、Paas	配置生成搭建描述协议 - 标准规范 - Schema再生成页面及逻辑、低代码编辑器 - 开发生态	改变生产关系，提升生产力（赋能）- 中后台通用搭建产品--所有人；降低研发成本（提效）- 低代码开发平台--开发人员（工程创建、开发、调试、发布全链路）；孵化领域产品（搭建生态）- PaaS平台--开发人员（基础设施，基于标准搭建协议生产搭建物料，为各业务场景提供搭建服务的运行和开发环境）
阿里-云凤蝶（未开源）/pipeline （类似开源）	像做PPT一样去做web前；页面 Data 编辑	支持页面 Data 编辑, 面向运营、产品人员, 编辑自由度为无嵌套的组件.；目前制作运营、活动页面功能上最好的工具.；提供页面搭建的模板, 并支持自定义模板.；配置表单基于 Schema 生成, 配置表单操作功能完善.
阿里-飞冰（未开源）/vue-layout（类似开源）	Component Tree 编辑；针对中后台开发人员；针对组件化的页面, 主要实现 Component Tree 的可视化编辑. 其核心功能在于页面布局设计: 在 UI 组件列表中选择合适的组件, 通过拖拉的方式将组件嵌入到页面中, 生成带布局和样式的页面.	支持 Component Tree 编辑, 面向中后台开发人员, 编辑自由度为无嵌套的组件；使用"物料-区块", 非前端开发人员可以快速搭建出可用、符合规范的页面.；页面以源码方式输出.；前端服务化的一种方式.
淘宝-天马（未开源）	跨端页面搭建	跨终端搭建页面；面向标准数据研发schema.json；对模块的props入参描述；数据标准化；数据驱动展示；编写模块代码（解耦、模块既代码）；打包每个模块单独打包；从页面视角seed动态加载；跨终端的缓存方案（phone tm tb缓存副本、对应访问、代码标识）；服务端渲染SSR
淘宝-方舟	设计实现toC营销搭建	终端秒开；采用前端优化手段实现终端秒开
阿里妈妈-淘积木（未开源）	从基础组件搭建完整的营销页面的方案设计