Chinaunix首页 | 论坛 | 博客

vivo互联网技术

首页　| 　博文目录　| 　关于我

vivo互联网技术

  • 博客访问： 948545
  • 博文数量： 253
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2609
  • 用 户 组： 普通用户
  • 注册时间： 2019-03-08 17:29
个人简介

分享 vivo 互联网技术干货与沙龙活动，推荐最新行业动态与热门会议。

文章分类

全部博文（253）

文章存档

2022年（60）

2021年（81）

2020年（83）

2019年（29）

我的朋友
最近访客
推荐博文
相关博文
【营】在开局，提升【豹】发力 - vivo活动插件管理平台

分类： 架构设计与优化

2022-02-22 10:59:30

一、背景


随着vivo悟空活动中台活动组件越来越多，活动中台开发的小伙伴们愈发的感知到我们缺少一个可以沉淀通用能力，提升代码复用性的组件库。在这个目标基础之上诞生了acitivity-components，但是随着组件的抽离增多，在和上下游沟通时，发现公共组件对于运营、产品、测试同学来说都是黑盒，只有开发自己知道沉淀了哪些能力，业务上哪些模块进行了抽取。同时，在对外赋能时，也缺少了一个平台呈现我们抽离的组件，基于此目标，开发小伙伴们开始构思插件管理平台的开发计划。


二、平台架构


2.1 技术选型


在平台开发之初经过小伙伴们一起沟通确定了Midway+Vue+MySQL技术栈，并完成对应的架构梳理，在做Node层框架选型时，我们选择了Midway做为Node层的开发框架，原因主要有以下几点：


  • 基于egg.js -- Midway可以很好的兼容egg.js的插件生态。

  • 依赖注入（loC）-- loC全名叫做控制反转（Inversion of Control，缩写为loC），是面向对象的一种设计模式，可以用来降低代码之间的耦合度，实现了高内聚，弱耦合的架构目标。

  • 更好的Typescript支持 -- 因为Midway使用的ts开发，所以在项目开发过程中，我们可以直接使用ts，利用ts的静态类型检查、装饰器等能力，提升我们的代码健壮性和开发效率。


2.2 架构拆解


首先我们来看一下插件管理平台的架构图：


通过对平台整体架构图的梳理，构建了整个平台开发的基本思路：


  • 组件抽离 -- 从建站的组件在往下一层，抽取更基础的组件内容，并集中托管至activity-components。

  • md生成 -- 所有的组件都需要对外输出，activity-components内需要做一层编译操作，每个组件需要自动化生成对应的md文档。

  • gitlab hooks -- 如何保证server端对activity-components的变更都能及时响应，保证组件都是最新的，此处使用了gitlab集成中的push events监听组件的push操作。

  • npm远程加载 -- 平台需要具备远程拉取npm包能力，并解压缩对应的包，将activity-components源文件获取到。

  • Vue全家桶使用 -- 平台web端引入Vue全家桶，利用动态路由对各个组件进行匹配。

  • 单组件预览 -- 抽离的组件底层存在对建站能力的依赖，此处需要将建站的编辑页进行拆解，集成建站底层能力，完成对activity-components的组件预览。

  • 文件服务 -- 具备公共组件策划文档的上传能力，方便运营和产品对公共组件的接入。


三、重点技术详解


在平台的整体搭建开发过程中，梳理了以下技术点内容，进行重点介绍。


3.1 组件抽离


首先可以看一下activity-components组件库package.json内容：


  1. {
  2.   "name": "@wukong/activity-components",
  3.   "version": "1.0.6",
  4.   "description": "活动公共组件库",
  5.   "scripts": {
  6.      "map": "node ./tool/map-components.js",
  7.       "doc": "node ./tool/create-doc.js",
  8.       "prepublish": "npm run map && npm run doc"
  9.     }
  10.   }


通过scripts里面配置的指令，可以看到，在组件做publish操作时，我们利用了npm的pre事件钩子，完成组件自身的第一层编译操作，map-components主要用于实现对组件的文件目录进行遍历，导出所有的组件内容。


文件目录结构如下：



  1. |-src
  2. |--base-components
  3. |---CommonDialog
  4. |---***
  5. |--wap-components
  6. |---ConfirmDialog
  7. |---***
  8. |--web-components
  9. |---WinnerList
  10. |---***
  11. |-tool
  12. |--create-doc.js
  13. |--map-components.js


map-components主要实现对文件目录的遍历操作；


  1. // 深度遍历目录
  2. const deepMapDir = (rootPath, name, cb) => {
  3.   const list = fse.readdirSync(rootPath)
  4.   list.forEach((targetPath) => {
  5.     const fullPath = path.join(rootPath, targetPath)
  6.     // 解析文件夹
  7.     const stat = fse.lstatSync(fullPath)
  8.     if (stat.isDirectory()) {
  9.       // 如果是文件夹，则继续向下遍历
  10.       deepMapDir(fullPath, targetPath, cb)
  11.     } else if (targetPath === 'index.vue') {
  12.       // 如果是文件
  13.       if (typeof cb === 'function') {
  14.         cb(rootPath, path.relative('./src', fullPath), name)
  15.       }
  16.     }
  17.   })
  18. }
  19. ***
  20. ***
  21. ***
  22. // 拼接文件内容
  23. const file = `
  24. ${components.map(c => `export { default as ${c.name} } from './${c.path}'`).join('\n')}
  25. `
  26. // 文件输出
  27. try {
  28.   fse.outputFile(path.join(__dirname, '..', pkgJson.main), file)
  29. } catch (e) {
  30.   console.log(e)
  31. }


在做文件遍历时，我们采用了递归函数，保证我们对当前的文件目录做到彻底遍历，将所有的组件全部找出，通过这段代码，可以看到，定义的组件需要有一个index.vue组件作为检索的入口文件，找寻到这个组件之后，我们就会停止向下寻找，并将当前的组件目录解析出来，具体流程如下图。


导出文件内容如下：


  1. export { default as CommonDialog } from './base-components/CommonDialog/index.vue'
  2. export { default as Login } from './base-components/Login/index.vue'
  3. export { default as ScrollReach } from './base-components/ScrollReach/index.vue'
  4. export { default as Test } from './base-components/Test/index.vue'
  5. ***


通过上述一系列操作，统一对外的目录文件生成，组件抽离只需要正常往组件库添加即可。


3.2 Markdown文件自动化生成


生成了组件目录之后，对应的组件说明文档该如何生成呢，此处我们引用同中心另一位同事冯镝同学开发的，完成对应Vue组件md文档自动化生成，首先来看一下定义的doc指令。


  1. "doc": "node ./tool/create-doc.js"
  2.  ***
  3.  
  4.  create-doc.js
  5.  
  6.  const { singleVueDocSync } = require('@vivo/vue-doc')
  7.  const outputPath = path.join(__dirname, '..', 'doc', mdPath)
  8.  singleVueDocSync(path.join(fullPath, 'index.vue'), {
  9.     outputType: 'md',
  10.     outputPath
  11.   })


通过Vue-doc暴露的singleVueDocSync方法，在server端根目录下会新建一个doc文件夹，这里面会根据组件的目录结构生成对应的组件md文档，此时doc的目录结构为：


  1. |-doc
  2. |--base-components
  3. |---CommonDialog
  4. |----index.md
  5. |---***
  6. |--wap-components
  7. |---ConfirmDialog
  8. |----index.md
  9. |---***
  10. |--web-components
  11. |---WinnerList
  12. |----index.md
  13. |---***
  14. |-src
  15. |--**


通过这个文件目录可以看到，根据组件库的目录结构，在doc文件夹下生成同样目录结构的md文件，至此每个组件的md文档都已经生成了，但是只到这一步是不够的。


我们还需要将当前的md文档进行整合，通过一个json文件表述出来，因为插件管理平台是需要解析到这个json文件并将其做为返回内容至web端，完成前端页面的渲染，基于此目标我们写了以下代码：


  1. const cheerio = require('cheerio')
  2. const marked = require('marked')
  3. const info = {
  4.   timestamp: Date.now(),
  5.   list: []
  6. }
  7. ***
  8. let cname = cheerio.load(marked(fse.readFileSync(outputPath).toString()))
  9.   info.list.push({
  10.     name,
  11.     md: marked(fse.readFileSync(outputPath).toString()),
  12.     fullPath: convertPath(outputPath),
  13.     path: convertPath(path.join('doc', mdPath)),
  14.     cname: cname('p').text()
  15.  })
  16.  ***
  17.  // 生成对应的组件数据文件
  18. fse.writeJsonSync(path.resolve('./doc/data.json'), info, {
  19.   spaces: 2
  20. })


这里引入两个比较重要的库一个是cheerio，一个是marked 。cheerio是jquery核心功能的一个快速灵活而又简洁的实现，主要是为了用在服务器端需要对DOM进行操作的地方，marked主要是将md文档转换为html的文档格式，完成上述代码编写之后，我们在doc目录下生成一个data.json文件，具体内容如下：


  1. {
  2.   "timestamp": 1628846618611,
  3.   "list": [
  4.     {
  5.       "name": "CommonDialog",
  6.       "md": "

    CommonDialog

    \n

    组件介绍

    \n
    \n

    通用基础弹框

    \n
    \n

    属性-Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数 说明 类型 默认值 必须 sync
    maskZIndex 弹框的z-index层级 Number 1000 否 否
    bgStyle 背景样式 Object - 否 否
    closeBtnPos 关闭按钮的位置 String top-right 否 否
    showCloseBtn 是否展示关闭按钮 Boolean true 否 否
    v-model 是否展示弹框 Boolean - 否 否
    \n

    事件-Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    事件名 说明 参数
    input -
    close 弹框关闭事件
    \n

    插槽-Slots

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    名称 说明 scope content
    default 弹框内容 -
    \n"    ,
  7.       "fullPath": "/F/我的项目/公共组件/activity-components/doc/base-components/CommonDialog/index.md",
  8.       "path": "doc/base-components/CommonDialog/index.md",
  9.       "cname": "通用基础弹框"
  10.     }, {
  11.       "name": "ConfirmDialog",
  12.       "md": "

    ConfirmDialog

    \n

    组件介绍

    \n
    \n

    确认弹框

    \n
    \n

    属性-Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数 说明 类型 默认值 必须 sync
    bgStyle 背景样式 Object - 否 否
    maskZIndex 弹框层级 Number 1000 否 否
    v-model 弹框展示状态 Boolean - 否 否
    title 弹框标题文案 String - 否 否
    titleColor 标题颜色 String - 否 否
    leftTitle 左按钮文案 String 取消 否 否
    rightTitle 右按钮文案 String 确定 否 否
    leftBtnStyle 左按钮样式 Object - 否 否
    rightBtnStyle 右按钮样式 Object - 否 否
    \n

    事件-Events

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    事件名 说明 参数
    cancel 左按钮点击触发
    confirm 右按钮点击触发
    close 弹框关闭事件
    input -
    \n"    ,
  13.       "fullPath": "/F/我的项目/公共组件/activity-components/doc/wap-components/ConfirmDialog/index.md",
  14.       "path": "doc/wap-components/ConfirmDialog/index.md",
  15.       "cname": "确认弹框"
  16.     }, {
  17.       "name": "WinnerList",
  18.       "md": "

    WinnerList

    \n

    组件介绍

    \n
    \n

    中奖列表

    \n
    \n

    属性-Attributes

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数 说明 类型 默认值 必须 sync
    item - - 是 否
    prodHost - String - 是 否
    prizeTypeOptions - Array - 否 否
    isOrder - Boolean true 否 否
    listUrl - String /wukongcfg/config/activity/reward/got/list 否 否
    exportUrl - String /wukongcfg/config/activity/reward/export 否 否
    \n"    ,
  19.       "fullPath": "/F/我的项目/公共组件/activity-components/doc/web-components/WinnerList/index.md",
  20.       "path": "doc/web-components/WinnerList/index.md",
  21.       "cname": "中奖列表"
  22.     }]
  23.  }


至此我们就在activity-components侧完成了对组件的md文档自动化生成。


通过这张图我们可以清晰的抓取到底层组件中的关键信息，例如：组件支持的属性和事件。


3.3 gitlab hooks


在平台开发的过程中，组件每次做gitlab提交时，平台是无法感知组件库的代码发生了变化，于是我们开始调研，在对gitlab的api进行搜索时，发现gitlab已经提供了集成的解决方案。


在完成对应url和secret Token配置之后，点击save changes会生成如下图所示内容：


此时已经完成基本的push events配置，接下来需要在插件管理平台server端完成对应的接口开发。


  1. @provide()
  2. @controller('/api/gitlab')
  3. export class GitlabController {
  4.   @inject()
  5.   ctx: Context;
  6.   @post('/push')
  7.   async push(): Promise<void> {
  8.     try {
  9.       const event = this.ctx.headers['x-gitlab-event'];
  10.       const token = this.ctx.headers['x-gitlab-token'];
  11.       // 判断token是否正确
  12.       if (token === this.ctx.app.config.gitlab.token) {
  13.         switch (event) {
  14.           case 'Push Hook':
  15.             // do something
  16.             const name = 'activity-components';
  17.             const npmInfo = await this.ctx.service.activity.getNpmInfo(`@wukong/${name}`);
  18.             await this.ctx.service.activity.getPkg(name, npmInfo.data.latest.version);
  19.             break;
  20.         }
  21.       }
  22.       this.ctx.body = {
  23.         code: ErrorCode.success,
  24.         success: true,
  25.         msg: Message.success
  26.       } as IRes;
  27.     } catch (e) {
  28.       this.ctx.body = {
  29.         code: ErrorCode.fail,
  30.         success: false,
  31.         msg: e.toString()
  32.       } as IRes;
  33.     }
  34.   }
  35. }


通过这段代码可以发现 ：


  • 首先我们使用了@controller声明这个类为控制器类，同时使用了@post定义了请求方式；

  • 通过@inject()去容器中取出对应的实例注入到当前属性中；

  • 通过@provide()定义当前的对象需要被绑定到对应容器中。


这段代码可以明显感受loC机制给开发带来的便利性，当我们想要使用某个实例时，容器会自动将对象实例化交给用户，使得我们的代码具备很好的解耦性。


上述代码中还做了request解析，当请求头里的gitlab-token为定义的activity-components，就会继续往后执行后续逻辑，这里ctx.headers写法其实就是引用了koa的context.request.headers的简写，通过token验证，保证了只有组件库代码提交时才会触发。


3.4 npm包远程拉取+解压缩


当完成gitlab hooks监听后，如何实现从npm私服拉取对应的组件库，并将里面的内容解析出来呢，此处通过查阅npm私服的指令，发现可以通过npm view [<@scope>/][@] [[.]...]来查询当前的私服托管的npm包具体信息，基于此，我们在本地的终端检索了下@wukong/activity-components包的信息，得到如下信息：


  1. npm view @wukong/activity-components
  2. ***
  3.  {
  4.    host: 'wk-site-npm-test.vivo.xyz',
  5.    pathname: '/@wukong%2factivity-components',
  6.    path: '/@wukong%2factivity-components',
  7.    ***
  8.    dist:{
  9.      "integrity": "sha512-aaJssqDQfSmwQ1Gonp5FnNvD6TBXZWqsSns3zAncmN97+G9i0QId28KnGWtGe9JugXxhC54AwoT88O2HYCYuHg==",
  10.     "shasum": "ff09a0554d66e837697f896c37688662327e4105",
  11.     "tarball": "****-npm-test.vivo.xyz/@wukong%2factivity-components/-/activity-components-1.0.0.tgz"
  12.    }，
  13.    ***
  14. }


分析npm view的返回信息，抓到npm包的源地址:dist.tarball:[http://****.xyz/@wukongactivity-components-1.0.0.tgz]，通过这个地址可以直接将对应的tgz源文件下载到本地。


但是这个地址并不能彻底解决掉问题，因为随着公共组件库的不断迭代，npm包的版本是在不断变化的，如何才能获取到npm包的版本呢?带着这个问题，我们去了npm私服network抓到一个接口:[http://****.xyz/-/verdaccio/sidebar/@wukong/activity-components]；通过查询这个接口的返回，得到了以下信息：

接口返回可以看到latest.version返回了最新的版本信息，通过这两个接口，就可以在Node层直接下载到最新的组件库，接下来看下插件管理平台侧的代码：


  1. service/activity.ts
  2. ***
  3. // 包存放的根目录，所有的插件加载后统一放在这里
  4. const rootPath = path.resolve('temp');
  5.   /**
  6.    * 获取某个插件的最新版本
  7.    * @param {string} fullName 插件全名（带前缀：@wukong/wk-api）
  8.    */
  9.   async getNpmInfo(fullName) {
  10.     const { registry } = this.ctx.service.activity;
  11.     // 远程获取@wukong/activity-components的最新版本信息
  12.     const npmInfo = await this.ctx.curl(`${registry}/-/verdaccio/sidebar/${fullName}`, {
  13.       dataType: 'json',
  14.     });

  16.     if (npmInfo.status !== 200) {
  17.       throw new Error(`[error]: 获取${fullName}版本信息失败`);
  18.     }
  19.     return npmInfo;
  20.   }
  21.     /**
  22.    * 远程下载npm包
  23.    * @param {string} name 插件名（不带前缀：activity-components）
  24.    * @param {string} tgzName `${name}-${version}.tgz`;
  25.    * @param {string} tgzPath path.join(rootPath, name, tgzName);
  26.    */
  27. async download(name,tgzName,tgzPath){
  28.  const pkgName = `@wukong/${name}`;
  29.     const pathname = path.join(rootPath, name);
  30.     // 远程下载文件
  31.     const response = await this.ctx.curl(`${this.registry}/${pkgName}/-/${tgzName}`);
  32.     if (response.status !== 200) {
  33.       throw new Error(`download ${tgzName}加载失败`);
  34.     }
  35.     // 确定文件夹是否存在
  36.     fse.existsSync(pathname);
  37.     // 清空文件夹
  38.     fse.emptyDirSync(pathname);
  39.     await new Promise((resolve, reject) => {
  40.       const stream = fse.createWriteStream(tgzPath);
  41.       stream.write(response.data, (err) => {
  42.         err ? reject(err) : resolve();
  43.       });
  44.     });
  45. }


getNpmInfo方法主要是获取组件的版本信息，download主要是组件的下载操作，最后完成对应的流文件注入，这两个方法执行完毕之后，我们会生成以下的目录结构：



  1. |-server
  2. |--src
  3. |---app
  4. |----controller
  5. |----***
  6. |--temp
  7. |---activity-components
  8. |----activity-compoponents-1.0.6.tgz


在temp文件下获取到了组件库的压缩包，但是到这一步是不够的，我们需要解压缩这个压缩包，并且要获取到对应的源码。带着这个问题，找到一个targz的npm包，首先看下官方给的demo：


  1. var targz = require('targz');
  2. // decompress files from tar.gz archive
  3. targz.decompress({
  4.     src: 'path_to_compressed file',
  5.     dest: 'path_to_extract'
  6. }, function(err){
  7.     if(err) {
  8.         console.log(err);
  9.     } else {
  10.         console.log("Done!");
  11.     }
  12. });


官方暴露的decomporess方法即可完成targz包的解压缩，得到对应的组件库源代码，对于压缩包，我们使用fs的remove方法移除即可：


  1. |-server
  2. |--src
  3. |---app
  4. |----controller
  5. |----***
  6. |--temp
  7. |---activity-components
  8. |----doc
  9. |----src
  10. |----tool
  11. |----****


到这一步我们就完成了整体的npm包拉取和解压缩操作，获取到了组件库的源代码，此时我们需要读取到源代码中doc通过3.2步骤生成的json文件，并将json内容返回给web侧。


3.5 ast转译


背景：在对建站平台的基础组件库wk-base-ui引入时，由于组件库的index.js不是自动生成的，里面会出现冗余代码以及注释的情况，这样会导致插件管理平台根据入口文件无法精准的获取到所有的组件地址，为了解决这个问题，我们使用@babel/parser、@babel/traverse解析wk-base-ui组件库的入口文件。


思路：找到组件库npm包入口文件，根据入口文件中的export语句，找到组件库中每个Vue组件的路径，并置换成相对npm包根目录的地址。


组件库的一般组织形式:


形式1：（activity-components为例）


package.json中有main指定入口：


  1. // @wukong/activity-components/package.json
  2. {
  3.     "name": "@wukong/activity-components",
  4.     "description": "活动公共组件库",
  5.     "version": "1.0.6",
  6.     "main": "src/main.js", // main 指定npm包入口
  7.     ...
  8. }


入口文件：


  1. // src/main.js
  2. export { default as CommonDialog } from './base-components/CommonDialog/index.vue'
  3. export { default as Login } from './base-components/Login/index.vue'
  4. export { default as ScrollReach } from './base-components/ScrollReach/index.vue'
  5. ...


形式2：（wk-base-ui为例）package.json中无main指定入口，根目录下入口文件为index.js：


  1. // @wukong/wk-base-ui/index.js
  2. export { default as inputSlider } from './base/InputSlider.vue'
  3. export { default as inputNumber } from './base/InputNumber.vue'
  4. export { default as inputText } from './base/InputText.vue'
  5. /*export { default as colorGroup } from './base/colorGroup.vue'*/
  6. ...


以上两种形式最终都指向形如export {default as xxx } from './xxx/../xxx.vue'的文件。为了从入口js文件中准确找到export组件名和文件路径，这里使用利用@babel/parser和@babel/traverse来解析，如下：


  1. // documnet.ts

  3. // 通过@babel/parser解析入口js文件内容exportData得到抽象语法树ast
  4. const ast = parse(exportData, {
  5.   sourceType: 'module',
  6. });

  8. const pathList: any[] = [];

  10. // 通过@babel/traverse遍历ast，得到每条export语句中的组件名name和对应的vue文件路径
  11. traverse(ast, {
  12.   ExportSpecifier: {
  13.     enter(path, state) {
  14.       console.log('start processing ExportSpecifier!');
  15.       // do something
  16.       pathList.push({
  17.         path: path.parent.source.value, // 组件导出路径 eg: from './xxx/../xxx.vue' 这里的./xxx/../xxx.vue
  18.         name: path.node.exported.name, // 组件导出名 eg: export { default as xxx} 这里的xxx
  19.       });
  20.     },
  21.     exit(path, state) {
  22.       console.log('end processing ExportSpecifier!');
  23.       // do something
  24.     },
  25.   },
  26. });


这里最终得到的pathList如下：


  1. [
  2.   { name: "inputSlider", path: "./base/InputSlider.vue" },
  3.   { name: "inputNumber", path: "./base/InputNumber.vue" },
  4.   { name: "inputText", path: "./base/InputText.vue" },
  5.   ...
  6. ]


后续再遍历pathList数组，利用@vivo/vue-doc的singleVueDocSync解析出每个组件的md文档，完成对组件库的文档解析工作。代码示例如下：


  1. pathList.forEach((item) => {
  2.   const vuePath = path.join(jsDirname, item.path); // 输入路径
  3.   const mdPath = path.join(outputDir, item.path).replace(/\.vue$/, '.md');// 输出路径
  4.   try {
  5.     singleVueDocSync(vuePath, {
  6.       outputType: 'md', // 输入类型 md
  7.       outputPath: mdPath, // 输出路径
  8.     });
  9.     // ...省略
  10.   } catch (error) {
  11.     // todo 如果遇到@vivo/vue-doc处理不了的组件，暂时跳过。（或者生成一个空的md文件）
  12.   }
  13. });


最终效果如下图，在项目目录下生成doc文件夹：


至此，完成了解析组件库并生成对应md文档的全部流程。


最后我们可以看一下平台实现的效果：

四、小结


4.1思考过程


在做建站的组件开发过程中，首先构思公共组件库，解决开发之间组件沉淀的问题，随着组件增多，发现产品和运营对于沉淀的公共组件也有诉求，对于此开始了插件管理平台的架构设计，解决公共组件对产品的黑盒问题，同时也可以很好的赋能悟空活动中台生态，对于别的业务方也可以快速的接入vivo悟空活动中台组件，提升自身的开发效率。


4.2 现状和未来计划


目前一共抽离了公共组件26个，累计覆盖建站组件超过12个，接入的业务方2个，累计提升人效大于20人天。但是还是不够的，后续我们需要完成组件的自动化测试，继续丰富组件库，增加动效区域，更好的赋能上下游。

作者：vivo互联网前端团队-Fang Liangliang

阅读(531) | 评论(0) | 转发(0) |
0

上一篇：vivo 服务端监控架构设计与实践

下一篇：基于 Kafka 的实时数仓在搜索的实践应用

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6