网易严选后台系统前端规范化解决方案

本文来自网易云社区

作者：吴子房

背景

网易严选经过一年多的快速发展，项目膨胀很快，业务规划上，也到了拆分工作台的时候了。当前一个业务人员在完成一个新品开发的流程的时候，需要在多个业务系统之间切换。然而因为历史原因，各后台项目有着不同的交互视觉形式，体验比较差，统一交互视觉规范与前端交互已经迫在眉睫。

目标

设计与开发这套规范的目标，是让用户体验更佳，操作习惯一致，各系统间能够无缝对接。

 

规范上的准备

从用户体验上规范：统一认证、交互、视觉规范。 从开发流程上规范：前端开发规范、基础框架、样式库、组件库。 从开发效率上规范：构建工具、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+款云产品！ 

更多网易研发、产品、运营经验分享请访问网易云社区。