【前端技術分享】前端開發效率管理

掌門教育前端技術分享會第一期已於1.23號落幕，如下爲大咖講師們現場演講的整理稿，感謝你們的支持：

講師介紹

吳留坡，前端技術專家，來自千尋位置網業務中臺前端團隊
團隊平常工做內容，主要對公司門戶、電商、營銷、分銷等業務提供前端支持，業務覆蓋 PC、H五、App、小程序、NodeJS 等各類技術場景。

如下爲吳留坡同窗精彩演講的部份內容：

1、開發流程規範介紹

首先我分享一下，一個優秀的軟件開發、交付流程

1. 需求設計：咱們的需求通常來自運營同窗在實際產品運營中收集的問題，另外也可能會來自公司高層的直接需求；提交需求後，產品經理會進行需求論證，確認需求後再進入產品設計、交互設計、UED設計環節
2. 開發階段：開發同窗在本地完成開發、集成後，提交測試，測試經過後，代碼進入預發或者仿真環境，這個時候的數據可能已是真實數據了，不過機器環境與生產環境徹底隔離，在預發環境測試同窗驗收經過後，代碼纔會正式發佈生產
3. 數據訂正：互聯網應用每每採用小步快跑式開發，生產數據結構會常常面臨變更，好比咱們對項目進行了部分重構，或者老的代碼進行了拆分，新頁面上線替換老頁面需求作重定向等等，這些都須要咱們及時作數據訂正
4. 數據分析：數據來源類型不少，好比PV、UV這些頁面數據，好比用戶在頁面上的點擊事件、熱區圖這些用戶行爲數據，好比商品售賣信息這些業務數據等等；這些都要求咱們要在代碼層面就作好數據的收集工做

2、千尋CICD的發展歷程

之前：之前咱們開發主要的交付方式是，經過shell腳本，進行代碼的構建、打包，再壓縮上傳到資源服務器；以後進行代碼發佈的時候，測試環境或者生產環境，下載資源代碼，再進行解壓、啓動，這些環節裏面，不少都是經過手動方式來作的

如今：通過兩年多的CICD發展，咱們如今徹底實現了CICD流程的徹底自動化；代碼提交後，咱們就會自動拉取進行編譯，若是編譯、構建失敗，會主動發郵件、發釘釘進行提醒，這裏都是經過Jenkins來實現的；經過構建後，根據項目的類別來進行分發，純靜態資源會分發到OSS，進行CDN加速，若是是服務器端程序，咱們會啓動容器化部署，這裏的實現則是經過k8s來作的，用戶的請求用nginx來作轉發；目前咱們全部的前端項目都是經過OSS + k8s + nginx來發布、部署的

3、定位問題

生產環境問題定位、處理，咱們團隊目前主要從下面四個地方來作排查：

1. 用戶端異常錯誤收集：錯誤的預先捕獲，好比瀏覽器程序報錯後，能夠觸發咱們的消息機器人來通知咱們，咱們內部管這個工具叫「先知」
2. 業務數據鏈路異常收集：咱們團隊如今採用區域塊渲染，經過業務鏈路錯誤的捕獲，咱們能夠很快就知道究竟是前端template有問題，仍是後端數據有問題
3. 用戶足跡：目前用戶在咱們系統正常使用的生命週期，相關的信息咱們均可以收集下來，好比用戶從百度搜索訪問過來，點擊、使用了咱們哪裏的服務；這裏咱們用到了不少工具，好比神策埋點能夠幫咱們記錄一部分信息，咱們本身也開發了一套FPM工具，能夠利用幾個數據座標來定位用戶的一個行爲
4. 報表分析：不一樣的服務會有不少不一樣的埋點方式，甚至不少後端服務也會有不少數據須要處理，好比以前咱們遇到一個JS文件加載問題，咱們經過報表看到這個js文件平均訪問時間300+ms，這裏咱們就會進去作問題處理，作優化，再利用前面的CICD作快速的發佈、部署

4、先後端分離

咱們如今基本上沒有服務器端渲染，都是採用徹底的先後端分離，不過在傳統的先後端分離上作了不少方面的優化，咱們內部開發了不少工具來支撐咱們作先後端分離：

1. 結合CDN + OSS，經過咱們的CICD，咱們能夠作快速、無縫的發佈、部署
2. BFF層，經過咱們開發的技術，咱們能夠作到很是好的後端業務剝離、數據裁剪、數據聚合，經過咱們前端的Gateway，咱們也能夠作到很好的數據分發、頁面渲染等等，另外針對SEO，咱們也作了靜態化處理，來作搜索引擎優化
3. 監控方面，目前咱們的「先知」監控，能夠幫助咱們快速發現頁面異常，神策埋點則能夠幫助咱們作頁面追蹤，Foxer數據採集能夠幫助咱們作到通用行爲數據分析，FPM則幫助咱們作頁面性能分析

更多精彩內容，感謝關注、歡迎轉發