如今的前端早已不再拘泥于满足页面展示,而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业,继而影响商业结果。这种表象的改变背后是本质的转变,从更为宏观的角度来说,前端正在通过持续的 技术 革新和技术融合不断突破自身边界,进而重新定义自身价值。

时光荏苒,非比寻常的一年即将过去。在这过去的一年中,与其说前端的平稳期即将到来,不如说前端反而进入了技术深水区。换言之,在全栈和多端的影响下,前端领域里“术业有专攻”的时代已经到来。如今的前端早已不再拘泥于满足页面展示,而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业,继而影响商业结果。这种表象的改变背后是本质的转变,从更为宏观的角度来说,前端正在通过持续的技术革新和技术融合不断突破自身边界,进而重新定义自身价值。在这种大变革的时代背景下,腾讯IMWeb前端团队也正在与时俱进得进行着技术更新、优化与升级,结合自身这一年的快速发展,IMWeb团队为大家带来2020年大前端技术趋势解读。

本文拟通过回顾2020年七大主要的前端技术趋势来展现前端早已由单纯工具解决问题的属性逐步转变为深入产品机制解决商业问题的角色。前端开发者的关注点也早已不是如何使资源利用效率更高,页面体验更优以及保证业务的稳定输出,而是更为关注产品能力、产业模式、数据建设以及商业转化。

开源站点录了Github上1500个开源项目,并且还基于 GithubTrending API 的公开数据,更新统计这些项目的Stars新增趋势。基于Bestofjs去年的2019年Java明星项目()报告和近一年Trending排行数据,下面展示了Top30的前端重点项目,并对此进行简单的介绍。

相比于去年,学习资源越来越丰富了,Top100 内有14个项目是与前端基础学习相关的,侧面可以看出前端行业的繁荣;同时也反映出知识和人才的迭代速度是非常快的。Deno超过Vue.js一跃成为过去一年Star增长最快的开源项目,打破了Vue.js连续4年登顶的垄断。虽然在工业届使用Deno落地在业务场景的情况还比较少,但是目前的发展势头还是不错的。还记得因为Deno的出现,出现的那句经典的“求不要更新了,老子学不动了”。事实证明“学不动的时代” 并没有到来。除了跟学习相关的项目,倘若只关注垂直领域的技术项目,我们会惊喜地发现:

通过项目分布的情况,明显能看到React生态圈 Vue 生态圈 Angular 生态圈;

伴随着WebAssembly核心规范成为浏览器的标准,继HTML、CSS和JS之后,像C/C++、Rust、Go等语言编写的高性能模块也在浏览器上运行。相信在不久的将来,Web应用的桌面客户端化,也将成为一种趋势;

Strapi位列Nodejs相关领域的第三名侧面反应了低 代码 的趋势还在持续升温,各家都在研制自己的低代码平台来提升开发效率;

JS Framework 相关的领域,Next.js超越Nest成为了今年的冠军。在强大的React体系的影响下,业务越来越多的人选择使用同构和直出的方案来构建Web应用;

Serverless Framework 也进入了前Top100,虽然排名不高,但是已经开始慢慢展示出了可持续发展的势头。对于一个被厂商裹挟的技术而言,这一切来之不易;

大前端生态系统已经逐步完善,前端工程化逐步完善,DevOps已经走向了系统化的发展方向,前端技术已经进入深水区;

由于直播行业的火热,以及疫情的影响,音视频领域在过去的一年也有着蓬勃的发展。在前端领域WebRTC的技术在持续升温。

接下来,主要盘点下在即将过去的2020年前端行业发生了哪些重要的事情,同时分享下腾讯IMWeb团队在过去一年中都做了哪些工作。

从2019年开始,社区内掀起了学习使用Type的浪潮,从npm的下载量来看,近几年Type呈现爆发式增长,甚至在2020年在Github语言的排行榜上跃居到了第四位。

相比于同类型工具,如Elm、Closure、Coffee等,Type可谓是一马当先:

在如此爆炸式的增长浪潮中,Type必将给前端生态带来新的气象,同时也会促使前端开发者更多地关注代码设计、易用可维护、编码原则及设计理念等方面的知识。

IMWeb团队自2018年起开启第一个Type项目,至今已完成绝大部分业务向TS的转型迁移。在多端复用模块代码中,以TS+ Jest 为基本要求,保证公共代码的可维护性和可测试性:在TS编写中,我们更多地遵循面向对象设计原则(SOLID原则、KISS原则等),适当的运用设计模式,帮助更好地进行代码开发和维护。同时,在TS践行中,辅以单元测试覆盖,可以指导我们更好地拆分组织代码,编写可测试的模块,在公共核心业务模块中覆盖单测用例。

前端界的三大主流框架:React、Angular和Vue.js,今年仍是炙手可热。此外,在过去一年,这三大主流框架还迭代了许多版本。在三大框架之中,根据过去一年的NPM下载量,React仍然稳居首位。

React自发布v16版本后,迭代的版本都是以修复、优化为主,当前最新版本v17.0.1,今年8月正式推出的v17版本,并无显著的新特性,而是一个”垫脚石“版本。为了后续能兼容 v18版本,或者说是为了能达到”逐步“升级的目的,这也能规避当项目的依赖存在多个版本React时出现问题。这种逐步升级的理念与VUE的渐进式兼容升级颇为相似。

2020年Vue.js的重大变化无疑是Vue.js3.0 的发布,有了非常多新特性,总结如下:

对Vue.js进行了完全Type重构,让Vue.js源码易于阅读、开发和维护;

重写了虚拟Dom的实现,对编译模板进行优化、组件初始化更高效, 性能上有较大的提升;Vue.js2对象式组件存在一些问题:难以复用逻辑代码、难以拆分超大型组件、代码无法被压缩和优化、数据类型难以推倒等问题;而CompositionAPI 则是基于函数理念,去解决上述问题,使用函数可以将统一逻辑的组件代码收拢一起达到复用,也更有利于构建时的tree-shaking检测,这个使用起来有些类似于React的hook;

以上变化都秉持着VUE的“渐进式框架“ 理念, Vue.js3.0 持续开发兼容旧的版本,即使升级了Vue.js3.0 也可以按照之前的组件开发模式进行开发。

加入了Webpack5,升级至 Angularv11 版本,即可使用Webpack5 的新特性,如更快的构建速度、模块联邦等。

IMWeb团队的前端技术栈主要围绕着React体系进行构建的,包含了基于Webpack的最佳实践IMFLOW,以及围绕着React体系完成的组件生态。在三大框架逐渐同质化的今。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注