网易云复盘:云计算前端这一年(AngularJS粉慎入)


此文已由作者赵雨森授权网易云社区发布。

欢迎访问网易云社区,了解更多网易技术产品运营经验。



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

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

前端技术

技术选型

20181126165253a8d95292-88b1-4933-8a34-cc300d1bae35.jpg

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

2018112616530788a9391e-f411-4144-96bb-445459b2bd80.jpg

主要从以下这些方面考虑:

  • 开发效率(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)

  • ...

以下两张表是我们针对各个框架的调研结果,放出来供大家参考:

20181126165318a19da000-9b29-4868-9f9e-23756747c456.jpg


20181126165532cdc43e8a-4d53-40c0-bf9c-767dfff69df5.jpg

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

组件库

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

2018112616554594284713-563d-429f-b461-c9710c0833fc.jpg

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

20181126165557241a9e3e-a5ab-49ee-8400-295ae23d77fc.jpg

经过几个月的实践,我们已经练就一套成熟的迭代流程,能够快速响应、快速开发、快速发布,并且能输出细致的 ChangeLog:

v0.1.25

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

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

全栈化

2018112616561027b78d75-8456-4d44-9226-89fa2b1b50e4.jpg

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

20181126165621823dca08-b503-490a-8473-b876c8e90b90.jpg

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

工具链

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

前端方面

  • 集成构建工具

  • icon-font-loader

  • svg-classic-sprite-loader

  • vue-multifile-loader

  • vue-markdown-html-loader

后端方面

  • 集成开发工具

  • 工程模板与核心包

  • 由 JSDoc 注释根据生成 Swagger 接口文档

测试与监控

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

  • 给网易云基础服务控制台的主要模块添加了 e2e 测试,录制 UIRecorder 脚本并添加到持续集成。

  • 产品接入 APM,进行前端的性能统计与错误统计。

20181126165639f438ea8a-0771-4ab0-bad6-f484275872e8.jpg

工作模式

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

20181126165651ba47097b-ff04-44f4-ab5f-d191f0bd5d11.jpg

学习分享

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

  • 利用 GitLab 的 MergeRequest,双人结队 CodeReview

  • 两周一次的前端组分享

  • 与周边部门的合作交流

  • 图书管理机制

总结

在这一年里,我们组承担了不少项目,肩负了更多的责任。

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

在这一年里,我们还没有做太多的技术输出。一大波我们组的文章即将到来,咱们网易前端技术大会再见~

最后祭出我们的大杀器

相关阅读:

网易蜂巢(网易云基础服务)的工业化前端架构


免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐

更多网易技术、产品、运营经验分享请点击


相关文章:
【推荐】 Spring Boot 学习系列(02)—使用热部署,提升开发效
【推荐】 如何利用OpenSSL生成证书

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个PPT课件介绍了云计算的基础知识。内含丰富的图文,通过生动地描述,使您能快速地掌握云计算的概念和相关知识,是不可多得的云计算PPT教程。 1. 课件适合于初学者快速了解云计算; 2. 课件适合于演讲者快速地组织一个云计算相关讲座; 3. 课件有详细的备注,放映时建议使用演示者视图模式; 内容提要: ----------------- 现在,“云计算”越来越成为人们所关注的一个名词,因为它代表了信息时代的未来。 云计算被视为科技业的下一次革命,而它也将对工作方式和商业模式带来根本性的改变。 那么,什么是云计算云计算有什么用处?它将如何改变整个世界?……一连串的问题等待解答。 实际上,云计算不能算是一个全新的概念,它是并行计算、分布式计算和网格计算的综合和发展。但是,它将是一项颠覆性的技术。 当今社会,PC依然是我们日常工作生活中的核心工具——我们用PC处理文档、存储资料,通过电子邮件或U盘与他人分享信息。如果PC硬盘坏了,我们会因为资料丢失而束手无策。而在“云计算”时代,“云”会替我们做存储和计算的工作。“云”就是计算机群,每一群包括了几十万台、甚至上百万台计算机。“云”的好处还在于,其中的计算机可以随时更新,保证“云”长生不老。Google就有好几个这样的“云”,其他IT巨头,如微软、雅虎、亚马逊(Amazon)也有或正在建设这样的“云”。届时,我们只需要一台能上网的电脑,不需关心存储或计算发生在哪朵“云”上,但一旦有需要,我们可以在任何地点用任何设备,如电脑、手机等,快速地计算和找到这些资料。我们再也不用担心资料丢失。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值