網易嚴選後臺系統前端規範化解決方案

本文來自網易雲社區

做者：吳子房

背景

網易嚴選通過一年多的快速發展，項目膨脹很快，業務規劃上，也到了拆分工做臺的時候了。當前一個業務人員在完成一個新品開發的流程的時候，須要在多個業務系統之間切換。然而由於歷史緣由，各後臺項目有着不一樣的交互視覺形式，體驗比較差，統一交互視覺規範與前端交互已經迫在眉睫。

目標

設計與開發這套規範的目標，是讓用戶體驗更佳，操做習慣一致，各系統間可以無縫對接。

規範上的準備

從用戶體驗上規範：統一認證、交互、視覺規範。 從開發流程上規範：前端開發規範、基礎框架、樣式庫、組件庫。 從開發效率上規範：構建工具、npm私有庫、輔助開發工具。

具體實施步驟

1. 統一認證，統一管理外網訪問權限

統一認證的實現，讓各個系統直接的切換變的更流暢，避免了流暢跳轉時業務系統須要從新登陸。

實現方案：

1. 統一各業務系統的域名，分配應用名給各業務系統。

2. 接入統一的登陸服務來實現。

3. 統一外網訪問管理：應用登陸時，登陸服務根據用戶權限生成可訪問列表的token，nginx經過secure_link模塊來進行鑑權與控制轉發。
   

2. 統一交互視覺規範

1. 一致的交互視覺規範，這也是後面各個步驟實施的基礎，在前端同窗的深度參與下，交互視覺同窗提取目前各業務系統的交互視覺需求，完成了交互視覺規範的制定。

2. 交互同窗提供了符合規範的一套axure元件庫，在產品交互階段進行規範。
   

3. 統一基礎前端框架

統一基礎框架是組件庫開發與代碼複用的基礎，咱們選擇了anguarjs(1.x)的繼承者angular(當前4.x)

angular中文官網 。

4. 基礎樣式庫與樣式規範

1. 開發了實現整個交互視覺規範的基礎樣式庫@shark/shark-css。

2. 經過樣式開發命名規範，保障後續各類業務組件樣式之間可以兼容，不會互相污染。

5. 基礎組件庫與組件規範

1. 在angular框架下前端組開發了符合交互視覺規範的基礎組件庫@shark/shark-angularX。

2. 經過組件規範，保證後續都各業務組件的接口、數據處理、校驗可以統一與規範。

6. 開發文檔、模版工程

1. 開發文檔方面，以組件說明、接口說明、組件實例、代碼片斷四部分來展現各個組件的交互和試用方式。

2. 模版工程，用於規範代碼結構，模塊組織方式，爲業務的模塊化開發和模塊化複用作好基礎。在模版工程中，提供了常見的表單、列表、tab、模態等業務模塊的開發案例。

7. npm私服

咱們搭建了一套npm私服，供發佈公共樣式庫、公共組件庫、業務組件、公共業務模塊。

8. 開發流程

1. 前端本地開發環境

   npm run server複製代碼

2. 前端聯調模式（配置remote地址）

   npm run server-remote複製代碼

3. 前端build模式測試

   npm run server-build複製代碼

9. 插件、cli工具

配套的編輯器插件，輔助代碼生成，項目建立，開發了組件庫和模版工程配套的vscode插件，cli工具。

10. 願景

但願通過你們的努力，嚴選的後臺系統，能給用戶提供更好的使用體驗，提高你們的工做效率。

網易雲免費體驗館，0成本體驗20+款雲產品！

更多網易研發、產品、運營經驗分享請訪問網易雲社區。

相關文章：
【推薦】 ThreeJs 基礎入門
【推薦】 他們要消失了嗎？探訪人工智能浪潮下的鑑黃師
【推薦】 讓你知曉內容安全的邊界：盤點201七、2018這兩年的內容監管