文/ 阿里妈妈联盟 – 思霏、阿里淘系 F(x) Team – 苏川

BOOM 是由阿里妈妈联盟团队研发的面向 C 端营销页面智能生成的解决方案，用于打造营销页面或模块的低（无）代码研发工作流，将联盟复杂多变的营销页面需求快速变现上线，加快新业务试水迭代、缓解大促时期页面开发的压力，大幅提升产研效率。

平台接入了 imgcook 的 Sketch 插件能力、布局生成 API 能力、业务逻辑库和模型识别能力、编辑器插件定制能力实现营销页面的视图层代码以及逻辑的识别和表达，并结合页面搭建、逻辑编排和渲染能力完成各种复杂度的页面生成，同时支持小程序多端渲染产物的产出。?

BOOM 平台已产出组件180+，页面3075+，支付宝小程序5+，DX 模版10+，覆盖联盟 80% 以上的页面投放场景，实现模块级别的0研发，页面级别的低代码开发，提效数倍。?

使用情况

• BOOM平台 使用设计稿生成代码接口调用次数：31543次（至2021.4.20）
• 时间：2020.1 -至今
• 使用对象：设计师 运营 后台 前端
• 此场景提效：90%+

落地效果

产出组件180+，页面3075+，支付宝小程序5+，DX模版10+，覆盖联盟大部分页面投放场景，实现模块级别的0研发，页面级别的低代码开发，提效数倍。

技术方案

营销页需求拆解

通过分析我们平时覆盖的开发需求和耗时因素，我们将C端营销页面的开发诉求拆解成如下三种模式，BOOM会通过不同的解法来达到提效的目的。

BOOM对静态运营坑位的提效方案

联盟有很多静态运营坑位的前端开发工作，主要用于运营给淘客提供一些策略 或者是重点运营一些供给侧的爆品，拿到这种需求传统的做法是前端会去开发一个模块，开发过程包括视图UI部分的切图开发，将运营需要编辑的部分开发配置表单，代码打包部署，然后运营就可以在搭建平台上去配置数据了，配置好数据后 设计师会进行视觉还原，如果有调整，前端在调整代码 重新发布重复这个过程。

?

可以看到这个过程的开发是层层依赖和会被开发Block住的，联盟业务涉及外部媒体，因此很多情况下，运营是没有办法提前拿到素材的，这样就会导致设计和运营填写的内容需要反复修改，UI代码开发可能不复杂，但是我们会花费很多时间去调整和发布，因此针对这种需求，BOOM采用了一种新的方案来解决。?

?

在这种需求下，我们将开发的主体变成设计和运营，由设计师直接在搭建系统中上传设计稿，将BOOM内置在页面搭建系统中，并在BOOM内部调用imgcookD2C的能力将设计稿自动转化成代码，并且将可能的业务字段和设计字段都做为动态的属性通过智能表单自动生成配置项，然后设计师和运营都可以同时调整这份产出，并且直接看到效果进行视觉还原，调整完成后BOOM内部还内置了在线打包部署的能力，可以直接打包发布。?

具体的使用效果可见下面视频，可见通过BOOM在这条链路的定制，前端无需参与开发就可以分钟级把静态的运营坑位发布上线。?

BOOM对单坑的提效方案

因为联盟主要是基于单品的推广模式，因此我们近 6 成的需求都是在处理这种单品坑位，又由于我们坑位用的场景不同，包装的利益点不同，受众不同 品也不同，因此就意味着我们单坑不仅有视图代码，还会含有很多的逻辑代码，抽象起来我们需要处理的逻辑大概有这几类：布局、动效和主题皮肤、事件、不同接口的调用、物料的处理等等。

?

按照传统的单坑模块开发方式，会使用D2C的能力去生成视图代码，剩下的逻辑代码还是通过人肉的方式去书写，然后打包部署，联盟的坑位很多，如果每个都这样casebycase的开发，那还是会浪费很多时间，因此BOOM通过一种新的方案来解决这类的问题，具体流程如下图所示：?

首先我们还是会按照逻辑和视图代码进行拆分，视图层代码BOOM会借助D2C的能力自动生成，然后不同于把逻辑代码都分别写到各自的模块中，我们将逻辑从单坑模块中剥离出来，通过抽象，形成额外的逻辑schema，附加到D2C自身的schema中，扩展静态模版的逻辑描述能力，然后我们有专门的BOOM编辑器可以用来编排这份schema，这样的话我们就可以支持按需来配置这个单坑用于投放。?

另外我们的BOOM编辑器还支持为不同的角色和投放场景来定制编排的视图，通过此种开发方式，我们可以快速产出单坑投放方案，收敛、共享逻辑功能，提升联盟营销页面的交付效率，减小试错成本，并在迭代过程中沉淀效果数据。?

值得一提的是在开发过程中我们还会通过一些智能化的手段去辅助开发，提高单坑产出的自动化程度，如下图所示：

在D2C生成视图模版的过程中，我们需要在模版层去做动态字段的绑定，比如我们需要把标题绑定成itemName这个标准字段，通常这个功能是需要手动去完成的，对此我们实现了联盟单品的NLP文本分类模型和图片分类模型，上传设计稿后通过模型的识别就可以辅助我们的字段绑定。?

还有一个典型的case就是，我们利用特征识别功能 识别按钮这类基础元素，上传设计稿识别后会给模版中的按钮元素类打出标记，这样在BOOM编辑器中 就能够支持在按钮区域绑定某类事件 减少对于模版代码的侵入。?

此外我们还利用对皮肤特征的识别，自动生成皮肤字段配置，大大增加模版的复用度，减少模版调整的耗时。?

BOOM实现复杂逻辑营销页面的低代码提效方案

在我们的开发过程中还有20%页面级别的开发需求，这类页面的特点是 不同于搭建类的页面 模块间是有依赖和数据传递的，并且大多是含有权益领取复杂逻辑的工具页，要适配不同的媒体和链路 就可能会有很多“变种”类型，不同渠道页面的逻辑和UI都有些许差异，但大多数内容相同，但是因为传统的源码页面开发模式，所有逻辑都藏在代码中，因此我们只能所有的页面都从0去构建，这也会增加我们的开发时间，那这种页面我们怎么做提效呢？BOOM给出了一种低代码的实现方案：?

?

我们将页面开发流程拆分成物料开发链路和逻辑开发链路，这样我们对页面的开发就会变成物料的生成和逻辑控件的开发，然后通过物料的搭建以及逻辑控件的编排，我们可以得到一个复杂的页面，在这种开发模式下，因为代码都是结构化的，我们非常容易可以通过变化某些控件和物料来生成一个新的页面。?

以一个具体的实例来阐述 这个是我们的一个二合一领券页，我们如何使用BOOM开发它呢，设计师上传设计稿后 我们通过D2C的能力可将页面涉及的物料自动化分割生成物料代码后发布，与此同时我们在prd中能够获得逻辑，比如我们需要有二合一数据源进行数据加载的逻辑点、要有领取妈妈券和渠道券的逻辑点，然后通过逻辑编排生成逻辑代码发布。再结合物料搭建的结果，就能生成页面，当我们再有一个类似的需要投放在抖音场景的二合一页面形式的时候，我们就可以快速从已有的页面中修改逻辑点或物料 产出一个新的页面。BOOM的这种策略产出的页面是可以被复刻、查看到所有的逻辑并且易于自动化测试的。 通过这个方式我们就可以用很低的代码成本完成复杂逻辑的页面开发。?

接入的 imgcook 能力

1、imgcook sketch 插件能力

无成本，直接 imgcook首页下载 imgcook sketch 插件使用即可。

2、自定义 DSL 生成多端代码能力

因为输出的代码有 BOOM 自己的规范，根据 imgcook DSL 的开发指引，自定义了「阿里妈妈 BOOM DSL」， BOOM 期望用最合适的原生语言的方式来实现，因此 BOOM DSL 内置多种 dsl 来支持按端需要生成各组件物料。

3、自定义业务逻辑库生成部分逻辑代码能力

用 imgcook 自定义逻辑库能力，自动在生成的代码中添加 BOOM 坑位常见的逻辑代码，如：

• 字段识别绑定：优先按照和设计师的约定标注进行处理；使用NLP识别的字段作为抄底识别绑定。
• 主题皮肤：识别设计师后期想干预的样式皮肤 用于自动生成皮肤表单。
• 隐显字段：用于按需识别结构是否展示的逻辑字段。

4、自定义 NLP 模型识别能力-BOOM单品字段绑定

用来解决设计稿业务字段手动过多标注的问题，使用 NLP 模型进行智能抄底标注问题，此处使用 imgcook 提供的自定义 NLP 文本模型能力， 从联盟擎天柱中选取典型的 1000+ 条数据导入 NLP 中训练模型得到 NLP 字段用于处理容易识别的字段绑定，得到 BOOM 单品的模型，然后进行处理。?

通过 3 和 4 可定制特定场景的字段和逻辑的识别和绑定提升效率。

5、imgcook 编辑器定制能力

• 定制 DX 模版制作工作流 – Dinamicx3.0 版本之前 imgcook 默认提供的 DX DSL 已无法使用，dinamic-imgcook 的插件也连带无法使用，因此我们定制了对应的DX通用链路。
• 定制H5单坑模版的制作
• 针对字段绑定高频操作定制绑定面板

6、imgcook Open API 能力

• openAPI：Sketch 文件上传解析能力 Open API
• openAPI: 布局生成 Open API
• openAPI：保存到指定工作组和项目下的 Open API

可借鉴的亮点

• 和设计师深入合作，设计师遵守 imgcook 少量设计稿规范。
• 生产关系的转移，生成代码从前端转为设计师，设计师可以看到自己的设计稿立马上线的效果；设计师直接使用 imgcook，直接由设计师生成 html+css 代码、智能字段绑定、智能添加动态逻辑。
• 将 imgcook 的核心能力（设计稿生成视图代码、智能字段绑定、智能组件逻辑点等）无缝融入到自己的平台链路中。
• 自定义 imgcook 可视化编辑器，引导到自己的业务流程动线。
• 设计稿一次生成多端代码（Boom模板规范代码、DX模版以及小程序代码）。

接入团队

阿里妈妈联盟前端和设计团队

• 前端：古西风、勇智、东溟、思霏、稳健、彬宇、紫丞、椰子、知酒、梨恩等
• 设计师：不智、崇丛、花引、 夜梵 等