阅读 86

商业管理系统前端开发的效率提升

本文着眼于业务开发,分享一种开发思维。

随着互联网不断发展,公司、部门、项目的规模越来越大,项目管理的复杂度也随之增高。提高内部管理效率,成为众多企业的强烈呼声。

CRM系统作为客户信息收集、管理、分析和利用的重要信息系统,提高开发和使用效率非常有必要。

转转商业团队CRM系统,经过一年多的开发和使用后,总结一套行之有效的前端开发策略。

这些策略包括

前后端接口规范

在前后端分离的今天,不同于刀耕火种时代的一张张页面,前端开发们构造的前端工程更像一只精美的容器,注入有效的接口数据后,就会呈现 优异的交互表现。因此接口交互对前端工程至关重要。前后台的数据交流,也是消耗开发精力比较多的地方。

制定接口规范的好处:

商业团队这边制定规范主要有:

JSON作为数据交流主要方式,编码UTF-8

  • 2.CORS作为跨域的主要方式

  • 3.POST请求入参带入所有接口文档要求字段(不论是否为空)

  • 4.GET请求入参数组以字符串","分隔

  • 5.日期时间使用毫秒级别的字符串格式的时间戳

  • 6.接口统一输出格式限制,包括,code,message,data三部分,code是本次处理的状态码,正常的进入前端业务逻辑,否则直接抛出 message提示,data是业务所需数据

  • 7.所有的数组要求拥有唯一标识,没有以id辨别(主要用于React循环创造react dom元素)

  • ......

规范还有很多和业务细节相关的,根据业务不同制定的也不同。

  • 例如

    • 表单交互(单选,多选,全选,级联等)

    • 表格逻辑(选行,选列,排序等),

    • 分页器逻辑(跳页,改页面容量,本页搜索,全页搜索)

这些都是比较常见,又很重要和容易出错的地方。通过良好的规范和默契,这些逻辑都能抽取公共的方法和组件,方便复用,开发效率自然得到提升。

架构逻辑和业务逻辑分离

对于一个大型CRM管理系统,业务不断发展迭代,代码量不断上升,如何维护已有逻辑和高效开发新业务是一个重要的问题。如果不能做到逻辑区分清晰,会导致开发业务时,逻辑复杂, 容易遗漏和出错。改动维护公共逻辑时,又有高度耦合的业务代码,维护成本很高。所以在项目开发之初,就需要充分时间设计,并且不断优化区分

例子:之前商业CRM系统的权限获取是由业务页面处理,每次创建新的页面都要复制、引用 权限逻辑,有的页面一开始不需要权限管理,后续的业务发展中又需要注入权限,导致二次开发,调试,需要新的测试和上线资源,维护成本高昂。经过优化改造后,我们将权限系统和菜单系统相结合,每次菜单变动后,自动获取新的权限并注入到当前的业务页面中。在以后的业务开发里,需要 权限直接从props里获取,不需要其他代码引用,干净清爽,有效降低了权限方面的bug数量。

如图

一般的公共逻辑

  • 菜单逻辑(获取,展示)

  • 路由逻辑

  • 权限注入

  • 全局变量管理

  • 埋点,错误监控

  • cookie、缓存管理

  • ......

不同的业务有各自的特点,需要提取的公共逻辑各不相同。这些逻辑需要充分考虑,避免在业务开发中改动。如果已经除了划分不清的问题,也尽量 抽出时间进行改造,长远来看,这些付出是值得的

建立模板

现在的后台管理系统中,大多使用了各种UI交互框架,比如antd design,element ui,iview等。这些框架都能提供组件上的交互支持,像下图中的 输入框input,主要的数据展示table,及分页器pagination等,使用UI框架可以迅速搭建页面,开发页面的过程变成了组装组件的过程。商业FE团队在日常业务开发中, 逐渐发现大多数组合都是相同的,比如这个列表页面,由头部表单,中部表格,分页器及操作弹窗组成,每个业务列表都是由这三部分组成的。业务的开发就是将各种组件组合起来, 系统调试的过程。这种开发很多都是重复的,毫无营养的。

如果进行分解

经过一段时间的尝试和总结,商业前端设计了开发模板。相对于一般的组件和模块,模板有更高的集成,把大量常用逻辑、组件集合在一个模板,做到开箱 即用。

把平时对常用代码的反复复制粘贴,集中到几个常见的模板里,有好用的公共方法也可以引入模板。避免每个页面开发逻辑不同,开发者习惯导致代码风格 混乱

对于一般后台系统的业务开发而言,可以简单的分成几个大类,例如,表单,搜索+表格,详情页等。

  • 6个常用模板

    • 表单

    • 列表

    • 详情

    • 图表

    • 数据面板

    • 弹窗

结合上面提到的接口规范,业务开发只需要更换一次api,稍作调整即可。在能用到前端模板的地方,开发时间得到了很大压缩。方便通用逻辑和通用样式的引入。

商业CRM的FE和RD的比例,一度攀升至1:5。对于常规的业务开发,FE可以有效复用逻辑,提高交付效率

在启用FE模板以后,商业FE的交付速度是有明显提升的

为了有效管理模板,实现模板的跨系统使用,我们开发了一个简单有效的脚手架工具,可以很方便的下载模板。

总结

和使用的技术无关,更多的是对开发流程的优化,良好的工作流程和项目管理,可以有效提高开发效率。