网易云复盘：云计算前端这一年（AngularJS粉慎入）

本文由  网易云 发布。

 

做者：赵雨森

 

2017年的前端已然没有剧烈的变更，但发展势头仍然不减。语言、标准、框架和库逐渐稳定和完善，各团队不再用花大把精力放在造轮子上，而更多的是去积累所需的组件库、开发合适的工具以及整合本身的解决方案。

 

咱们云计算技术部前端开发组也不例外，在与云计算其余组一块儿度过了网易云基础服务（网易蜂巢）去年的快速发展期以后，如今的主要目标已经转为如何更好地加快迭代效率、提高用户体验、提升网页性能。针对这个目标，咱们组在这一年中对前端技术、工做模式、技术积累等方面作了总体的优化与演进。

 

前端技术

技术选型

 

 

年初，在调研和讨论市面上的各个框架以后，咱们决定抛弃老的 NEJ+Regular+MCSS 架构，改用 Webpack+Vue+PostCSS+CSSModules 架构。

 

主要从如下这些方面考虑：

• 开发效率（Webpack的热更新 + Vue组件的局部热更新 > 传统开发模式的手动刷新）
• 性能问题（Vue的依赖管理 < Regular的脏检查）
• 潜在 bug（Vue的单向流 < 数据流向不明确的双向绑定，CSSModules局部class < 传统CSS全局class）
• 框架流行度（Webpack+Vue+PostCSS > NEJ+Regular+MCSS）
• 学习曲线（Vue < NEJ+Regular）
• 文档完善性（Webpack+Vue+PostCSS > NEJ+Regular+MCSS）
• 社区支持（Webpack+Vue+PostCSS > NEJ+Regular+MCSS）
• ...

 

如下两张表是咱们针对各个框架的调研结果，放出来供你们参考：

 

目前除了网易云基础服务控制台正在迁移架构以外，后来开发的系统如域名系统、运营平台、专属云管理平台等均已采用新的架构方案。

 

组件库

 

为了减小开发成本、保证各项目用户体验的一致性，咱们根据设计组制定的规范，实现了一套独立的组件库——CloudUI。

 

 

目前 CloudUI 已包含 50 多个组件、3 套主题，实现完善度达到 80%，业务覆盖率达到 75%，同时支持了多个云计算项目。

 

通过几个月的实践，咱们已经练就一套成熟的迭代流程，可以快速响应、快速开发、快速发布，而且能输出细致的 ChangeLog：

v0.1.25

修复：
- 移除对`u-modal`组件增长`heading`属性和样式修改，
- 修复`u-table-view`组件在`display`值为`none`的状况下，显示错乱问题

加强：
- 更新组件`u-line-chart`样式，增长到20种不一样颜色线段和超出设置默认线段颜色

 

全栈化

 

 

今年咱们组在全栈方面作了一些实践与积累，团队逐渐向全栈化发展，一部分组员侧重于对传统前端中多端的研究以及与设计师进行深度合做，另外一部分组员侧重于研究 Node.js 全栈开发模式。

 

下半年咱们采用 Vue+Koa 的架构重构了域名系统，并积累了一套相应的工具模板与实践经验。

 

工具链

 

根据前面的一系列技术选型与实践方案，咱们研发了相应的一系列工具。

 

前端方面

• 集成构建工具
• icon-font-loader
• svg-classic-sprite-loader
• vue-multifile-loader
• vue-markdown-html-loader

 

后端方面

• 集成开发工具
• 工程模板与核心包
• 由 JSDoc 注释根据生成 Swagger 接口文档

 

测试与监控

 

为了保证业务的代码质量与运行的稳定性，咱们从两个维度作了相应工做：

• 给网易云基础服务控制台的主要模块添加了 e2e 测试，录制 UIRecorder 脚本并添加到持续集成。
• 产品接入 APM，进行前端的性能统计与错误统计。

 

 

工做模式

 

为了提升整个团队的技术实力、增强每一个组员的技术深度，咱们在工做模式上也作必定调整。由之前每一个人的单一业务线改成业务+技术两条线。业务线须要技术线来提高质量与效率，技术线也离不开业务线的实践和经验。

 

学习分享

关于团队内的知识积累与学习分享问题，咱们也渐渐摸出了一些套路：

• 利用 GitLab 的 MergeRequest，双人结队 CodeReview
• 两周一次的前端组分享
• 与周边部门的合做交流
• 图书管理机制

 

总结

在这一年里，咱们组承担了很多项目，肩负了更多的责任。

在这一年里，咱们完成了技术的转型与积累，已经摆好姿态去迎接明年新的挑战。

在这一年里，咱们尚未作太多的技术输出。一大波咱们组的文章即将到来，我们网易前端技术大会再见~

---

 

最后祭出咱们的大杀器

 

 

了解 网易云 ：
网易云官网：https://www.163yun.com/
新用户大礼包：https://www.163yun.com/gift
网易云社区：https://sq.163yun.com/