bigo-frontend / blog

👨🏻‍💻👩🏻‍💻 bigo前端技术博客
https://juejin.cn/user/4450420286057022/posts
MIT License
129 stars 9 forks source link

【bigo】前端配置系统pear #8

Open yeyeye0525 opened 4 years ago

yeyeye0525 commented 4 years ago

前言

现在市面上比较流行前端搭建,通过可视化拖拽,快速生成页面,配置简单的数据源以及交互事件,就能快速交付业务。

但是前端搭建业务落地成本高,需要维护大量业务组件,并且基于其render引擎,很难二次编码,定制开发。故对于大型、复杂前端页面,前端搭建不是很好的解决方案。

另外纯手工开发前端页面时,对于多变的产品需求,每次都要走代码变更,测试回归,发布上线。费时费力,效能低下,并且有发布风险。

bigo属于出海业务,前端页面需要适配多语言,之前多语言是静态json打包到前端项目,多语言会经常修改,也导致频繁发布。

综上,亟需一个简单的前端配置系统,对前端内容进行配置化,包括但不限于:多语言、图片、文案、链接、时间、活动开关、业务逻辑等。前端开发基于配置进行逻辑对接,内容由产品、运营同学维护,分工明确,形成需求闭环,实现一键变更。

项目命名

pear:bigo中文名百果园,常被人戏称卖水果的(脑壳痛),我们内部也喜欢水果命名系统,pear:梨,与键值对(key-value pair)的pair发音相同

使用流程

业务开发阶段

00

需求变更阶段

01

实现方案

业务前端视角研发流程:

1.基于业务需求编写schema配置 2.维护json的value 3.下发json数据 4.业务代码对接json数据

基于json-schema描述json配置

为了让生成的json便于维护,我们基于UForm,以jsonSchema生成表单模板,具体请点击传送门,而不是直接编辑json文件。 image

schema渲染

image

json下发

image

业务实践示例,请移步:【bigo】记一次页面配置化的实践

结言

基于pear,我们就可以灵活覆盖各种业务场景,对于频繁的非逻辑变更就赋能给业务人员,同时提供了友好的json编辑体验。

pear是一个小而美的配置化系统,已开源前端配置系统,欢迎大家关注bigo前端,交流前端技术,https://github.com/bigo-frontend/blog/issues

LeungKaMing commented 3 years ago

俏锋大佬牛逼~