在中后台系统开发中,我们早已习惯了基于 fusion、antd 等基础组件搭建我们的页面。然而这些基础组件很难完全满足我们的业务需求,实际项目开发中往往包含大量重复的业务场景。这些业务场景很多都是大同小异的,有些是有一定业务逻辑的组件(员工选择器、表单等),另一些是由基础组件和业务组件组合成的列表、模块,还有一些是页面布局、视觉规范、项目工程化等。如何复用这些业务场景,降低中后台系统开发的成本呢?ICE 团队通过与社区一起共建物料体系,提供海量高质量的物料来解决这些问题。

物料即组成一个前端项目的不同单位,根据抽象粒度的不同,我们将物料从小到大分为组件(component)、区块(block)和模板(scaffold)。在基于物料体系的开发中,我们使用项目物料来初始化前端工程,提供最佳实践,解决工程问题,再使用区块和组件像搭积木一样快速搭建页面。

# 概念解释

物料分为组件(component)、区块(block)和项目(scaffold)三种类型:

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

# 物料开发工具

我们通过 AppWorks CLI(NPM 包名 @appworks/cli)这个工具提供物料的开发与管理,其本身不耦合任何前端框架或工程体系,这意味着基于 AppWorks CLI 可以开发 React/Vue/Angular 等各种前端体系的物料。AppWorks CLI 具有以下特性:

  • 支持不同前端框架和工程的物料开发
  • 支持物料的初始化以及管理能力
  • 支持物料数据生成和校验
  • 支持将物料托管到 fusion.desion
  • 支持自定义物料模板能力