本文着眼于业务开发,分享一种开发思维。
随着互联网不断发展,公司、部门、项目的规模越来越大,项目管理的复杂度也随之增高。提高内部管理效率,成为众多企业的强烈呼声。
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的交付速度是有明显提升的
为了有效管理模板,实现模板的跨系统使用,我们开发了一个简单有效的脚手架工具,可以很方便的下载模板。
总结
和使用的技术无关,更多的是对开发流程的优化,良好的工作流程和项目管理,可以有效提高开发效率。