【JS】可视化中后台系统搭建解决方案--麻鸡

一、产品介绍

大家好,我是来自云集前端团队的一员,先介绍我们的产品系统:麻鸡

为什么叫麻鸡?因为我们都在云集里养鸡!
表单列表天天写,没提升又没技术产出?组件库生态早已成熟,砸了再造?

麻鸡是一个基于vue框架搭建中后台页面的解决方案,已经在云集落地应用了一年多,承接需求近200个页面,综合提效70%。

麻鸡的优势:

  • 上手快 - 拖拽组件配置,响应式预览
  • 开发快 - 熟练操作10分钟一个页面,完善的开发测试流程,免构建急速上线需求
  • 迭代快 - 迭代需求二次开发更快响应,小迭代java包都构建完就已经发布完成
  • 接入快 - saas平台化,所有老旧页面都可以接入
  • 配套全 - 内置前端全套服务:埋点、监控、权限、灰度应有尽有

产品演示

image

应用效果
【JS】可视化中后台系统搭建解决方案--麻鸡

二、产品背景:

随着业务的发展,特别是2019年业务需求急速膨胀,越来越多的中后台系统,50+个后台系统,中后台系统需求占用前端团队70%的工作量,占用人员比例高达60%,中后台系统如何快速响应需求,才是业务方、产品经理、项目经理最关注的。

中后台系统需求复杂度较低,至少90%的页面可以形成标准化,大量人员投入在重复性的工作上,以致于成长空间窄小,也无法发挥开发人员实际能力。

产品现状

自2019.4立项,因为产品定位反复试错,直到2019.10投入生产,赋能于前端、后端、以及有一定编程基础的产品测试同学。适配表单页、列表页、详情页3种页面类型,包含38个功能组件,至今在云集内部应用麻鸡配置上线的页面总计近200个。

产品定位

  • 赋能** -> 由核心团队研发,能够给公司内包括前端、后端、测试等研发人员使用,通过简单的图形化配置和少量的代码,不仅直接实现业务需求,还提供权限、环境、灰度、埋点、监控等能力。
  • 优化流程** -> 集开发、调试、测试、发布全链路一体化低代码开发平台,不限定工程项目,接入旧项目简单快速


麻鸡早期设计由产品、UED、后端角色使用,将前端资源从中后台系统释放,组件配置上以运营视角设计。中途越做越不对路,麻鸡成了转嫁工作量的工具,并不能做到真正的提效。

复盘后我们将麻鸡明确定位为主要服务于前端和后端同学,在后续的组件设计上渐渐引入的代码开发、模板语句等,配置页面扩展性直接上升。


三、麻鸡架构设计

1.架构设计

【JS】可视化中后台系统搭建解决方案--麻鸡

2.工作流程

【JS】可视化中后台系统搭建解决方案--麻鸡

前端技术日新月异,需求的迭代让我们无暇重构,iframe就成了最直接的跨技术栈融合项目的方式,无论是jsp、vue1、vue、react都能简单快速地接入。

3.组件生态

【JS】可视化中后台系统搭建解决方案--麻鸡

4.数据协议设计

设计上组件数据只有两个核心字段 type(组件类型)、id(组件id),其他属性都可以归类为业务属性,属于组件内部的业务配置字段,渲染引擎不需要在意他们,只管正确地渲染组件,填充数据。

【JS】可视化中后台系统搭建解决方案--麻鸡

在vuex中的设计则是 floorList(主页面楼层id),idModule(组件配置数据)

以离散的方式管理组件数据,将组件嵌套关系归类为业务配置,组件内可以更自由地操作

【JS】可视化中后台系统搭建解决方案--麻鸡

渲染组件只需要使用通过moduleId,组件内自行匹配配置数据渲染成目标组件。

【JS】可视化中后台系统搭建解决方案--麻鸡

5.代码注入功能设计

      代码注入功能提高了组件生态的自由度,根据组件生命周期或事件插入执行事件,目前支持componentCreate(组件创建)、componentWillDestroy(组件销毁前)、beforeSend(接口请求前建)、afterSend(接口请求完成)、valueChange(表单数据改变)五种场景已经满足日常开发使用,后续如需扩展也很方便。

【JS】可视化中后台系统搭建解决方案--麻鸡

  • 为了让网页编辑器中编写代码的代发体验与ide中保持一致,这里使用了VSCode MonacoEditor插件。自定义的function存入json中是string格式,需要经过正则处理去头去尾放入Function才能够使用,通过bind保持this指向当前组件的vue实例。

四、痛点及解决方案

1.多余重复请求

多个select组件配置同一个接口请求的外部数据源,页面初始化会同时执行多次重复接口

解决方案:

在不改变原本的组件的交互和配置数据结构的前提下,来实现全局的重复接口合并,很容易联想到在统一封装的http方法内实现

【JS】可视化中后台系统搭建解决方案--麻鸡

2.配置数据的历史包袱

      每当我们看回几个月前的代码,是不是都会有新的想法。更好的思路,或者产品需求变更,需要对原方案重新设计。对于配置化的页面而言,历史包袱是个核心问题。

解决方案:

      页面初始化对JSON存入vuex时,存入数据时对所有组件都会执行一个historyDataUpdate方法,针对有需要的组件旧数据进行同步操作,减少对组件内部兼容处理,只对数据维度操作更新

五、Q&A

Q1: 为什么不生成代码?

A1: 生成代码的形式对旧项目结构有侵入性,中后台系统迭代需求多余新页面需求,生成代码的形式不方便二次配置,而且我司中后台系统中还有远古的jsp项目,使用iframe能够快速接入

Q2: 别人大厂就是玩p2c、d2c,还同时兼容vue、react的区别在哪里?

A2: 搭建系统开发投入成本高,别人大厂体量大,同类型的需求有那么大的量级,有量投入产出比才合理。大多数企业开发内部使用的搭建系统可以明确的限制边界,框架体系、规范视觉、规范接口、规范交互都是能够大大降低配置复杂度,否则得不偿失。

六、总结

Low code 和 no code 是近两年前端最火之一,我们在打磨过程中走过很多弯路,总结下来开发这类型项目有两个核心问题:
用户是谁?满足什么业务场景?
      我们不是转移复杂度、转移工作量,而是以如何为团队赋能为核心出发点,在特定的业务场景下,搭建系统才能发挥最大的价值,软件行业生态繁多,为了做到通用、商业化必然提高配置的复杂度,但是当需求被特定领域限制下,复杂度大大降低,我们能够通过规范来限制变化。

作者:云集前端团队 https://github.com/yjfe/maji
链接:https://juejin.cn/post/690603...
来源:掘金、github
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以上是 【JS】可视化中后台系统搭建解决方案--麻鸡 的全部内容, 来源链接: utcz.com/a/89834.html

回到顶部