物料中心

什么是物料？

可按照规范进行标准化构建，并且可以在不同项目，不同团队，不同成员之间复用的任意资源。我们把这类资源统称为物料。

背景

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

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

解决思路

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

整体架构

参考图片

物料分类

物料分为组件（component）、区块（block）、页面（page)和项目（scaffold）四种类型：

• 组件（component）：功能比较确定同时复杂度较高，例如用户选择器、地址选择器等，项目中只需要引入对应的 npm 包即可，项目不关心也无法修改组件内部的代码，只能通过组件定义的 props 控制。
  
• 区块（block）：一般是一个 UI 模块，使用区块时会将区块代码拷贝到项目代码中，项目里可以对区块代码进行任何改动，因此区块后续的升级也不会对项目有任何影响，这是区块跟业务组件的最大区别。
  
• 页面（page): 一般是一个完整的页面模板。与区块一样，项目里可以对生成的页面代码进行任何改动，页面模板的后续升级不会对项目产生任何影响。

• 项目模板（scaffold）：即项目脚手架，用于项目初始化。
  

  组件库设计

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

• 组件分级

  1. 基础UI组件
  2. 复合组件
  3. 业务组件
• 组件边界
  1. 越界操作
  2. 副作用
  3. 侵入性
  4. 循环依赖

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

如图中表示，越往下业务侵入性越高，抽象程度越低。越往上复用程度和纯粹性越高，同时抽象程度也越高。
组件库设计的关键就是组件的边界限制，每个组件都是非常独立的且不可再拆分的最小单元。首先是禁止组件的越界操作，只让它处理份内的事情，对外部的事情不能染指半分；第二是副作用，禁止（尽可能的少）有副作用，如果了解过函数式编程，就会知道副作用的各种优缺点；第三是侵入性，禁止纯粹的木偶组件（组件库中的每个组件都是纯粹的木偶组件）对业务的侵入性，因为侵入性越高复用率越低，组件库对于其他人也就越难用；最后是禁止组件内部的循环依赖。

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

项目地址

git地址：git@git.17usoft.com:cxgc-zhuketong/materialCenter.git
http://git.17usoft.com/cxgc-zhuketong/materialCenter

整体流程

参考图片