做过一些可视化搭建相关的工作,心得思考,和大家分享。
前端同学的工作内容中,常常有很多时间在写页面。组件化的出现,很大程度的提高了这方面的效率,也解决了标准化的问题。
但这还远远不够。
我们希望能通过 low-code 的方式,WYSIWYG(所见即所得) 的方式,将网页开发这件事变得更加简单,更加普及。试想,如果产品或运营能直接通过平台拖拖拽拽生成一个页面,这件事是不是很有价值?
很多大型项目都在尝试用组件化+可视化搭建的方式解决这个问题。但在这个过程中,我们总会遇到各种各样的阻碍。比如:用户端的产品总是很难找到共通点,运营类的业务面对的更是设计上无法复制的创意。商业端的产品还好说,对 UI 没有太多定制需求,另外也关注体验一致性。
因此商业端产品搭配一套 ant.design 就可以开始搞可视化搭建啦。但是用户端产品先要想清楚定位,如果是一个长线,大规模的业务,一开始定义好“组件化”的思路对后面的工作至关重要。如果是一个偏运营向的业务,也可以有2中解决思路:丰富的组件化+可视化搭建 vs 智能化生成代码(根据设计稿还原HTML)。
阿里内部有很多尝试,比较有代表性的开源项目(其实也有很多优秀的还未开源的):
分别代表了2种思路,一种是先定义好组件——可拖拽的物料,一种是没有预先设定,直接根据算法识别对应到最基础的 HTML 标签。各有各的优势和试用场景,对于一个长期发展,迭代的项目来说,前者更具有维护性。毕竟搭建物料(组件)的设计牢牢掌握在开发者的手中。
那么,接下来我们通过一系列文章,来动手搞一个可视化搭建平台。
首先先介绍一些概念:
- 核心功能:组件的定义和导入,拖拽,字段配置,数据绑定,事件交互。
- 操作流程:通过拖拽组件生成页面,对组件进行一些配置操作,然后导入数据源,进行字段绑定,添加自定义交互(代码),最终导出页面。
- 功能分区:物料区,搭建区,配置区,平台操作面板(可扩展)。
物料区
物料区组件的设计包含2部分:
- 组件的内部实现
- 组件可配置选项的描述(组件描述协议)
搭建区
- 布局方式
- 绝对定位
- 基于组件树的结构化布局方式(可维护性强)
- 渲染方式
- iframe:渲染结果和平台无关,iframe 与外层通信或者在 iframe 之上覆盖一个操作区
- 包裹法:在组件外层包裹一层 DOM,封装一些拖拽操作(平台与组件同语言则最佳)
配置区
- 设置器(setter)的实现(表单)
- 结果变更重新触发渲染
以上,我们采用结构化布局,包裹的渲染方式,加上一些设置器。就是一个特别简单的可视化搭建啦。下次,我来贴上代码实现哦。