乐视云大前端技术架构

团队介绍

乐视云计算大前端，目前团队人数20+，负责公司全部业务线的前端工作，包括官网、商业平台的前端构建，flash、html5播放器的SDK，以及还处于Alpha阶段的React Native打包App的平台工具——LeVally，包括PC端、移动端的前端项目。

在大量的业务实践中，我们团队的人员，经过各种探索、踩坑，形成了如今的技术架构，并且在不断的更新完善中

前端规范

代码未动，规范先行。可以在上图的最左面看到，一大排的规范列表

• 接活规范

  其实是规范了大前端团队从接活、评估、开发、联调、UI还原、测试、部署(Vue 部署)、上线等一系列的前后串联的工作，由于我们团队面向各个业务线，之前经常有被工期打断、delay背锅的情况，所以需要内外统一工作规范。

• 代码规范

  团队一开始采取的是普通的eslint来约束代码，随着时间的增长，进化为选择并自定义了Airbnb的严格eslint来约束代码。
  同时，团队对项目各种命名、git分支、注释、ReadMe、vue组件，包括之前的jquery编写，都进行了不同程度的规范约束，以达到团队的内部统一

• 接口规范

  对于不同的后台团队，统一了接口，使我们的项目、组件，可以最大程度的复用

• SEO规范

  对于需要SEO的界面，有自己的SEO规范

• 兼容性规范 H5、PC

  时间、精力是宝贵的，我们不可能去兼容IE6、7那些大爷了，针对不同的项目，我们有不同的兼容性规范

• 自测规范

  项目质量，并不是把控在QA团队的手中，需要我们自己负责，交给QA团队之前，我们需要保证自己的东西好使

• 故障处理规范

  有的产品线，是有日志上报的，但是大部分还是无日志上报的，系统报警或者我们自己发现到问题，需要及时、靠谱的处理方案

技术架构

开发、构建工具

团队已经统一了技术栈，那就是vue，可以是单界面应用的就使用vue cli架构单界面项目，加上vue router路由控制；如果不可以做单界面的话，例如活动页、视频详情页，就自己架构vue+webpack+es6+npm的开发技术栈，总之，现代化的JS开发，我们以vue+webpack+es6+npm为基础核心。

我们的css同学与UI同学，维护了一套svg图标库，我们的项目，在去图片化迈出了一大步。

我们的PC端项目，也维护了一套vue组件库，把之前的jquery插件库，全部搬迁转移了过来。H5的组件库，正在慢慢积累中。

针对与国际化项目，我们维护了一个自动化的工具，包括中文提取、翻译、回填。

针对于那些开发比较慢的Java后台，很可能需要我们等待他们给出实际接口，我们自己准备了koa2+mongoDB的接口自调工具，提前与后台定义好相关字段，就可以自己写接口了。

还有一些旧的还在维护的项目，采用了jquery+gulp+event事件池的模式开发，即全局订阅者/发布者。

自测&QA测试

我们现在，也开始用代码写测试，写一些常见的测试用例、针对业务，从代码层面上找到隐患。

当然，人工测试必不可少，我们先自测，然后QA同事使用它们的自动化测试平台，先进行冒烟测试，然后进行业务测试。

部署

现在采用了前后端分离的开发、部署方式，代码在gitlab上托管，不同的分支对应不同的业务环境，通过火星一号（公司内部上线平台），直接把代码从gitlab拉取到相关线上环境。

css、js等静态文件，需要上线到乐视cdn，可以手工打包上线，不过我们现在使用node开发了自动化上线cdn的工具，自动回填相关cdn上的文件地址

运行

公司的自动化监控报警系统，会主动轮询相关项目是否正常运行，发现异常时，会短袖、邮件发送给相关负责人。

技术选型思考

• 为毛使用了vue，而不是react、angular

网上一堆关于这三者的比较，不再赘述。对我们而言，静态网页是专门的同事写的，JS是另外的人写的，所以，由静态界面改写成vue的模板语言，显然更简单一些。

我们团队，在2015年的时候，做过angular技术转型的尝试，相同的mvvm的技术，上手vue也比较快，而angular，我们觉得他太冒进，google的大拿们，有点对开发者们开玩笑了。

• 为毛是使用svg图标库，而不是icon font或者单纯的css prite

另一文章有答案：svg图标库以及与icon font对比

其余的技术体系

• react技术线

作为现在最火的前端技术，我们也探索过react，也开发过一个小型的react组件库，用于与vue技术做对比。

• nuxt——vue服务端渲染

我们也做好了使用vue做服务端渲染的准备，用于我们组件化自动生成H5网站的技术储备。

• hybrid开发

与原生的app交互中，我们也踩过了一堆hybrid开发的坑，深刻认识了webview这个好哥们。

• 其余

像微信小程序、electron等技术，我们也进行过技术调研，完成过demo，由于业务的原因，没有具体深入使用。

不足之处

• 对node的使用

由于我们的后台Java团队异常庞大，现在对node的使用，要么是开发模拟接口、要么是开发各种工具，而没有在线上跑的中间件。

• 工种的分离

我们前端团队，css与JS是分离的，有利于各自技术的深入，但是长远看来，css与JS应当是在一起的，有利于项目的推进与个人技术线的完整。

未来

• svg、canvas动画库

静态的图标库、UI组件库，我们积累的够多，那些酷炫的动态效果，如动态离子展示、canvas场景、我们也做过不少，但是未有系统的积累，这块正在或急或慢的储备，争取厚积薄发。

总结

未来已来，做技术的，需要对业务负责，也需要深入自己的技术，更好的推进业务，前端是没有止境的，是学不完的。

好在最近前端开始慢慢进入大朗淘沙的阶段，老技术在死去，新技术在物竞天择，各个方面，开始有了独大的技术，如构建工具之webpack，包管理之npm，基础库之react、vue，node库之koa，慢慢的展现出王者风范。

现在社区慢慢的进入学习前端基础的节奏，个人认为这是个好趋势，前端基础学习好了，技术工具再多，也是各种api而已。