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

相关文章
|
Web App开发 JavaScript 前端开发
低代码系列——js沙箱设计(一)
由于自己参与过低代码平台开发,所以希望能把我自己开发低代码中遇到的问题或者一些设计思路进行总结汇总,这是开始写的第一篇,也是比较基础的一篇,关于低代码平台的介绍会放在介绍篇章,这篇就不做过多介绍。
548 0
|
6月前
|
API 开发工具 开发者
HarmonyOS NEXT实战:拨打电话
本课程介绍如何在HarmonyOS SDK中使用Telephony Kit实现拨打电话功能。通过CallPhoneDemoPage示例,讲解如何输入电话号码并调用makeCall接口拨号,涉及call模块的使用及设备通话能力检测。
7860 0
|
算法 前端开发 JavaScript
JS - 前端生成 UUID 四种方法
JS - 前端生成 UUID 四种方法
6534 0
|
JavaScript API C++
Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名规范 其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范 1.
18092 0
|
3月前
|
人工智能 Java API
Java与大模型集成实战:构建智能Java应用的新范式
随着大型语言模型(LLM)的API化,将其强大的自然语言处理能力集成到现有Java应用中已成为提升应用智能水平的关键路径。本文旨在为Java开发者提供一份实用的集成指南。我们将深入探讨如何使用Spring Boot 3框架,通过HTTP客户端与OpenAI GPT(或兼容API)进行高效、安全的交互。内容涵盖项目依赖配置、异步非阻塞的API调用、请求与响应的结构化处理、异常管理以及一些面向生产环境的最佳实践,并附带完整的代码示例,助您快速将AI能力融入Java生态。
478 12
|
机器学习/深度学习 自然语言处理 搜索推荐
1024——通义·灵码的功能以应用以及实践案例测评
本文档介绍了阿里巴巴旗下的通义·灵码大模型产品,涵盖其核心功能如文本生成、语义理解、情感分析、多模态处理等,并展示了在智能客服、金融智能投顾、电商推荐系统等多个领域的应用实例。通过具体代码示例,演示了如何调用通义·灵码的API实现自动回复、投资建议、新闻摘要生成等功能。最后,通过实际案例解析,评估了通义·灵码的新功能及其优化建议,包括安全性改进和代码优化策略。
1328 0
1024——通义·灵码的功能以应用以及实践案例测评
|
机器学习/深度学习 并行计算 算法
r语言中对LASSO回归,Ridge岭回归和弹性网络Elastic Net模型实现(上)
r语言中对LASSO回归,Ridge岭回归和弹性网络Elastic Net模型实现
|
存储 缓存 前端开发
全面解析:前端超大文件下载的关键技巧与优化策略
全面解析:前端超大文件下载的关键技巧与优化策略
766 1
全面解析:前端超大文件下载的关键技巧与优化策略
|
程序员 定位技术 iOS开发
iOS开发:解决App进入后台,倒计时(定时器)不能正常计时的问题
在iOS开发过程中,尤其是发送短信验证码的需求是非常常见的需求,这就涉及到倒计时的使用,但是如果正在倒计时操作,app进入后台运行,倒计时会出现什么效果呢?那么本篇博文就来了解一下相关知识吧。
1639 1
iOS开发:解决App进入后台,倒计时(定时器)不能正常计时的问题
|
JavaScript 前端开发
video设置播放时间点及常用属性和方法
video设置播放时间点及常用属性和方法