【🧪 前端实验室】2020 前端可视化搭建小报告 - 01 - 背景调研

本次小报告由于篇幅的考虑，分红了三块：01 背景调研 - 02 链路、架构和难点 - 03 业内成果陈列，此篇是第一部分，会从四个维度（What、Who、Why、How）来介绍前端可视化搭建。

👨🏽‍💻 笔者两三句： 我本人是由于最近有一个契机，想在可视化搭建这块深挖一下，作一份小报告。虽然我本身业务里没有作过这样的事，但不妨碍我站在一个研究者的角度，为你们整理一些资料。

这份报告先后大概总共花了两三天的时间，看完这三篇小报告，虽然不会让你立马能完成一个可视化搭建系统，但至少能让你能领略一下可视化搭建的进展和面貌。

可视化搭建涵盖的内容是很是多的，越是深刻越能发现每个细点都是一个至关的复杂的研究命题，笔者本身也在不断地完善这份小研究。

0. 一些前置的知识

常见的可复用代码片断的粒度

从可复用代码片断的颗粒度来看，咱们一般接触到的概念以下：

基础组件、业务组件（区块\微件）、模板（页面主体）

• 基础组件，如各大组件库所完成的细粒度组件，Button \ Input \ Form等。
• 业务组件，针对不一样项目的业务场景，有一些场景可复用但不足以泛用的颗粒度较大的组件，咱们将其封装为业务组件。
• 模板，颗粒度最大的组件，如活动页、表单页面模板、后台管理页模板、数据可视化模板，这些都是通过大量业务实践，证明可复用的页面主体架构

飞冰给出了一张更详细的关于粒度的参考图，其中的业务组件也能够称为 widgets和基础组件（components）相区分：

前二者咱们能够经过组件库和业务微件库，造成通用的代码片断仓库，而模板咱们也能够借由 GUI（图形用户界面，也可称为可视化管理平台），管理咱们在业务中遇到的经常使用模板。

模板搭建平台中，Ant Design Landing 应该是比较典型且有知名度的解决方案。

它是一个面向产品首页的快速搭建解决方案，包含了丰富的模板和模板里对应的模块，同时提供了一个在线的编辑器。

这里还有一张我的以为很不错的由政采云团队完成的模板可视化管理平台的截图，以下

1. What 可视化搭建是什么？

可视化搭建 是指在图形界面上，经过一系列的编辑操做，在极短期内便能完成一个复杂的页面并发布上线。

可视化搭建 是一个工具，是一个脚手架，也是一个业务加速器和创意制做平台。

可视化搭建 是高效利用组件的前端上层建筑，做为一个庞大的可视化前端应用, 它创建在大量的前端基建（如代码规范、脚手架、组件库、框架等）之上。

下图描述了可视化搭建在技术开发层面的具体位置，也能够做为可视化搭建的架构示例。

2. Who 可视化搭建面向谁？

面向谁是一个很关键的问题：

• 若是面向的是营销页面或者产品主页的搭建，使用者一般是非开发者，总体的可视化解决方案就会更偏近 no-code，也就是咱们所说的的零代码。
• 若是面向的是中后台页面搭建，使用者是开发者，总体的可视化解决方案就会更偏近 low-code，也就是低代码。

虽然最终的目标是实现全部页面的零代码化，可是对于技术逻辑和业务逻辑比较复杂的场景，仍是须要作一些定制的。

3. Why 为何作可视化搭建？

随公司业务不断发展，营销活动、广告、页面改版等需求日益倍增，靠纯人工撸代码已经没法跟上需求增加速度。加班？招人？显得不够明智，也不够前端，提效也就成为了关键。如何提效？从何入手？那不得不提的就是前端提效神器 —— 可视化搭建系统。

当组织团队达到必定的开发规模时，页面可视化搭建是一个减小冗复开发、释放生产力的最有效方案。

低代码能让不懂代码的业务人员成为所谓的平民开发者（Citizen Developer），弥补日益扩大的专业人才缺口，同时促成业务与技术深度协做的终极敏捷形态（BizDevOps）

对于传统开发者而言，在实际的业务开发过程当中，既要关注业务复杂度，又要关注技术复杂度，而低代码平台（可视化搭建）就是为了尽量地屏蔽掉技术细节，转移出大部分的技术复杂度，从而减轻业务线开发的负担。

总结一下前端可视化搭建要实现的目标：

1. 实现业务快速交付
2. 下降业务开发成本

而对于前端可视化搭建的愿景，初步的理解能够以下：

调动全部非前端开发人力，释放前端开发的工做量，让人人都能参与到页面的搭建中，提高项目的交付效率。

固然可视化搭建的将来远不止于此，好比Serverless、DevOps 全链路的打通、结合 AI 的应用等。

除此以外，还有一些针对用户的“为何”的问题须要讨论：若是开发或者非开发不想用低代码平台，是会由于什么？

1. 低代码平台的能力受限

   按照目前的低代码平台产品来看，你们的应用场景和成熟度大不相同，具体的价值仍是得结合业务场景和使用频次来考量这件事情。若是只是应用模板完成业务的低代码平台，它自己就不须要特别复杂的能力，能快速产出可上线的宣传页面就行。若是是涉及大量业务逻辑的中后端平台，低代码也能帮助咱们减小许多重复的工做，让开发者专一于业务逻辑。

2. 低代码平台就像是一个玩具，我不了解它的内部逻辑，也没有办法相信它产出的质量

   浏览器刚出来的时候，你们也不会说主动了解它的内核运行机制，因此关键仍是，能不能用起来、用得爽、用得放心，这须要咱们持续地创建数据收集和分析。除此以外，关于安全合规以及漏洞风险的考虑，也是在低代码平台开发过程当中须要考虑的，咱们能够多让你们用起来，调动用户帮助咱们寻找其中的漏洞，并创建安全机制，防止有人恶意攻击。

3. 低代码平台维护起来方便吗？

   成熟的低代码平台能提供规范的接口、完整的构建发布链、质量保障体系以及简便明了的操做，若是连产品经理都能随时维护，做为一个开发者还有什么须要担忧的。

4. How 怎么作可视化搭建？

基础思路: 先调用一个模板做为基础骨架，而后经过控制组件的属性，经过少许的代码调整，使得大体的页面效果可以与业务高保真图保持一致，最后接入数据接口，进入构建、测试和发布流程。

阿里云原生技术团队列出了低代码平台须要实现的三个核心能力：

为了达成这样的能力维度或者实现这样的核心能力，其实须要不少层面的支撑，如工具链、物料平台、工程套件、接口编排等，下面展现了一张阿里妈妈的产品家族，你们能够略窥一二。

关于具体的架构层和一些可视化搭建领域的技术难点，移至第二篇研究报告中展开介绍。

若是你不想考虑那么多架构层的问题，只想快速地完成一个可视化搭建的雏形，松果出行工程师的这篇技术文章应该能帮到你

# 参考文章

这里不少资料，来源于本人参与的早早聊大会的讲师 PPT 材料，在这其中我作了一些筛选和整合，加入了本身的分析和制做的图表，也欢迎各位关注这个干货满满的会议。

再列举一些其余参考的公开文章或者网站：

1. 《前端工程实践之可视化搭建系统（一）》
2. 《MPM 卖场可视化搭建系统 — 要素设计》
3. Github - awesome-lowcode
4. 《阿里云原生 - 什么是低代码（Low-Code）？》
5. Wiki - 低代码开发平台
6. 《腾讯 - AlloyTeam - 页面可视化搭建工具技术要点》
7. 《这，就是飞冰物料》