我的前端转行之路—2020,乘风破浪

整个2020年,感觉每天都在解除新知识,尝试新技术,视野得到了极大地开阔,代码质量也在显著提高.

概述

总结下来,这一年主要参与了三个产品线的开发. IOT占比50%, 3D占比35% , HTA占比15% ,与19年相比, 今年大部分时间都集中在物联网通信, 3D渲染和音视频流解析方向攻坚,传统的前端业务写的很少.

甘特图

IOT业务线

物联网项目算上今年已经持续迭代17个月了,是比较成功的一个项目.目前进度正常,代码质量也较好,风险可控

• 1月份,针对疫情期间紧急上线测温终端,当时情况紧急,又在远程办公,人手也不够,所以UI和产品都是前端实现的,测试通过之后1.0版本就快速交付了,现在复盘看来,由开发做产品设计,还是有很多问题的
• 3月中旬UI和产品介入,迭代开发2.0版本,又参考竞品,增加了许多功能, 由于在1.0版本过DVT量产时发现四家供应商研发理念不同,产品挂载的传感器十分多样,且内置服务器支持的通信协议也千差万别,这就造成了想通过一套代码兼容所有设备有很大难度,所以借迭代2.0的机会,对整个框架重构,把核心模块,功能模块全部解耦,改成按需组装和配置项控制,类似于echarts那种模式,把复杂性全部留给框架,只暴露文档配置接口出来,动态生成路由表和功能页面,这使得扩展性,灵活性和可维护性都有了很大的提升,现在来看这项工作十分必要,8月份产品版本裂变,增加了大量设备类型,版端整体重构,而前端只是增加了很多配置文件,其余代码几乎没动,到12月发版测试,可维护性依然不错.
• 6-8月,工作重点在于倾听客户反馈,优化功能,主要有三点:一是针对保密性要求,开发加解密插件(简单可行的加密算法,兼容 js,C++两端),二是针对设备存储空间有限,上传图片过大,开发批量转码压缩功能(多线程解决计算量过大,会阻塞UI问题,大图片压缩, bmp,png批量转码成jpg),三是针对临时访客注册繁琐,开发终端和PC端一键注册功能,可以拿起设备刷脸注册(难点:内网环境下前端在没有转码服务器情况下解析视频码流,内网环境下CA证书自签名)
• 9月,内网终端管理项目,这个项目的初衷是解决内网中多台终端的协同管理问题,将局域网内多台终端上传的数据,清洗去重之后汇总到大屏上,这也是高管会观摩项目,1.0使用vue + koa + mongodb快速开发部署,两周时间打通所有流程, 观摩完毕后整体移交给终端安卓团队,2.0版本用安卓技术进行了重构,1.0也不再维护, 前端彻底退出

• 11月,针对考勤需求,测试跑通了钉钉前后端内网同步流程,可以将考勤数据同步到钉钉服务器,在钉钉软件中可以查看考勤记录(难点在于开发环境的搭建:内网无法与钉钉服务器直连，内网穿透与钉钉服务器直连，拉取钉钉api到开发机, 目前全部流程已经跑通,只是听说投策团队那边ROI测算不达标,大概率这个项目是流产了)

  
  
  

  开发环境拓扑示意图

• 12月,在优化大文件上传协议,找了很多方案,各有优劣吧,考虑到硬件瓶颈,分析了一下解压解密的空间复杂度,发现像PC端那样做切片断点续传意义不大,所以最后就选择多开一个websocket进程直接传输,经过测试,一般几千张图还是能顺利传输的

  
  
  

  前端大文件传输

3D业务线

3D项目虽然有产品产出,但是进度严重滞后,数次大的变更造成代码质量比较一般,成本高昂.前期虽有小问题,但是整体进度正常,也赶在的9月底关键节点提测,这时发现IOS上存在大量的兼容性问题,各端尺寸适配问题,以及部分3D函数在IOS上失效,尝试修复失败最终更改技术方案,以及这中间甲方需求不断变更,使得代码组织方式也无法确定下来,导致风险在成倍的增加,最终难产.

• 4月 勾图项目立项,开始对项目需求和开发难度没有清晰的认识,认为只是一个简单的图形编辑器,用前端图形框架可以轻松实现.对于没有过成功经验的项目过于乐观,没有足够的边界意识和风险意识.为后期的失败埋下伏笔.
• 5月 完成了前端对CAD文件解析,但在图形界面开发阶段受阻,近一个月时间攻坚失败,到6月初项目组获得集团其他子公司类似项目的代码,经过五天评估,得出开发难度远远大于自身技术储备,项目陷入僵局,左右为难.
• 7月,经过评估,决定用小步迭代的方式,换个切入点从新开发,逐步积累3D开发经验.
• 整个7-11月,一是完成空间渲染与极坐标渲染开发,二是完成vue与three进行事件交互功能(观察者模式，把这两个抽象类用指针关联起来，使得他们的实例对象可以通信，解决了前端框架和三维框架的通信问题)三是针对黑屏,重复渲染,场景清理不彻底等问题,进行性能优化(单例模式,只在初始化渲染一次,但在切换场景会有数据残留,手工控制上一帧),四是场景标注渲染开发(从最开始的纯手工标，到后来借助函数半自动生成，再到后来变换象限自动生成，到最后适配各端兼容性，大屏\Pad\手机共用一套代码，极大地提高了标注效率),五是场景多角度相机开发,多二维码进入保证最佳角度.六是针对手机系统,pad,pc端和大屏进行样式适配,六是各种安卓,IOS设备兼容和大屏兼容性(点击事件异常,显示异常),不断地尝试、探索与失败中摸索过程中,增加了许多奇怪的知识，掌握了很多奇技淫巧,这也是前端工程独特的风景线.当然中间有过大量的尝试与返工,在这里由衷的感谢公司的包容，愿意给我们时间来试错与成长.

尤其是标注问题,刚开始摸不到门路,饶了大量的弯路,索性结局是好的,最后总结出一套自动化标注方法，大屏\Pad\多型号手机复用一套代码,当然这个历程是非常艰辛的

标注问题的解决

HTA

(涉密,略....)

展望

• Vue3.0+TS已经发布,明年新项目中进行工程尝试,跟上变革的节奏
• 持续关注前端音视频技术和先进的通信技术(webRTC,Quic)
• 数据结构与设计模式，增强业务水平
• 尽量用大公司的开源框架解决移动端兼容性和适配问题,不能过多牵扯精力