整個2020年,感覺每天都在解除新知識,嘗試新技術(shù),視野得到了極大地開闊,代碼質(zhì)量也在顯著提高.

概述

總結(jié)下來,這一年主要參與了三個產(chǎn)品線的開發(fā). IOT占比50%, 3D占比35% , HTA占比15% ,與19年相比, 今年大部分時間都集中在物聯(lián)網(wǎng)通信, 3D渲染和音視頻流解析方向攻堅,傳統(tǒng)的前端業(yè)務(wù)寫的很少.

甘特圖

IOT業(yè)務(wù)線

物聯(lián)網(wǎng)項目算上今年已經(jīng)持續(xù)迭代17個月了,是比較成功的一個項目.目前進(jìn)度正常,代碼質(zhì)量也較好,風(fēng)險可控

• 1月份,針對疫情期間緊急上線測溫終端,當(dāng)時情況緊急,又在遠(yuǎn)程辦公,人手也不夠,所以UI和產(chǎn)品都是前端實現(xiàn)的,測試通過之后1.0版本就快速交付了,現(xiàn)在復(fù)盤看來,由開發(fā)做產(chǎn)品設(shè)計,還是有很多問題的
• 3月中旬UI和產(chǎn)品介入,迭代開發(fā)2.0版本,又參考競品,增加了許多功能, 由于在1.0版本過DVT量產(chǎn)時發(fā)現(xiàn)四家供應(yīng)商研發(fā)理念不同,產(chǎn)品掛載的傳感器十分多樣,且內(nèi)置服務(wù)器支持的通信協(xié)議也千差萬別,這就造成了想通過一套代碼兼容所有設(shè)備有很大難度,所以借迭代2.0的機會,對整個框架重構(gòu),把核心模塊,功能模塊全部解耦,改成按需組裝和配置項控制,類似于echarts那種模式,把復(fù)雜性全部留給框架,只暴露文檔配置接口出來,動態(tài)生成路由表和功能頁面,這使得擴(kuò)展性,靈活性和可維護(hù)性都有了很大的提升,現(xiàn)在來看這項工作十分必要,8月份產(chǎn)品版本裂變,增加了大量設(shè)備類型,版端整體重構(gòu),而前端只是增加了很多配置文件,其余代碼幾乎沒動,到12月發(fā)版測試,可維護(hù)性依然不錯.
• 6-8月,工作重點在于傾聽客戶反饋,優(yōu)化功能,主要有三點:一是針對保密性要求,開發(fā)加解密插件(簡單可行的加密算法,兼容 js,C++兩端),二是針對設(shè)備存儲空間有限,上傳圖片過大,開發(fā)批量轉(zhuǎn)碼壓縮功能(多線程解決計算量過大,會阻塞UI問題,大圖片壓縮, bmp,png批量轉(zhuǎn)碼成jpg),三是針對臨時訪客注冊繁瑣,開發(fā)終端和PC端一鍵注冊功能,可以拿起設(shè)備刷臉注冊(難點:內(nèi)網(wǎng)環(huán)境下前端在沒有轉(zhuǎn)碼服務(wù)器情況下解析視頻碼流,內(nèi)網(wǎng)環(huán)境下CA證書自簽名)
• 9月,內(nèi)網(wǎng)終端管理項目,這個項目的初衷是解決內(nèi)網(wǎng)中多臺終端的協(xié)同管理問題,將局域網(wǎng)內(nèi)多臺終端上傳的數(shù)據(jù),清洗去重之后匯總到大屏上,這也是高管會觀摩項目,1.0使用vue + koa + mongodb快速開發(fā)部署,兩周時間打通所有流程, 觀摩完畢后整體移交給終端安卓團(tuán)隊,2.0版本用安卓技術(shù)進(jìn)行了重構(gòu),1.0也不再維護(hù), 前端徹底退出

• 11月,針對考勤需求,測試跑通了釘釘前后端內(nèi)網(wǎng)同步流程,可以將考勤數(shù)據(jù)同步到釘釘服務(wù)器,在釘釘軟件中可以查看考勤記錄(難點在于開發(fā)環(huán)境的搭建:內(nèi)網(wǎng)無法與釘釘服務(wù)器直連，內(nèi)網(wǎng)穿透與釘釘服務(wù)器直連，拉取釘釘api到開發(fā)機, 目前全部流程已經(jīng)跑通,只是聽說投策團(tuán)隊那邊ROI測算不達(dá)標(biāo),大概率這個項目是流產(chǎn)了)

  
  
  開發(fā)環(huán)境拓?fù)涫疽鈭D

• 12月,在優(yōu)化大文件上傳協(xié)議,找了很多方案,各有優(yōu)劣吧,考慮到硬件瓶頸,分析了一下解壓解密的空間復(fù)雜度,發(fā)現(xiàn)像PC端那樣做切片斷點續(xù)傳意義不大,所以最后就選擇多開一個websocket進(jìn)程直接傳輸,經(jīng)過測試,一般幾千張圖還是能順利傳輸?shù)?/p>
  

  前端大文件傳輸

3D業(yè)務(wù)線

3D項目雖然有產(chǎn)品產(chǎn)出,但是進(jìn)度嚴(yán)重滯后,數(shù)次大的變更造成代碼質(zhì)量比較一般,成本高昂.前期雖有小問題,但是整體進(jìn)度正常,也趕在的9月底關(guān)鍵節(jié)點提測,這時發(fā)現(xiàn)IOS上存在大量的兼容性問題,各端尺寸適配問題,以及部分3D函數(shù)在IOS上失效,嘗試修復(fù)失敗最終更改技術(shù)方案,以及這中間甲方需求不斷變更,使得代碼組織方式也無法確定下來,導(dǎo)致風(fēng)險在成倍的增加,最終難產(chǎn).

• 4月 勾圖項目立項,開始對項目需求和開發(fā)難度沒有清晰的認(rèn)識,認(rèn)為只是一個簡單的圖形編輯器,用前端圖形框架可以輕松實現(xiàn).對于沒有過成功經(jīng)驗的項目過于樂觀,沒有足夠的邊界意識和風(fēng)險意識.為后期的失敗埋下伏筆.
• 5月 完成了前端對CAD文件解析,但在圖形界面開發(fā)階段受阻,近一個月時間攻堅失敗,到6月初項目組獲得集團(tuán)其他子公司類似項目的代碼,經(jīng)過五天評估,得出開發(fā)難度遠(yuǎn)遠(yuǎn)大于自身技術(shù)儲備,項目陷入僵局,左右為難.
• 7月,經(jīng)過評估,決定用小步迭代的方式,換個切入點從新開發(fā),逐步積累3D開發(fā)經(jīng)驗.
• 整個7-11月,一是完成空間渲染與極坐標(biāo)渲染開發(fā),二是完成vue與three進(jìn)行事件交互功能(觀察者模式，把這兩個抽象類用指針關(guān)聯(lián)起來，使得他們的實例對象可以通信，解決了前端框架和三維框架的通信問題)三是針對黑屏,重復(fù)渲染,場景清理不徹底等問題,進(jìn)行性能優(yōu)化(單例模式,只在初始化渲染一次,但在切換場景會有數(shù)據(jù)殘留,手工控制上一幀),四是場景標(biāo)注渲染開發(fā)(從最開始的純手工標(biāo)，到后來借助函數(shù)半自動生成，再到后來變換象限自動生成，到最后適配各端兼容性，大屏\Pad\手機共用一套代碼，極大地提高了標(biāo)注效率),五是場景多角度相機開發(fā),多二維碼進(jìn)入保證最佳角度.六是針對手機系統(tǒng),pad,pc端和大屏進(jìn)行樣式適配,六是各種安卓,IOS設(shè)備兼容和大屏兼容性(點擊事件異常,顯示異常),不斷地嘗試、探索與失敗中摸索過程中,增加了許多奇怪的知識，掌握了很多奇技淫巧,這也是前端工程獨特的風(fēng)景線.當(dāng)然中間有過大量的嘗試與返工,在這里由衷的感謝公司的包容，愿意給我們時間來試錯與成長.

尤其是標(biāo)注問題,剛開始摸不到門路,饒了大量的彎路,索性結(jié)局是好的,最后總結(jié)出一套自動化標(biāo)注方法，大屏\Pad\多型號手機復(fù)用一套代碼,當(dāng)然這個歷程是非常艱辛的

標(biāo)注問題的解決

HTA

(涉密,略....)

展望

• Vue3.0+TS已經(jīng)發(fā)布,明年新項目中進(jìn)行工程嘗試,跟上變革的節(jié)奏
• 持續(xù)關(guān)注前端音視頻技術(shù)和先進(jìn)的通信技術(shù)(webRTC,Quic)
• 數(shù)據(jù)結(jié)構(gòu)與設(shè)計模式，增強業(yè)務(wù)水平
• 盡量用大公司的開源框架解決移動端兼容性和適配問題,不能過多牽扯精力