网易严选后台系统前端规范化解决方案
本文来自网易云社区
作者：吴子房
背景
网易严选经过一年多的快速发展，项目膨胀很快，业务规划上，也到了拆分工作台的时候了。当前一个业务人员在完成一个新品开发的流程的时候，需要在多个业务系统之间切换。然而因为历史原因，各后台项目有着不同的交互视觉形式，体验比较差，统一交互视觉规范与前端交互已经迫在眉睫。
目标
设计与开发这套规范的目标，是让用户体验更佳，操作习惯一致，各系统间能够无缝对接。
规范上的准备
从用户体验上规范：统一认证、交互、视觉规范。 从开发流程上规范：前端开发规范、基础框架、样式库、组件库。 从开发效率上规范：构建工具、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+款云产品！
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章：
【推荐】 #3.14 Piday#我的圆周率日
