ABF平台设计(五):物料中心/脚手架

简介: 广义上的物料是指与产品生产有关的所有物品,但对于前端开发来讲,物料(或前端物料)就是指组成页面并能够使其能够正常运转所需的元素(如一个按钮、一组按钮等),这里将这些元素统称为前端物料。

概念

广义上的物料是指与产品生产有关的所有物品,但对于前端开发来讲,物料(或前端物料)就是指组成页面并能够使其能够正常运转所需的元素(如一个按钮、一组按钮等),这里将这些元素统称为前端物料。

前端物料不是简单的前端展示元素,而是内置了特定的UI展示、约定的行为动作、个性的业务属性、...,正是因为有了这些与业务特色紧密关联的内容,才使得开发内容看上去更像是积木的拼接,而无需大量代码(甚至无需代码)就完成业务诉求,这样不仅前端专业人员可以进行前端开发,也能使非前端人员可以进行“前端开发”。

背景

近几年,集团前端领域的基础组件库已经稳定在 Fusion 和 AntD,虽然底层的基础依赖都统一了,但随着业务快速发展,在基础组件上又产生了一批业务组件、业务区块,甚至业务模版,这些内容有时候简单地抽离一下业务元素,就可以变成横向共用的内容,但信息过于分散,也不利于共用内容的流通。

业务大批需要线上化,前端业务需求增长很快,即使前端人员高负荷投入,也会经常出现资源短缺的情况。

目标

:将所有页面组成元素,聚合在一起管理,便于物料之间的相互流通、使用。

通用:物料跟业务是一种弱链接的关系,不同业务可以通过简单配置接入使用

便捷:业务相关人员可以在不同程度上进行前端工程的开发:

前端开发人员(CODING、LOWCODE):物料使用框架、物料组合能力、复杂的前端能力

后端开发人员( LOWCODE):使用物料框架、使用物料组合、简单的前端能力

业务运营人员(NOCODE):物料搭建出业务能力

技术方案

一张图看懂全部

image.png

从整体架构图,可以看出,物料中心提供三种能力:

  • 组合转化:基础元素整合为物料的能力
  • 规则约束:物料协议约束物料的生产规则,物料协议以集团物料协议为依据,方便后续物料无缝跟集团物料中心打通共享
  • 信息存储:信息集中存储

物料生产流程

根据物料开发方式将其分为两类:源码物料、搭建物料,但无论那类物料,都有一个共同的生命周期(从生产到使用),下面就介绍一下物料的生产流程:

image.png

整个物料生产流程分为三个阶段:

  • 创建物料:在物料中心注册前端物料
  • 生产物料:利用源码或搭建方式完成物料的生产
  • 发布物料:将物料发布在物料中心,供业务相关人员使用

image.png

1. 创建物料

将物料注册在物料中心,对其进行管理,更好地提供给使用方使用

注册物料需要填写物料的基本信息,然后将物料注册在物料中心:访问ABF物料中心,点击新建物料,进入到物料注册页,填写基本信息完成注册

在物料注册页,完成后,会自动进入到物料详情页,根据物料生产方式进行相应的开发:源码开发物料或搭建物料。

2. 生产物料

根据注册时填写的生产方式,注册完物料,会进入到物料对应的详情,然后对物料进行开发或搭建。

  • 源码开发

源码方式生产的物料,在详情给出进入仓库的入口开发,点击开发会进入到组件的 git仓库

源码物料开发需要使用脚手架开发。

开发者在开发物料功能的同时需要对物料一些规范进行编写,生成符合规范的meta.json(物料描述schema)。

物料开发完成,本地运行都可以了,同时 meta.json 也按照约定书写完成,就可以发布物料了,发布物料的过程跟发布正常组件一样,提交代码,进行代码review,打包编译等一系列的CI过后,物料源码会以umd格式被部署到CDN上,这样源码物料的开发就完成了。

源码物料在本地开发完成,并部署到CDN,只是完成了物料的具体生产和更新上传,最终要使用,还需要在物料中心进行发布。

  • 可视化搭建

可视化搭建生产的物料,通过详情页的 搭建(或 新增) 进入到搭建中心,生产物料。

在搭建中心利用现有的物料对其进行搭建,搭建完成后,可以先预览,然后保存,保存后就搭建完了物料。与源码物料类似,搭建并保存后,只是完成物料的具体生产和更新上传,最终要使用,还需要在物料中心进行发布。

3. 发布物料

物料的发布不区分物料的生产方式,物料开发者都可以通过物料详情(源码物料或搭建物料)的迭代管理,进入迭代列表对物料进行发布。

发布后的物料就可以在搭建中心看到并使用了。

4. 物料类型

物料目前分两类:一种是基础物料即antD物料组件,主要是通用化物料,如表格,表单,按钮,弹框,等等。另一种是业务物料,主要是满足业务定制化需求的物料,如流程标准化物料,精细化运营平台物料,打标平台物料等等,满足特定业务场景使用。

同时我们还提供了精品物料的概念,根据物料的使用情况和业务通用化能力,为物料进行分级推荐,方便用户的使用。

最后在物料的使用原则上我们遵循多用基础物料,少用定制化物料的原则,尽量发挥物料组件的通用化能力,做到更多的业务场景下使用。

image.png

后话

目前团队的开发模式已经从组件页面开发逐步向定制化物料的开发进行转变,专业前端开发者关注点从业务转变到物料上,同时运营、BD、后端等非专业开发者亦可介入进来,配合低代码搭建的方式快速支持各种业务。物料中心作为一个物料的管理平台,真正的价值是通过“物料”的收敛和管理,为LowCode和NoCode等开发方式提供了基础砖块,为传统开发方式的转变提供支撑。

相关文章
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的果蔬种植销售一体化服务平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的果蔬种植销售一体化服务平台的详细设计和实现(源码+lw+部署文档+讲解等)
56 6
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
38 0
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的制造装备物联及生产管理ERP系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的制造装备物联及生产管理ERP系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的模具制造企业订单跟踪管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的模具制造企业订单跟踪管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线房屋租赁和电子签约系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线房屋租赁和电子签约系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的新能源汽车在线租赁管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的新能源汽车在线租赁管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
移动开发 供应链 前端开发
基于jeecgboot的ERP部分演示功能发布
基于jeecgboot的ERP部分演示功能发布
120 0
|
6月前
基于jeecgboot的flowable流程综合会签功能演示平台已经发布
基于jeecgboot的flowable流程综合会签功能演示平台已经发布
47 0
|
SQL JSON JavaScript
16分布式电商项目 - 模板管理功能(一)
16分布式电商项目 - 模板管理功能(一)
94 0
|
JSON 数据库 数据格式
17分布式电商项目 - 模板管理功能(二)
17分布式电商项目 - 模板管理功能(二)
58 0
下一篇
无影云桌面