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

见贤思齐

背景当今互联网公司，一般都会有一些运营类活动，如公司活动宣传、节假日优惠促销等，在电商类公司更是需要频繁的上（下）线运营活动。在这里要说明一下，本文讲的并非类似易企秀这样的制作“手机幻灯片、H5场景应用”的运营平台，而是一些常规运营活动。当然如果要做幻灯片滑屏效果，也可以开发一个“幻灯片组件”。那么，如何上线一个运营活动呢？传统流程如下：需求收集专题制作：页面切图、效果实现、接口开发QA测试上线活动结束，手动下线传统开发方式存在以下几个缺点：周期长，从往往每个运营活动都做为一个独立的Mini项目进行开发人员大量重复劳动，无法（不便）复用一些之前运营活动中开发过的功能，比如设置分享、与App的交互等运营活动投放过程中，修改不便，如bugfix、修改文案，正规公司也需要一个完整的上线流程为解决这些问题，很多公司都推出了自己的运营活动平台。比如淘宝早期的eCRM-图腾，到目前的统一营销平台UMP、蚂蚁金服的闪蝶（闪蝶更像易企秀）、京东的通天塔等，都是非常优秀的平台工具。那么，如何开发一款精美轻巧的运营活动平台呢？本文为大家提供一种新思路：利用组件化的方式开发一个运营活动平台平台架构图平台架构图平台架构说明mongonDB提供数据存储；Node.js提供平台接口、文件处理等服务；PM2用来管理项目；组件脚手架，为参与组件开发（自定义组件）的同学提供一个快速开始的工具，避免复制粘贴；组件库，构成运营活动页面的骨架；平台，由平台基础功能（页面配置）和N个组件（包括组件的数据项）构成；最终生成一个运营活动页面；平台操作流程平台操作流程平台依赖的“技术栈”React-前端JavaScript库Redux-状态管理，在所见即所得（实时输入=>输出）的专题预览发挥最大作用ReduxForm-表单数据管理，并负责后台复杂逻辑展示，以及表单配置项的数据联动webpack-项目构建工具Node.js-服务端功能支撑，提供后台数据接口MongoDB-数据存储如果需要动态接口（平台不能提供）支持，放到组件预览的实现部分即可；开发一个平台组件一个组件就是一个完整的NPM包，基于此，任何FE同学都可以独立开发一款自定义组件，只需要发布到私有NPM（当然也可以托管到github等公网平台）即可。除了NPM所必须的package.json、用于组件开发的webpack/postcss.config.js/.eslint/.npmignore配置等文件之外，通常一个组件通常由以下几部分组成：config.json-组件默认配置，用于组件初始化数据，包含类型、名称、分组（tag）、开发者信息、默认样式、支持终端类型等；thumb.jpg-示意图，用于用户选择添加组件时的组件预览；src/components/ConfigForm.jsx-组件表单配置；src/components/Preview.jsx-根据ConfigForm的数据配置、动态接口拉取数据，实时预览组件的呈现（见下方效果图，该图片组件中，用到了RD提供的图片上传接口）；src/dev.jsx、src/preview.jsx、src/config.jsx-本地开发组件时的入口（webpack中的entry），根据dev/production判断入口文件是dev还是preview/config；如果是生产环境，会生成dist/preview.js和dist/config.js两个文件，在运营平台下添加组件时，会读取组件打包的这两个文件；src/dev.scss、src/main.scss-开发环境的样式和组件的样式，打包后，会生成dist/config.css和dist/preview.css实现效果实现效果webpack配置注意事项output中要指定umdNamedDefine为'true'，否则打包出来的文件在平台中import时会报错生产环境下，要指定externals，将react、react-dom、redux-form、react-redux等依赖包排除，以减小和优化打包文件体积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负责人。LBG开源项目推广：还在手写HTML和CSS吗？还在写布局吗？快用Picasso（毕加索）吧！一键生成高可用的前端代码，让你有更多的时间去沉淀和成长开源项目地址：https://github.com/wuba/Picasso（欢迎Star）官网地址：https://picassoui.58.com58同城北京总部