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等开发方式提供了基础砖块,为传统开发方式的转变提供支撑。

相关文章
|
消息中间件 存储 NoSQL
深入Redis消息队列:Pub/Sub和Stream的对决【redis第六部分】
深入Redis消息队列:Pub/Sub和Stream的对决【redis第六部分】
1520 0
|
12月前
|
人工智能 前端开发 安全
告别重复劳动:用 AI 代码助手重构你的组件库
告别重复劳动:用 AI 代码助手重构你的组件库
740 114
|
12月前
|
编解码 UED 开发者
UI&UE设计规范
本文档为移动端开发人员结合十年经验与UI/UE实践总结的设计规范,涵盖设计原则、字体、配色、布局及组件使用标准,旨在统一产品视觉语言,提升用户体验与团队协作效率,适用于产品经理、设计师及开发者。
4833 0
UI&UE设计规范
|
人工智能 运维 前端开发
从极速复制“死了么”APP,看AI编程时代的技术选型
本文以爆款 App“死了么”为例,讲述在AI时代如何通过 Supabase 等 BaaS 服务实现极简全栈开发。借助AI编程工具与无服务器架构,开发者可快速完成从创意到上线的全流程,降低后端复杂度,聚焦核心业务逻辑,实现低成本、高效率的 MVP 落地。
|
API 开发工具 开发者
HarmonyOS NEXT实战:拨打电话
本课程介绍如何在HarmonyOS SDK中使用Telephony Kit实现拨打电话功能。通过CallPhoneDemoPage示例,讲解如何输入电话号码并调用makeCall接口拨号,涉及call模块的使用及设备通话能力检测。
8249 0
|
11月前
|
人工智能 自然语言处理 API
外呼agent产品推荐,五大主流平台能力横向评估(2025年12月更新)
在客户服务成本攀升与体验要求提升的双重驱动下,AI Agent正重塑智能客服体系。本文从交互能力、Agent成熟度、外呼性能等五大维度,深度解析外呼agent产品:瓴羊Quick Service、天润融通、智齿科技、竹间智能、容联七陌五款主流系统,结合行业场景与选型需求,为企业提供客观选型参考,助力实现降本增效与服务升级。
|
调度 数据库 Python
Python异步编程入门:asyncio让并发变得更简单
Python异步编程入门:asyncio让并发变得更简单
585 5
|
机器学习/深度学习 缓存 自然语言处理
11_文本总结实战:用LLM浓缩长文章
在信息爆炸的时代,面对海量的长文本内容,如何高效地提取核心信息成为一项关键技能。文本摘要作为自然语言处理(NLP)中的重要任务,能够将冗长的文本压缩为保留核心信息的简短摘要,极大地提高了信息获取和处理的效率。随着大语言模型(LLM)技术的快速发展,特别是基于Transformer架构的模型如BART的出现,文本摘要技术取得了突破性进展。
974 0
|
人工智能 自然语言处理 前端开发
💻2024 年值得一试的 8 个开发者工具💡
在本文中,我们精选了8款开发人员必备的高效工具,包括Webcrumbs、Pieces.app、Warp、Raycast等。这些工具涵盖了从前端插件生成、代码片段管理到多语言界面构建等多种功能,帮助开发人员简化工作流程、提高生产力。无论您是经验丰富的开发者,还是刚入行的新手,这些工具都将为您的开发过程带来效率提升和便利。探索这些工具,让您的开发工作更加轻松高效!
1721 66