勿忘初心

个人签名

530篇博客

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

勿忘初心2018-09-27 16:50

本文来自网易云社区

作者:吴子房


背景

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


目标

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

 


规范上的准备

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

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