页面可视化搭建工具业界的轮子
无论大公司还是小公司,我们开发前端工程时候,项目工程又很多类似的功能或者页面,开发经常是加班加点搬砖去做一些无成长反复操作的工作,看键盘上 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 生成, 配置表单操作功能完善. |