網易雲覆盤：雲計算前端這一年（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
• 兩週一次的前端組分享
• 與周邊部門的合做交流
• 圖書管理機制

 

總結

在這一年裏，咱們組承擔了很多項目，肩負了更多的責任。

在這一年裏，咱們完成了技術的轉型與積累，已經擺好姿態去迎接明年新的挑戰。

在這一年裏，咱們尚未作太多的技術輸出。一大波咱們組的文章即將到來，我們網易前端技術大會再見~

---

 

最後祭出咱們的大殺器

 

 

瞭解 網易雲 ：
網易雲官網：https://www.163yun.com/
新用戶大禮包：https://www.163yun.com/gift
網易雲社區：https://sq.163yun.com/