sunilwang

V1

2022/08/03阅读:13主题:雁栖湖

FE主导打造一个运营活动平台

背景

当今互联网公司,一般都会有一些运营类活动,如公司活动宣传节假日优惠促销等,在电商类公司更是需要频繁的上(下)线运营活动。

在这里要说明一下,本文讲的并非类似易企秀这样的制作“手机幻灯片、H5场景应用”的运营平台,而是一些常规运营活动。当然如果要做幻灯片滑屏效果,也可以开发一个“幻灯片组件”。

那么,如何上线一个运营活动呢?传统流程如下:

  1. 需求收集
  2. 专题制作:页面切图、效果实现、接口开发
  3. QA测试
  4. 上线
  5. 活动结束,手动下线

传统开发方式存在以下几个缺点

  • 周期长,从往往每个运营活动都做为一个独立的Mini项目进行
  • 开发人员大量重复劳动,无法(不便)复用一些之前运营活动中开发过的功能,比如设置分享、与App的交互等
  • 运营活动投放过程中,修改不便,如bug fix、修改文案,正规公司也需要一个完整的上线流程

为解决这些问题,很多公司都推出了自己的运营活动平台。比如淘宝早期的eCRM-图腾,到目前的统一营销平台UMP、蚂蚁金服的闪蝶(闪蝶更像易企秀)、京东的通天塔等,都是非常优秀的平台工具。

那么,如何开发一款精美轻巧的运营活动平台呢?本文为大家提供一种新思路:利用组件化的方式开发一个运营活动平台

平台架构图

平台架构图
平台架构图

平台架构说明

mongonDB提供数据存储;Node.js提供平台接口、文件处理等服务;PM2用来管理项目;组件脚手架,为参与组件开发(自定义组件)的同学提供一个快速开始的工具,避免复制粘贴;组件库,构成运营活动页面的骨架;平台,由平台基础功能(页面配置)和N个组件(包括组件的数据项)构成;最终生成一个运营活动页面;

平台操作流程

平台操作流程
平台操作流程

平台依赖的“技术栈”

  1. React-前端JavaScript库
  2. Redux-状态管理,在所见即所得(实时输入=>输出)的专题预览发挥最大作用
  3. Redux Form-表单数据管理,并负责后台复杂逻辑展示,以及表单配置项的数据联动
  4. webpack-项目构建工具
  5. Node.js-服务端功能支撑,提供后台数据接口
  6. MongoDB-数据存储
  7. 如果需要动态接口(平台不能提供)支持,放到组件预览的实现部分即可;

开发一个平台组件

一个组件就是一个完整的NPM包,基于此,任何FE同学都可以独立开发一款自定义组件,只需要发布到私有NPM(当然也可以托管到github等公网平台)即可。

除了NPM所必须的package.json、用于组件开发的webpack/postcss.config.js/.eslint/.npmignore配置等文件之外,通常一个组件通常由以下几部分组成:

  1. config.json-组件默认配置,用于组件初始化数据,包含类型名称分组(tag)开发者信息默认样式支持终端类型等;
  2. thumb.jpg-示意图,用于用户选择添加组件时的组件预览;
  3. src/components/ConfigForm.jsx-组件表单配置;
  4. src/components/Preview.jsx-根据ConfigForm的数据配置、动态接口拉取数据,实时预览组件的呈现(见下方效果图,该图片组件中,用到了RD提供的图片上传接口);
  5. src/dev.jsx、src/preview.jsx、src/config.jsx-本地开发组件时的入口(webpack中的entry),根据dev/production判断入口文件是dev还是preview/config;如果是生产环境,会生成dist/preview.jsdist/config.js两个文件,在运营平台下添加组件时,会读取组件打包的这两个文件;
  6. src/dev.scss、src/main.scss-开发环境的样式和组件的样式,打包后,会生成dist/config.cssdist/preview.css

实现效果

实现效果
实现效果

webpack配置注意事项

  1. output中要指定umdNamedDefine为'true',否则打包出来的文件在平台中import时会报错
  2. 生产环境下,要指定externals,将reactreact-domredux-formreact-redux等依赖包排除,以减小和优化打包文件体积
  3. css-loader中,开启modules模块,并将process.env.npm_package_name加入localIdentName配置中,如此打包出来的css文件中的class名称包含了组件名(而组件是不可以重名的,否则也无法publish到相同npm平台上),结合hash:base64:10,为css的class名称避免重复提供更多保障;

在运营平台项目中管理组件

运营平台需要为有权限的用户提供组件管理的功能,包括新增升级禁用组件,新增组件时,根据组件的唯一标识package_name来判断组件是否存在。另外,如果是发布到私有npm平台,可能需要判断组件名称是否合法:私有npm包名往往会以@xxx/开头,用于区分私有npm包和公共npm包。

升级组件-原有组件如果进行了版本升级(在私有npm中发了新的版本),需要在平台组件管理中进行组件手动升级。

组件升级带来的好处:假设新版本组件中存在bug,未采用新组件的线上运营活动不会受到影响。但也有个弊端:假设旧版本组件有bug,修复后,线上引用了有bug版本的运营活动需要手动发布。所以,平台需要提供根据引用组件检索的能力,且最好提供批量发布的功能;

平台中动态引入组件

在一个运营活动中加入一个组件时,如何动态引入已有组件呢?以配置文件JS为例,

注:convertName是对组件名字的处理

结束语

最近,中台的概念吵的比较热。笔者以为,中台存在的最重要意义就是降本提效。以组件开发的形式,开发运营活动平台,可以由FE主导,节省很大开发成本,符合降本提奖的初衷。大家如果有更好的开发思路,欢迎留言交流。

作者简介

武明礼:58本地服务FE负责人。

分类:

前端

标签:

前端

作者介绍

sunilwang
V1