網易雲覆盤：雲端計算前端這一年（AngularJS粉慎入）
此文已由作者趙雨森授權網易雲社群釋出。
歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。
2017年的前端已然沒有劇烈的變動，但發展勢頭仍然不減。語言、標準、框架和庫逐漸穩定和完善，各團隊再也不用花大把精力放在造輪子上，而更多的是去積累所需的元件庫、開發合適的工具以及整合自己的解決方案。
我們雲端計算技術部前端開發組也不例外，在與雲端計算其他組一起度過了網易雲基礎服務（網易蜂巢）去年的快速發展期之後，現在的主要目標已經轉為如何更好地加快迭代效率、提升使用者體驗、提高網頁效能。針對這個目標，我們組在這一年中對前端技術、工作模式、技術積累等方面做了整體的優化與演進。
前端技術
技術選型
年初，在調研和討論市面上的各個框架之後，我們決定拋棄老的 NEJ+Regular+MCSS 架構，改用 Webpack+Vue+PostCSS+CSSModules 架構。
主要從以下這些方面考慮：
開發效率（Webpack的熱更新 + Vue元件的區域性熱更新 > 傳統開發模式的手動重新整理）
效能問題（Vue的依賴管理 < Regular的髒檢查）
潛在 bug（Vue的單向流 < 資料流向不明確的雙向繫結，CSSModules區域性class < 傳統CSS全域性class）
框架流行度（Webpack+Vue+PostCSS > NEJ+Regular+MCSS）
學習曲線（Vue < NEJ+Regular）
文件完善性（Webpack+Vue+PostCSS > NEJ+Regular+MCSS）
社群支援（Webpack+Vue+PostCSS > NEJ+Regular+MCSS）
...
以下兩張表是我們針對各個框架的調研結果，放出來供大家參考：
目前除了網易雲基礎服務控制檯正在遷移架構之外，後來開發的系統如域名系統、運營平臺、專屬雲管理平臺等均已採用新的架構方案。
元件庫
為了減少開發成本、保證各專案使用者體驗的一致性，我們根據設計組制定的規範，實現了一套獨立的元件庫——CloudUI。
目前 CloudUI 已包含 50 多個元件、3 套主題，實現完善度達到 80%，業務覆蓋率達到 75%，同時支援了多個雲端計算專案。
經過幾個月的實踐，我們已經練就一套成熟的迭代流程，能夠快速響應、快速開發、快速釋出，並且能輸出細緻的 ChangeLog：
v0.1.25 修復： - 移除對`u-modal`元件增加`heading`屬性和樣式修改， - 修復`u-table-view`元件在`display`值為`none`的情況下，顯示錯亂問題 增強： - 更新元件`u-line-chart`樣式，增加到20種不同顏色線段和超出設定預設線段顏色
全棧化
今年我們組在全棧方面做了一些實踐與積累，團隊逐漸向全棧化發展，一部分組員側重於對傳統前端中多端的研究以及與設計師進行深度合作，另一部分組員側重於研究 Node.js 全棧開發模式。
下半年我們採用 Vue+Koa 的架構重構了域名系統，並積累了一套相應的工具模板與實踐經驗。
工具鏈
根據前面的一系列技術選型與實踐方案，我們研發了相應的一系列工具。
前端方面
整合構建工具
icon-font-loader
svg-classic-sprite-loader
vue-multifile-loader
vue-markdown-html-loader
後端方面
整合開發工具
工程模板與核心包
由 JSDoc 註釋根據生成 Swagger 介面文件
測試與監控
為了保證業務的程式碼質量與執行的穩定性，我們從兩個維度做了相應工作：
給網易雲基礎服務控制檯的主要模組添加了 e2e 測試，錄製 UIRecorder 指令碼並新增到持續整合。
產品接入 APM，進行前端的效能統計與錯誤統計。
工作模式
為了提高整個團隊的技術實力、加強每個組員的技術深度，我們在工作模式上也做一定調整。由以前每個人的單一業務線改為業務+技術兩條線。業務線需要技術線來提升質量與效率，技術線也離不開業務線的實踐和經驗。
學習分享
關於團隊內的知識積累與學習分享問題，我們也漸漸摸出了一些套路：
利用 GitLab 的 MergeRequest，雙人結隊 CodeReview
兩週一次的前端組分享
與周邊部門的合作交流
圖書管理機制
總結
在這一年裡，我們組承擔了不少專案，肩負了更多的責任。
在這一年裡，我們完成了技術的轉型與積累，已經擺好姿態去迎接明年新的挑戰。
在這一年裡，我們還沒有做太多的技術輸出。一大波我們組的文章即將到來，咱們網易前端技術大會再見~
最後祭出我們的大殺器
相關閱讀：
免費領取驗證碼、內容安全、簡訊傳送、直播點播體驗包及雲伺服器等套餐
更多網易技術、產品、運營經驗分享請點選。
相關文章：
【推薦】 “自研”和“開放”持續打架，如何看雲端計算的四大進化？
【推薦】 Spring Boot 學習系列（03）—jar or war，做出你的選擇
【推薦】 介面測試之Kotlin篇（上）