河狸系统:如何利用组件化开发和设计的思想,完成可视化活动页面搭建

2,043 阅读10分钟

1. 前言

河狸系统是每日优鲜自研的活动搭建平台,平台中提供了丰富的业务组件,通过可视化搭建的交互方式,让运营同学可以更灵活高效的搭建出符合自己营销场景的活动页面。同时也将研发人员从高度重复的活动页开发需求中解放出来,大大提升了研发效率。

以下将对河狸系统的应用背景、系统实现以及未来展望几个方面进行详细介绍,以便各位同学对河狸系统有更加深入的了解。

2. 应用背景

2.1 没有河狸系统的时候是什么样的

对于一个网上电商公司来说,节日意味着活动,活动意味着运营手段,提升网上下单率的最基本操作就是页面适应节日活动气氛,定向定点投放响应的商品。

就拿春节来说,各种年货商品,每年的主题不一样,风格也不一样,商品搭配方式不一样,从腊八到除夕等,如果要保证每天一个风格一个样式,需要研发快速迭代,页面布局变了需要重新开发,商品搭配变了需要重新开发。如果提前开发好页面,到某个时间的关键词不一样,页面元素并不能保证一致性。

总不能,老板说明天搞儿童节商品推广,今天就得开发儿童节风格的页面,开发头大,运营也头大,等开发完成测试上线,再搞推广。心态爆炸啊。

随着页面的不断增长,营销活动、广告、页面改版等需求日益倍增,单纯的靠人工开发已经完全跟不上需求的增长速度,容易造成为了做重复的工作而加班,增加人员等。

投放不同地区的活动页面地址相同只有个别图片不同,需要维护不同的页面

2.2 河狸系统要解决的核心问题是什么

  1. 可视化搭建需要哪些模块 基础组件、页面设计、素材、数据更新、页面预览、发布。
  2. 分析哪些组件可以编辑 货架商品组件 - 商品编码、货架样式……
    图片组件 - 图片、点击热区、跳转动作……
    文本组件 - 内容、大小、颜色……
    导航组件 - 菜单分类、锚点定位……
  3. 组件与数据的交互
  4. 如何适应多端
  5. 组件多规则控制
  6. 组件的渲染
  7. 页面多组件 接口合并数据分发

2.3 目标与结果

  1. 释放开发资源 解决大量重复的模块 ,修改复杂且零散的配置需要开发人工维护,成本高, 大量重复的开发工作。开发效率低,活动开发周期长等问题
  2. 快速产出活动页面 以往页面开发,需要需求沟通->排期->开发->测试->部署上线 成本太高。
    沟通成本,开发成本,页面布局修改,数据替换,活动主题、关键词替换等。
    河狸系统支持运营自己搭配页面,使用不同的组件,配置不同的数据,控制时效,到发布页面,都是运营同学自己完成,减少了沟通成本,开发资源。运营同学可以按照自己的想法,方案,活动推广策略,搭建适合自己的活动页面。
  3. 业务赋能 运营、产品等自己搭建页面,无需开发,提升业务迭代效率。
    1). 提供更灵活的生成页面的工具,供给运营人员创建活动页。
    2). 同一类页面需求,只做一个,其它的复用。减少开发时间。
    3). 可视化构建页面UI,开发人员只需补充必要业务逻辑,提升开发效率。

3. 技术实现

3.1 系统架构设计

系统主要分为以下几个模块:

  1. 设计器
    提供给运营同学使用的,可视化搭建页面的WEB后台;
    在这个后台,运营同学可以使用开发人员已发布的组件库,自由选择组件,并配置相应数据,搭建出符合自己需求的页面,搭建完成后可直接发布生成线上H5活动页,获取链接即可去投放活动。
    技术选型:vue-cli

  2. 组件库
    组件开发实际与正常的vue项目开发无异,每个组件库都是单独的GIT项目,只需按照系统约定的格式,开发组件,发布后运营同学即可在设计器中使用;
    各业务线的组件库可以独立开发,互不影响;
    技术选型:vue

  3. 脚手架
    面向开发人员,通过脚手架,可以更方便的开发组件库,并且可以通过脚手架快速 发布/配置 组件库;
    技术选型:node.js

  4. 河狸Node服务
    为设计器提供所需的服务,主要如:组件库/页面数据/构建部署/proxy等,设计器直接与河狸服务端进行交互;
    技术选型:think.js

  5. 后端服务
    基础后台服务,如:商品/营销等。

3.2 技术实现部分详解

3.2.1 如何定义组件库

组件库定义
// index.js
import YourComponent1 from 'path/to/your/component1.vue'
import YourComponent2 from 'path/to/your/component2.vue'
import YourComponent3 from 'path/to/your/component3.vue'
import YourComponent4 from 'path/to/your/component4.vue'
// more components

export default {
  name: '组件库名称',
  packages: [
    {
      name: '组件库分包1',
      cates: [
        {
          name: '组件库分包1 - 分类1',
          coms: [
            YourComponent1,
            YourComponent2,
            // ...
          ]
        },
        {
          name: '组件库分包1 - 分类2',
          coms: [
            YourComponent3,
            YourComponent4,
            // ...
          ]
        }
      ]
    },
    {
      name: '组件库分包2',
      cates: [
        {
          name: '组件库分包2 - 分类1',
          coms: [
            YourComponent5,
            YourComponent6,
            // ...
          ]
        },
        {
          name: '组件库分包2 - 分类2',
          coms: [
            YourComponent7,
            YourComponent8,
            // ...
          ]
        }
      ]
    }
  ]
}

如上为组件库的入口文件,组件库发布时,会以此文件为entry,构建出该组件库的 bundle 包,该 bundle 包用以在设计器中使用,定义中的 分包/分组,也是为了在设计器中能够更好的展示组件分类情况而设置的。

单组件定义
// your/component.js
import YourComponent from 'path/to/your/component.vue'
export default {
  // 组件名称
  name: 'component name',
  // 组件的vue文件路径
  path: 'lib-name@path/to/your/component.vue',
  // 组件定义
  def: YourComponent,
  // 组件配置数据
  model: {},
  // 组件数据编辑器
  edit: [],
  // 组件配置数据校验
  validate(model) {}
}

如上定义了一个组件的最基本结构,其中:
path:定义了该组件的实现文件的路径,即 lib-name 组件库中的 path/to/your/component.vue 文件,在H5页面构建时,通过该路径找到对应的组件实现文件进行打包构建;
def:用以构建组件库 bundle 包时使用的,设计器中直接通过该字段获取到组件实现并渲染;
model:可以自由定义该组件所需的配置数据;
edit:描述了该组件中的配置数据该使用何种编辑器去编辑;
validate:校验函数,会在组件配置保存时执行,用以校验数据配置是否合法;

3.2.2 如何配置组件数据

组件定义中提到了使用 edit 字段来描述组件数据配置的编辑器,这些编辑器是在设计器中实现的,组件定义中通过指定对应的编辑器 type 来使用编辑器:

export default {
  // ...
  edit: [
    {
      label: '配置字段1',
      model: 'model.field.path.1',
      type: 'edString',
    },
    {
      label: '配置字段1',
      model: 'model.field.path.2',
      type: 'edColor',
    },
    // ...
  ]
}

上述定义中,表示的是组件中的 model.field.path.1 字段使用文本编辑器进行配置, model.field.path.2 使用的是颜色编辑器,......
若需支持更多的数据配置形式,只需要在设计器中实现了对应的编辑器,组件定义中就能直接使用了。

3.2.3 页面如何搭建/渲染

有了上述组件的定义,我们就可以通过定义一个页面的 jsonschema 来表示页面的整体结构,具体如下所示:

{
  "id": 123,
  "title": "page title",
  "name": "page name, display & search in Designer",
  "libs": [
    "lib-name-1",
    "lib-name-2"
  ],
  "elements": [
    {
      "id": 1234,
      "name": "component name",
      "path": "lib-name@path/to/your/component.vue",
      "model": {}
    },
    // more elements ...
  ]
}

以上结构中,libs 表示页面使用到的组件库, elements 数组描述了页面的组成结构;
在设计器中,运营同学通过拖拽形式,可以往页面中添加组件,调整组件数据,即操作 elements 数组,并根据组件定义中的 edit 对每个组件数据进行配置,配置完成后,即可保存生成如上页面的数据结构。
H5页面中,我们通过组件中的 path 字段,就可以找到对应组件的实现,然后只需 elements 数组,逐个渲染组件,即可将页面完整展示出来了。

3.2.4 C端H5页面如何构建

根据页面的json描述,我们能够清楚的知道页面使用到的组件库和组件,在构建时,只需要根据每个组件的 path 引入相应的组件,加上页面的json数据一起打包成H5静态页面。

3.2.5 组件是如何渲染的

渲染组件库组件的组件

// CommonRender.vue
<template>
  <div class="element-box">
    <component :is="com.def" :element="element"></component>
  </div>
</template>
<script>
export default {
  inject: ['getComDef'],
  props: ['element'],
  computed: {
    com() {
      return this.getComDef(this.element)
    }
  }
}
</script>

页面入口
// App.vue
<template>
  <div class="">
    <CommonRender v-for="element in elements" :key="element.id" :element="element" />
  </div>
</template>

<script>
import CommonRender from 'path/to/CommonRender.vue'

// 构建时打入页面使用的组件,以path字段值为key
import Component1 from 'lib-name/path/to/your/component.vue'
const components = {
  [`lib-name@path/to/your/component.vue`]: Component1
}

export default {
  provide: {
    CommonRender,
    getComDef(elm) {
      return {
        def: components[elm.path]
      }
    }
  },
  data() {
    return {
      elements: [] // 构建时打入页面elements数据
    }
  }
}
</script>

4. 使用操作示例

资源库使用

素材库便于对搭建活动中使用到的素材进行统一管理,如下示例,在创建活动前,创建一个对应该活动的素材目录,将活动所需素材统一上传,以便后续搭建页面过程中使用。

河狸系统-资源库使用

创建活动页

在页面列表中点击新建,开始搭建自己的活动页,配置活动名称/页面标题/分享信息等页面配置,点击保存,一个空的活动页已经创建完毕。

河狸系统-资源库使用

选择组件/配置数据

从左侧的组件库中,选择你需要的组件,拖拽到你的页面中,点击数据配置,配置对应组件的相关数据,保存后,可以实时看到配置后组件在页面中展示的效果。

配置图片组件

从素材库中选择要使用的图片,在图片上可以自定义热区,配置区域的点击事件;

河狸系统-资源库使用

配置货架组件

在页面中可以配置该活动页的主题色,在组件配置中,可以选择使用。

河狸系统-资源库使用 河狸系统-资源库使用

配置货架商品

可以根据需要自行调整商品排列的顺序,也可以使用智能排序方式,由大数据进行排序。

河狸系统-资源库使用

页面构建

页面搭建完成后,点击右上角预览按钮,开始构建页面,等待构建完成后,可以看到实际页面展示效果,获取到的链接,可以投放使用。

河狸系统-资源库使用

5. 未来展望

页面构建

现在每次构建页面时,都会根据配置,将所用到的组件和页面数据一起打成一个bundle包,这样做的好处就是对于已发布的页面,将不再受后续变动的影响,能够在线上稳定运行;坏处也是一样的,如果线上运行的这个版本是有问题的,组件库更新修复后,页面必须要重新构建发布才能生效;同时,对于相对更新没有那么频繁的组件库资源文件,无法单独稳定命中cdn缓存;

后续可以进一步优化构建打包的策略,将组件库单独构建发布到线上,页面中通过版本控制引用相应的组件,这有利于组件库资源文件命中cdn缓存,提升页面加载速度,同时,也能建立对于组件库线上紧急bug修复的机制。

设计器交互优化

优化设计器的交互,可以有效的提升运营同学搭建活动页面的效率,也能减少不必要的犯错。

作者:河狸系统研发负责人戴慧宾

招贤纳士

如果你对这个也感兴趣,快点加入我们吧,我们隶属每日优鲜营销前端团队。
内推邮箱:yinls@missfresh.cn
工作地点:北京