前端开发中减少重复劳动,提升效率的方法

内容来源:2018 年 6 月 23 日,饿了么前端技术专家徐辛承在“饿了么技术沙龙・第27弹 【前端专场】”进行《中后台场景下的工具化和平台化实践》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发布。

阅读字数:3099 | 8分钟阅读

摘要

前端领域有两大永恒的主题——性能和效率,中后台场景下对性能的要求不高,但对效率的要求是极致的。在这种背景下,我们在业务开发过程中孵化出了几个工具和平台,分享下我们的设计和思考。

获取嘉宾演讲视频及PPT,扫一扫下方二维码即可。

背景

在任何技术领域中性能和效率一直都备受关注。中后台项目中由于移动化办公尚未普及,目前大多数还是以PC页面的形式展现 ,用户使用平台的目的也较为单一,仅是为了工作。

这种场景下性能一般不是关注的重点,加载时间即使是2、3秒影响也不会太大,且PC的硬件设备和网络状况相对移动端要好很多,只要稍加注意性能就不会有什么问题。

但是在效率(工程效率)上却要有极致的提升,因为中台场景中页面会非常多。就以供应链场景举例,我们的供应链下有N个系统,首先是采购系统,采购完后存储到仓库,仓库中有仓储系统,之后是配送和营销。这整一套流程需要有一个数据平台来支撑,无论是正向还是逆向,因此页面数据会非常多,对开发效率有很高的要求。

工具和平台的实践

开发效率方面一般能想到的优化就是减少重复劳动。前端开发阶段可以通过一些工具或平台减少开发上的重复,也可以从整个项目链路来看有哪些可优化点,比如联调、测试、线上维护等方面。针对这两点,我们主要做了3个实践:IDE插件、“Mock”平台、模板仓库平台。

IDE插件

一般要提高在IDE中编写代码的效率采用的都是IDE本身提供的snippets的方式,但是这些snippets存储在本地,无法进行共享。插件的形式无疑能很好的解决问题,由于我们的场景使用的是Element UI,所以专门定制了一个插件pickman。与大多数拥有类似功能的插件一样,它可以将特定的代码片段插入到IDE中。另外为了减少查看文档的耗时,我们提供了更方便的文档查看方式,在选中标签之后按下cmd+1(mac)就会打开文档中相应的页面并展示在IDE中。

“Mock”平台

在没有真实数据接口的情况下若要调试数据最常见的方法是mock.js,通过一些规则随机生成一些相应的数据。

大致流程如上。先经过设计评审出一份接口设计文档,之后前端根据文档mock数据,开发过程中与后端合作校正协议,后端使用postman之类的工具修正接口,最后进入真实数据联调阶段。

不过上面的过程中存在几个问题。

一是如何维护mock数据。比如针对某个页面生成mock数据的文件夹路径如何存放,如果存放在js同级目录下,上线的时候就要剔除掉这些json数据,如果是统一文件夹存储,那么就要针对代码中请求路径进行替换。另一方面是无法保持实时更新,导致数据陈旧无人维护,又要重新生成新的mock数据。

二是如何约束接口文档。通常我们是将文档规则写在wiki中,不过这样很难保证真实性,比如字段数据类型是否正确、request和response顺序问题。

三是如何避免脏代码注入

前两个问题已被开源平台Rap2很好解决了,该平台主要分为用户和API两个维度的管理。每个用户会被分配到不同团队,目的是为了权限控制,防止API滥用;API管理方面有API仓库进行api分类。

至于脏代码注入其实可以通过proxy方式来解决,比如在webpack的proxy中写入dev环境下对应的domain。另外还有一个问题没有提到,就是如何迁移wiki,因为文档都是在wiki中,如果要迁移已维护好的文档成本会相对较。为此我们做了一个迁移工具,它会遍历整个wiki的dom进行归类,然后取出所有的数据转化成json,最后将json导入到平台中。

字段重复

平台中API管理部分的字段重复度很高,以供货商采购的流程来说,其中有个skuinfo(商品数据)的概念,这个skuinfo的规则是固定的,比如ID必须为9位数字、number为string等等。但是由于每个API的管理相对孤立,不同的人写的API的生成规则就有可能不同,这造成的问题一方面是不规范,另一方面增加了重复劳动。

所以我们引入了实体的概念,每个实体可以是一个对象或属性。它细粒度到每个value的维度,不仅实体之间可以相互引用,API和实体间也可以相互引用。这样就可以将所有重复的工作抽象成一个实体,另外还可以对实体部分进行权限控制,这两个措施本质上是让每个字段有准确、唯一的生成规则。

新的问题

纵观整个开发流程,其实中后台场景下QA测试的时候关注的是数据流转的正确性,并不关注UI和UE的细节。其次由于我们的项目成立时间较短QA人员不足任务又比较紧张,所以初期是以黑盒测试为主。这种情况下为了保证质量,就需要引入自动化测试机制,主要有三个阶段模拟输入、自动编写测试case、验证输出。

基于上面的考量,可以发现我们需要的不仅是单纯的Mock平台,而是mock加自动化测试的辅助平台。目前我们所能做的是给自动化测试提供输入,因为mock阶段和自动化测试阶段本质上有相似性。Test case环节要由QA维护,我们这边能做的有限。验证输出环节则可以做一些相应工作,本身mock的正向流程就是从规则生成数据,而验证环节恰好相反是以数据验证是否符合规则。

未来规划

在未来规范上我们首先要实现的是验证输出的部分,其次是丰富mock规则以及可视化,还会做一个更新检测工具来验证此次更新是否符合mock平台的维护文档,最后是关于业务流程的测试。

模板仓库平台

要想快速开发大量的1.0项目,大家通常可能会使用脚手架工具。但是这里存在几个问题,首先脚手架工具无法做到快速预览,其次对于这类工具来说页面就是最小维度,无法再细分到组件片段层面,最后它主要面对的是开发者,而中后台项目中UI和UE的规则又相对比较统一,原型图和最终页面十分相似,这样的话直接通过拖拽组件形成页面和实际编写模板代码其实并无太多差别。

基于以上原因我们构建一个模板仓库平台,通过可视化的组件拼装,快速生成页面代码。目前已经支持了模板上传和在线预览。

之后我们可能还会新增命令行工具,便于开发者使用。也会逐步摆脱对组件库和框架的依赖,实现完全的零依赖。

经验总结

工程化

个人理解工程化所需要实现的目标有4个,可用性、可维护性、稳定性、提升效率。若想在前端工程化方面有更多的探索,效率提升这块是重点,它基于模块化、规范化、自动化来实现。具体实践中我们会从架构层面做模块化和规范化,自动化事务由平台负责,使用工具减少开发过程中的耗时。

技术项目

在开发之前找出当前业务中的痛点,确定要解决的问题。开发过程中制定渐进增强的计划,逐步完善项目切勿想一蹴而就,为了缩短开发周期可以由团队中相对高阶的同学对项目进行模块拆分,分配给其他同学。开发完成后一定要进行快速的迭代和响应,认为时机成熟就可以去做推广,并使用可量化的数据来展现成果。

以上为今天的分享内容,谢谢大家!

IT大咖说 | 关于版权

本文由“IT大咖说(ID:itdakashuo)”原创,转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信:ITDKS10(备注:投稿),茉莉小姐姐会及时与您联系!

感谢您对IT大咖说的热心支持!

原文发布于微信公众号 - IT大咖说(itdakashuo)

原文发表时间:2018-08-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

从编程小白到全栈开发:理解前后端

上一篇文章中让你安装的软件安装好了没?那些操作都尝试做了一遍没?没有的话,赶紧回头去再看一遍文章,动起手来吧。学编程,如果说有捷径的话,实操就是最好的捷径!

22940
来自专栏张红林的专栏

常见机器学习效果调优思路整理

实际工作中,对模型和算法的效果如果不满意,需要进行调优,但往往不知道该怎么下手,本文是一篇博客的学习笔记,分享给大家。

83700
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙|Code Review也有潜规则

Code Review也有潜规则 活动时间:2017年3月30日 QQ群视频交流 活动介绍:TMQ在线沙龙第十八期分享 本次分享的主题是:Code Review...

27570
来自专栏云计算D1net

如何应对混合云网络的复杂性?

在经过一番艰苦努力的之后,我最终调试解决了一个非常棘手的混合云网络问题。 虚拟私有云(VPC)提供了一个包含免费虚拟机(VM)使用时间的培训项目,学生可以跟随一...

36160
来自专栏EAWorld

微服务模式系列之二:微服务架构

译者评论: 微服务架构大家已经耳熟能详,但是我认为这篇文章最有价值的是这段: 但这类解决方案中也存在着以下弊端: 开发者必须应对创建分布式系统所产生的额外的复杂...

35450
来自专栏JAVA高级架构

亿级用户下的新浪微博平台架构

12620
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|性能测试

性能测试 活动时间:2017年8月29日 QQ群视频交流 活动介绍:TMQ在线沙龙第二十八期分享 本次分享的主题是:性能测试 共有152位测试小伙伴参加活动,在...

27080
来自专栏编程

Android程序员的救赎之路(二)

上回说到要举一个例子来说明,在看例子前,我们先来说说问题,有时我们会在工作中遇到很难的专业问题,如设计一个业务算法或用OpenGL做3D特效,这类的问题虽然不简...

20280
来自专栏FreeBuf

HTTP/2性能更好,但是安全性又如何呢?

根据W3Techs的调查数据显示,目前大约有11%的网站使用了新型的互联网通信协议–HTTP/2,而在一年之前,其占比只有2.3%。 没错,这个新的协议的确可以...

224100
来自专栏JAVA烂猪皮

微服务写的最全的一篇文章

今年有人提出了2018年微服务将疯狂至死,可见微服务的争论从未停止过。在这我将自己对微服务的理解整理了一下,希望对大家有所帮助。

44120

扫码关注云+社区

领取腾讯云代金券