李晓健_苏宁视频云前端系统架构的演变历程

1 . E T B .N P U IT 

2 . E T .N 苏宁视频云前端系统架构的演变历程 B P U IT 苏宁易购 李晓健 2018-10-19 

3 . 自我介绍 E T ◦ 李晓健，2011年参加工作，2015年开始加入苏宁并参与苏宁视频云前台的开发 B .N ◦ 目前负责苏宁视频前端研发和架构工作，参与一些前端SDK组件的开发 U ◦ 爱好上网 IT P 

4 . 目录 目前前端的现状 E T B 前端架构的意义 .N P U 苏宁视频云的前端架构 IT 未来的发展及展望 

5 .目前前端的现状 前端的主要工作内容 E T ◦ HTML （html4、html5） B .N U ◦ CSS （css2、css3） IT P ◦ JAVASCRIPT （es5、es6+、nodejs） 

6 .目前前端的现状 前端可以应用的场景 E T N ◦ PC浏览器 B . ◦ WebAPP（移动端浏览器、移动端原生WebView） ◦ Hybrid App P U IT ◦ 桌面应用（NW.JS、Electron） ◦ ….. 

7 .目前前端的现状 前端的主流框架 E T 从来没有听说过 听说过，不感兴趣 听说过，想学习 使用过，不想再使用 使用过，会继续使用 B .N P U IT stateofjs 2017年前端框架的统计（统计了全世界超过28000名开发者） 

8 .前端架构的意义 前端开发中经常出现的问题 E T N ◦ 对现使用的框架不了解，上手太慢 ◦ 代码逻辑混乱，耦合严重 B . U ◦ 开发越来越来困难，牵一发而动全身 P ◦ 重复代码太多，一处改处处改，可维护性太差 IT ◦ 开发效率低下，出错率高 ◦ …… 

9 .前端架构的意义 前端开发出现问题的原因 E T N ◦ 人们对用户体验度的要求提升 ◦ 很多的逻辑都从后端往前端转移 B . U ◦ 前端的功能越来越丰富 P ◦ 前端代码量的大幅提升 IT ◦ 前端架构层出不穷 ◦ …… 

10 .前端架构的意义 前端架构是什么 E T N 前端架构其实就是对一些框架或技术的组合使用方式及对一些流程的规范化，用到达到控制 . 风险、简化开发、提高效率的目的。 B 比如使用什么技术、代码应该如何去组织、开发流程是什么样的、代码应该遵循什么样的风 U 格、有哪些工具和组件库可以使用等等。 IT P 

11 .前端架构的意义 怎样去搭建一个合适的架构 E T .N ◦ 了解当前项目的功能特点（复杂度、侧重展示还是交互、SEO） B ◦ 了解项目的展现目标用户（浏览器的兼容性） P ◦ 了解当前团队人员的技术栈及能力 U IT ◦ 了解哪些地方是我们自己可以控制的 ◦ 适时调整 

12 .苏宁视频云的前端架构 苏宁视频云的页面结构 E T B .N P U IT 

13 .苏宁视频云的前端架构 第一阶段的项目架构 E T .N ◦ PHP（html） B ◦ CSS ◦ 纯原生javascript P U IT ◦ 通过上线流程中的Jenkins 对代码压缩 

14 .苏宁视频云的前端架构 第一阶段的项目架构中存在的问题 E T .N ◦ 前端开发人员开发完成后，需要PHP开发人员将html转成php B ◦ 页面数量较多 ◦ 单个页面请求文件过多 P U IT ◦ 代码的复杂度过高，对开发人员的能力要求过高 ◦ 重复的工作比较多,开发的工作量巨大 

15 .苏宁视频云的前端架构 第二阶段的项目架构 E T N ◦ html ◦ CSS B . U ◦ 纯原生javascript P ◦ 引入了artTemplate IT ◦ 引入了前端路由 ◦ 通过上线流程中的Jenkins 对代码压缩 

16 .苏宁视频云的前端架构 第二阶段的项目架构解决掉的问题 E T .N ◦ 不需要再将HTML文件手动转成PHP文件 B ◦ 通过前端路由将多个页面合并成一个页面 P U 。使用模板大大减少了重复代码，降低了代码的逻辑 IT 

17 .苏宁视频云的前端架构 第二阶段的项目架构中存在的问题 E T .N ◦ 单个页面请求文件过多 B 。单个js文件中的代码较多 P U ◦ 代码的复杂度过高，对开发人员的能力要求过高 IT 

18 .苏宁视频云的前端架构 第三阶段的项目架构 E T N ◦ html ◦ CSS B . U ◦ 引入了react P ◦ 引入了react-router IT ◦ 引入了antDesign ◦ 通过webpack在本地进行打包 

19 .苏宁视频云的前端架构 第三阶段的项目架构好处 E T .N ◦ 可以直接使用antDesign的组件 B ◦ 通过modifyVars定制主题 P U 。通过webpack的多入口配置，大大减少一个页面的引入的代码量 IT ◦ 一个页面只需要引入一个公用的css和一个自己的样式文件，一个公用js和自己页面的逻辑js ◦ 组件可以在多处共用 

20 .苏宁视频云的前端架构 第三阶段的项目架构解决掉的问题 E T .N ◦ 通过babel的babel-plugin-import插件对antDesign组件进行按需加载 B ◦ 通过webpack将公用的代码抽离成一个公用的文件 P U 。页面模块都是按组件进行开发，每个文件里只有当前组件的逻辑 IT ◦ 我们开发流程里加入了代码的风格验证，保证一个团队的代码风格是一致的 

21 .未来的发展及展望 T ◦ js已经可以做web端，服务端，client端，将来也会渗透到各个领域 E ◦ 由于硬件设备的加强及网速的提升，H5也会有更好的发展 ◦ 现在比较热的物联网也会WEB化 B .N ◦ 由于浏览器性能的提升和更多接口的开放，web VR也会有很好的发展 P ◦ web人工智能等都会有很好的体现。 U IT 

22 . E T B .N P U IT