網易嚴選後臺系統前端規範化解決方案
本文來自網易雲社群
作者：吳子房
背景
網易嚴選經過一年多的快速發展，專案膨脹很快，業務規劃上，也到了拆分工作臺的時候了。當前一個業務人員在完成一個新品開發的流程的時候，需要在多個業務系統之間切換。然而因為歷史原因，各後臺專案有著不同的互動視覺形式，體驗比較差，統一互動視覺規範與前端互動已經迫在眉睫。
目標
設計與開發這套規範的目標，是讓使用者體驗更佳，操作習慣一致，各系統間能夠無縫對接。
規範上的準備
從使用者體驗上規範：統一認證、互動、視覺規範。 從開發流程上規範：前端開發規範、基礎框架、樣式庫、元件庫。 從開發效率上規範：構建工具、npm私有庫、輔助開發工具。
具體實施步驟
1. 統一認證，統一管理外網訪問許可權
統一認證的實現，讓各個系統直接的切換變的更流暢，避免了流暢跳轉時業務系統需要重新登入。
實現方案：
統一各業務系統的域名，分配應用名給各業務系統。
接入統一的登入服務來實現。
統一外網訪問管理：應用登入時，登入服務根據使用者許可權生成可訪問列表的token，nginx通過secure_link模組來進行鑑權與控制轉發。
2. 統一互動視覺規範
一致的互動視覺規範，這也是後面各個步驟實施的基礎，在前端同學的深度參與下，互動視覺同學提取目前各業務系統的互動視覺需求，完成了互動視覺規範的制定。
互動同學提供了符合規範的一套axure元件庫，在產品互動階段進行規範。
3. 統一基礎前端框架
統一基礎框架是元件庫開發與程式碼複用的基礎，我們選擇了anguarjs(1.x)的繼承者angular(當前4.x)
4. 基礎樣式庫與樣式規範
開發了實現整個互動視覺規範的基礎樣式庫@shark/shark-css。
通過樣式開發命名規範，保障後續各種業務元件樣式之間能夠相容，不會互相汙染。
5. 基礎元件庫與元件規範
在angular框架下前端組開發了符合互動視覺規範的基礎元件庫@shark/shark-angularX。
通過元件規範，保證後續都各業務元件的介面、資料處理、校驗能夠統一與規範。
6. 開發文件、模版工程
開發文件方面，以元件說明、介面說明、元件例項、程式碼片段四部分來展示各個元件的互動和試用方式。
模版工程，用於規範程式碼結構，模組組織方式，為業務的模組化開發和模組化複用做好基礎。在模版工程中，提供了常見的表單、列表、tab、模態等業務模組的開發案例。
7. npm私服
我們搭建了一套npm私服，供釋出公共樣式庫、公共元件庫、業務元件、公共業務模組。
8. 開發流程
前端本地開發環境
npm run server
前端聯調模式（配置remote地址）
npm run server-remote
前端build模式測試
npm run server-build
9. 外掛、cli工具
配套的編輯器外掛，輔助程式碼生成，專案建立，開發了元件庫和模版工程配套的vscode外掛，cli工具。
10. 願景
希望經過大家的努力，嚴選的後臺系統，能給使用者提供更好的使用體驗，提升大家的工作效率。
網易雲免費體驗館，0成本體驗20+款雲產品！
更多網易研發、產品、運營經驗分享請訪問網易雲社群。