# 关于物料

# 写在前面

在中后台系统开发中，基于组件进行前端页面开发已经是业界的共识了。然而基础组件已经很难完全满足我们的业务需求。实际项目开发中往往包含大量重复的业务场景。这些业务场景很多都是大同小异，有些是有一定业务逻辑的组件，有些是由基础组件和业务组件组合成的列表、模块，还有一些是页面布局、视觉规范、项目工程化等。

如何复用这些业务场景，提升前端迭代及上下游的协作效率，降低中后台系统的开发成本呢？通过项目实践结合社区方案，我们提出建设前端物料体系，重新定义和统一前端的开发标准，实现基于物料资源的渐进式开发，提供海量高质量的物料来解决这些问题。

物料（Material）即组成一个前端项目的不同单位，是可按照规范进行标准化构建，并且可以在不同项目、不同团队、不同成员之间复用的开发资源。根据抽象粒度的不同，我们将物料从小到大分为组件（Component）、区块（Block）、页面（Page）和模板（Scaffold）。

物料体系是前端重要的生产力要素。在基于物料体系的开发中，我们使用项目物料来初始化前端工程、提供最佳实践、解决工程问题，再使用区块和组件像搭积木一样快速搭建页面。

物料分为组件（Component）、区块（Block）、页面（Page）和模板（Scaffold）四种类型：

组件：组件是一个高内聚的封装，有单独的开发周期，功能比较确定同时复杂度较高。使用时只需在项目中只引入对应的 npm 包即可，项目不关心也无法修改组件内部的代码，只能通过传递组件定义的属性（Props）进行控制。
区块：区块是对组件进行组合、嵌套，形成的更高阶的前端模块，可以简单地把区块理解为「用组件组成的代码片段」。通常区块内部还包含事件处理、状态管理、数据请求等逻辑。使用区块时会将区块代码拷贝到项目代码中，项目里可以对区块代码进行任何改动。因此区块后续的升级也不会对项目有任何影响，这是区块跟业务组件的最大区别。
页面：页面是对区块进行组合，形成的功能集合，通常是一个完整的页面模板。使用页面时首先需要进行必需的模板配置，之后会自动在 views 文件夹下生成页面代码。与区块一样，项目里可以对生成的页面代码进行任何改动，页面模板的后续升级不会对项目产生任何影响。
模板：即项目脚手架，整合了基础框架、组件库、区块及页面等各种资源，用于项目初始化。

我们对不同粒度的物料进行整合形成 物料源（Material Collection)，把物料源的组织模式称为 物料项目（Material Project），把提供物料实时预览、下载、使用、和源代码查看的平台称为 物料中心（Material Center）。

在物料开发环节，首先需要规范物料源的开发流程以及配套的开发工具进行保障和提效。

我们通过 Next CLI 提供物料的开发与管理，负责物料的创建，生成和数据管理，并可以对物料源中的物料进行消费。