前端物料中台建设

我在上一篇的文章大BU级别的"先后端分离"实践中提出了咱们当前的前端团队中存在一些问题以及解决思路，而且在其中详细地写出了统一视图服务的实现思路和收益。这篇文章主要写关于前端迭代及上下游协做效率咱们是如何解决的。

背景

咱们的目的是提高前端迭代及上下游的协做效率，咱们从四个出发点开始讲起：

团队负责的业务愈来愈读，如何提升资源、组件及代码的复用率，提高总体研发效率；提高项目的上下游协做效率，涉及到从UE到UI到FE再到QA的整个流程，这须要很强的推进力和足够的说服力；提高人效比，一人顶三人，提高项目中前端开发人员的人效比，让前端作的更快、更多、更好；最后是将总体方法进行梳理，把提效的这部分能力应用在web、wap、小程序中，实施中台化。

解决思路

首先，建设前端物料体系，从新定义和统一前端的开发标准，建设前端物料资源体系，其中包括设计和单元测试等资源；第二，实行工具化管理，完善工程体系，统一前端的开发流程和技术栈，保证资源复用率；最后也是最重要的就是渐进式开发，由于它决定了物料完成以后能不能达到最佳的复用率。

总体架构

问：什么是物料？

答：可按照 规范进行 标准化构建，而且能够在不一样项目，不一样团队，不一样成员之间 复用的 任意资源。咱们把这类资源统称为 物料。

参与物料资源生产和消费的对象共有四个：开发者、使用者、设计者、产品/运营。为此，物料中台提供了标准化的物料资源，其中包括项目的基础框架、组件库、区块和模板。基础框架是项目的样板框架也就是俗称的boilerplate，组件库是基于部门内设计同窗提出的Union Design设计规范开发前端组件库，它同时支持web和小程序两个宿主环境。区块能够简单理解为组件的拼装集合，它比组件库提供了更上层的业务封装能力，可是这也让它变得没有组件库那么地纯粹；模板就是各类站点的样式模板，其中整合了前面所提到的基础框架+组件库+区块等各类资源。让开发者能够最大限度地减小工做量。

图中的中间部分是可被支持的宿主环境，包括Web端、移动端及小程序。Web端能够支持TypeScript+Vue/React框架模式进行开发，移动端支持VW/REM布局方式，同时也支持Hybrid模式进行开发，具体文章请参考端动态化方案详细设计。另外因为业务缘由，小程序目前支持微信小程序和智能小程序两种。

最下面是物料中台提供的工程化体系，提供了CLI工具和GUI工具。CLI工具用于在前端项目开发中，让FE能够便捷地对物料进行生成和消费；此外物料中台还提供了GUI工具，让物料的消费方能够经过拖控件的方式，对项目进行快速地原型落地和模板设计，里面具体的细节请等待后续的文章更新。

咱们和设计同窗一块儿推出了物料相关的设计资源，其中就包括Union Design设计规范。为了下降物料在项目中的落地阻力，物料中台还提供了完善学习资源，包括文档、教程，也会按期组织培训和分享。

最后，在总体上实现了物料中台的功能。

组件库设计

咱们在进行组件库设计是主要考虑了两个方面：

• 组件分级

  1. 基础UI组件
  2. 复合组件
  3. 业务组件

• 组件边界

  1. 越界操做
  2. 反作用
  3. 侵入性
  4. 循环依赖

首先对组件进行分级，根据对业务的侵入性和纯粹性（复用程度）为分界点，拆分为三级，以下图：

如图中表示，越往下业务侵入性越高，抽象程度越低。越往上复用程度和纯粹性越高，同时抽象程度也越高。

组件库设计的关键就是组件的边界限制，每一个组件都是很是独立的且不可再拆分的最小单元。首先是禁止组件的越界操做，只让它处理分内的事情，对外部的事情不能染指半分；第二是反作用，禁止（尽量的少）有反作用，若是了解过函数式编程，就会知道反作用的各类优缺点；第三是侵入性，禁止纯粹的木偶组件（组件库中的每一个组件都是纯粹的木偶组件）对业务的侵入性，由于侵入性越高复用率越低，组件库对于其余人也就越难用；最后是禁止组件内部的循环依赖。

最终实现

最终实现中，总体分为四层，最下面是技术实现，往上是依赖的设计资源，再往上就是组件库提供的五种基础组件，包括基本操做、表单、视图、导航和数据处理等。最上层则是接入的业务方。自下而上地完成了整个前端业务方向的组件库方案。

上下游协做

对上下游协做效率优化的流程中最核心的就是效率提高和物料复用。

• 效率提高

  1. 交互设计
  2. 单元测试
  3. 回归成本

• 物料复用

  1. 物料共享
  2. 生成和消费
  3. 业务迁移
  4. 渐进式开发

总体流程以下图：

在总体协做流程中主要包含两条操做流程，物料管理和物料使用。

物料管理的功能是给物料开发者使用的，负责物料对不一样平台的支持，建立，生成和列表管理，能够在管理列表中对本身上传物料进行消费。

对于物料的消费，提供物料实时预览、下载、使用、和源代码查看功能。使用物料时会自动生成CLI命令，在终端中执行命令就能够在项目中使用此物料。

另外，也能够将项目中的某些功能抽离为物料，供其余项目使用。以此实现可持续迭代和渐进式开发。这样就完成物料资源在不一样团队，不一样项目，不一样成员之间的共享和复用，提高前端的总体协做效率。

总体收益

内部接入6个项目；在公司内部NPM中开源了2个组件库；在BU内部共推出了4款产品，分别是Union Design设计规范、@baidu/union-design、@baidu/union-design-wechat和marble-cli/GUI工具；

在代码复用率方面，项目基础框架为46.1%，业务逻辑为21.87%；全新开发一个项目迭代周期缩短23.8%，迭代的项目缩短21.4%；

最后

有任何疑问请联系做者