活动可视化怎么做？看京东乐高架构设计

京东云技术团队

于 2021-07-26 17:45:45 发布

阅读量5.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：硬核干货文章标签： python LowCode 活动可视化

本文链接：https://blog.youkuaiyun.com/JDDTechTalk/article/details/118527401

作者：王光辉、杜启超
部门：京东科技业务中台团队

一、前言

低代码，可视化搭建不是一个新鲜的命题了。业界也有非常多的实践和尝试。尤其是C端业务比较多的场景下，很多单页的H5如需求告知、产品介绍、营销活动等页面。需要研发测试同学介入并上线，投入产出比很低。业务、运营部门，需要一个契合其C端业务开展的可视化搭建系统来解决日常H5需求的快速开发和上线。通过对各类H5需求的解构，不难得出很多H5页面都可以抽象成由不同的楼层模板进行纵向排列最终交付的页面。而楼层模板的多样性，决定了一个可视化搭建系统可以实现多少不同类型的页面，以及这个搭建系统最终能创造多大的价值。

可视化搭建系统的核心是楼层模板，围绕楼层模板的创建、开发、调试、发布、管理、更新、配置与使用。这几个大类问题，是搭建系统生态中最为重要的部分。

二、业务背景

1.公司的主要H5入口是京东金融APP。金融APP里具有一些特殊的原生通信逻辑和方法。比如沉浸式导航、跳转原生模块等。
2.公司的运营活动，在上线后，会有较强的对楼层进行资源位管理，变更，人群定向投放的运营诉求。
3.公司的可复用的业务楼层，缺少一个中心化的沉淀方式和沉淀地点。
4.很多可视化搭建系统，扩展一个新的楼层模板，开发复杂度非常的大。也希望能有一个开发扩展体验良好的平台去沉淀自己日常常用的一些可复用业务功能。

综上，我们在开发和持续维护的乐高可视化搭建系统，专注于为公司内的前端开发者提供易用，高扩展性的楼层模板开发体验和相关能力。为运营提供更多元的楼层模板能力。

三、乐高可视化架构设计思考

为了更好的理解设计思路，需要了解一下乐高可视化平台界面样式，如图3-1所示。图中划分为模板区、画布区、模板配置区。 3-1 乐高可视化平台模板是需要前端技术人员进行研发。调研发现京东科技业务中台前端大多使用Vue技术栈。业界（通天塔、玲珑、imgcook等）使用的是React进行开发。结合公司目前情况选择使用Vue作为技术栈进行设计。

1、平台使用群体思考

业务需求是怎么快速搭建一个H5活动页面，如下图（3-1-1）所示。这样的1个页面怎么不用研发参与就可以在1小时内配置完毕。

为了更好的理解设计思路，会提到“模板”、“widget”名词，先说明一下什么是“模板”。如下图（3-1-1）左侧是一个投放（线上）18会员日页面。这样的一个页面可以进行拆解，拆解之后的效果如右下图（3-1-1）右侧所示。

3-1-1

图（3-1-1）右侧中红色区域我们称作为模板，一个红色区域表示一个模板。一个页面中可能存在多个一样的模板，我们称作模板的实例化（new Object）。红色模板是一个一个像搭积木一样从上到下搭建出来的。蓝色区域我们也称作模板，这部分从视觉效果看是脱离页面流的。

面对业务需求的痛点，我们通过平台使用群体进行了拆分：乐高可视化研发、业务研发、业务运营。如图（3-1-2）所示，红色区域为平台使用群体。

乐高可视化研发：负责研发维护乐高可视化平台，提供平台级别的能力支撑，也包括基础模板的研发维护工作。
业务研发：开发业务模板、例如18会员日研发开发18会员日相关的模板即可，不用关心乐高可视化平台稳定性。
业务运营：负责页面的搭建、模板属性配置。
乐高可视化研发也是乐高可视化产平台的使用方。

3-1-2

2、平台化思考

通过与其他平台对比我们将可视化（平台化）和模板化摆到了核心位置。

可视化：可视化是可以编辑、发布页面、接入各种模板。
模板化：开发过程与平台无关、更多的研发自主权。

可视化（乐高可视化平台）与模板化（模板管理平台）就可得出平台框架的初步样子，如图（3-2-1）所示。

3-2-1

模板管理平台：乐高可视化H5页面是由很多模板组装（搭建）出来的。这些模板是需要统一管理，那么就需要提供模板管理平台。为乐高可视化平台提供模板资源，同时也包括模板的版本号、权限、类型、模板是否可以被实例化多次或单次（我们用S表示只能被实例化一次，M表示可以被实例化多次，简称S/M）等管理。

乐高可视化平台：按照区域可以细分为模板区、画布区、模板配置区、预发投放区。模板区根据用户权限去模板管理平台加载相关模板；画布区根据业务运营拖拽模板搭建页面；模板配置区主要负责对模板的配置，例如埋点、上下线时间、人群等。预发投放区主要负责提交当前页面数据到服务端，进行统一构建打包，生成对外url。

3、其他思考

1、模板与平台无关，模板开发类似与开发一个小项目，一个小项目需要网络、埋点、统一跳转、模板之间数据通信，等基本必要依赖。这样就需要一个开发模板的脚手架、需要一个封装好的依赖库、需要一个模板桥协议（以下简称乐高桥）。

2、模板开发过程中需要实时在乐高可视化平台进行调试、配置。而模板与平台无关，于是需要提供了开发模板debug工具，在模板开发的时候可以直接进行debug调试。

3、模板配置区，每一个模板的配置有相同的部分，例如人群、埋点、背景颜色等。也有自己特有配置能力。需要提供模板配置区的可视化平台，通过拖拽实现模板配置区的可视化，节省模板开发时间，让研发更聚集。

4、模板配置区中有CMS、埋点、颜色等widget如图（3-3-1）。这些也是需要统一管理，例如CMS涉及到测试、预发、线上环境。我们也可以视widget为bPaaS组件。衍生出atom-ui 库。专门为模板配置区提供物料支持。

统一构建部署，对搭建好的H5页面进行统一构建，生成对外投放url。
3-3-1

四、乐高可视化架构设计

产品侧方面的架构设计框架图如图（4-1）所示。乐高可视化模板管理平台负责对乐高可视化所有模板进行管理，包括版本管理、名称、权限等。表单可视化平台负责模板可视化的搭建，负责模板属性的配置。atom-ui负责对表单可视化平台提供物料支持，例如CMS、埋点等。
4-1
通过以上分析，可视化与模板分别独立。考虑到用户群体、低代码&0代码。设计出图（4-2）整体技术架构。可视化（乐高可视化平台）和模板化摆到了核心位置。