本文由 網易雲 釋出。
作者：趙雨森
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
- 兩周一次的前端組分享
- 與周邊部門的合作交流
- 圖書管理機制
總結
在這一年裡，我們組承擔了不少項目，肩負了更多的責任。
在這一年裡，我們完成了技術的轉型與積累，已經擺好姿态去迎接明年新的挑戰。
在這一年裡，我們還沒有做太多的技術輸出。一大波我們組的文章即将到來，咱們網易前端技術大會再見~
最後祭出我們的大殺器
了解 網易雲 ：
網易雲官網：https://www.163yun.com/
新使用者大禮包：https://www.163yun.com/gift
網易雲社群：https://sq.163yun.com/