如今的前端早已不再拘泥于满足页面展示，而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业，继而影响商业结果。这种表象的改变背后是本质的转变，从更为宏观的角度来说，前端正在通过持续的技术革新和技术融合不断突破自身边界，进而重新定义自身价值。在这种大变革的时代背景下，广州蓝景前端团队也正在与时俱进得进行着技术更新、优化与升级，结合自身这一年的快速发展，广州蓝景前端团队为大家带2022年上半年大前端技术趋势解读。

回顾2022年上半年的技术趋势

前端相对于其他it来说，目前形势还是不错的。前端现在的触手已经延伸的十分广泛，服务端，计算机视觉，浏览器内核，图形渲染，数据可视化，移动端，游戏，VR，甚至现在风头正盛的鸿蒙开发。 都有前端的一席之地。

前端早已由单纯工具解决问题的属性逐步转变为深入产品机制解决商业问题的角色。前端开发者的关注点也早已不是如何使资源利用效率更高，页面体验更优以及保证业务的稳定输出，而是更为关注产品能力、产业模式、数据建设以及商业转化。

开源站点bestofjs.org收录了Github上1500个开源项目，基于Bestofjs去年的2021年JavaScript明星项目报告和近一年Trending排行 数据，下面展示了Top10的前端重点项目，可以看到，有非常多的老面孔，但也出现了很多新面孔，例如Tauri替代Electron，解决后者的大而慢的问题，基于 Rust开发，近期发布了 1.0版本，又例如vite，大有超越webpack的趋势，借助esbuild的优秀性能构建速度和更开箱易用的特性，而被多个开源项目所使用。

同样的，我们还基于 GithubTrending API 的公开数据，更新统计这些项目的Stars新增趋势。相比于去年，学习资源越来越丰富了，Top100 内有14个项目是与前端基础学习相关的，侧面可以看出前端行业的繁荣；同时也反映出知识和人才的迭代速度是非常快的。Javascript算法与数据结构是过去一年Star增长最快的开源项目，打破了Vue.js连续4年登顶的垄断 。 还记得当年Deno的出现，出现的那句经典的 “求不要更新了，老子学不动了”。

事实证明“学不动的时代” 并没有到来，而是更发的引起了学习的浪潮。 除了跟学习相关的项目，倘若只关注垂直领域的技术项目，我们会惊喜地发现以下这9点：

1.TypeScript持续升温，依旧保持着高速成长的状态，未来的潜力不可限量；

2. 构建工具方面，今年绝对是Vite的爆发之年，不管是大厂的支持，还是排名上，都是稳稳的第一名，力压第6位的webpack和第9位的rollup;

3. 通过项目分布的情况，明显能看到React生态圈>> Vue 生态圈>> Angular 生态圈,但vue的优势并不明显 ；

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

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

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

7. Serverless Framework 也进入了前Top100， 虽然排名不高，但是已经开始慢慢展示出了可持续发展的势头。且能在各大云厂商中广泛应用，也算是对其前景的肯定;

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

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

总结2022年上半年度趋势

1. Typescript爆发增长

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

数据来源：github

在最新的2022Stack Overflow Survey 中，TS受大家喜爱程度排名第五，力压后台大哥Java： 数据来源：stackoverflow2022

相比于同类型工具，如ClosureScript、CoffeeScript等，TypeScript可谓是一马当先，且上升趋势非常快：

数据来源：stateofjs2021

2. 亚洲开发者数量逼近北美体量

侧面反映出，IT从业人员的持续性增加和该行业的活跃度和规模化，并且今年依然会有一个持续增长的态势。

3. 三大框架Vue当先

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

react的生态：

随着今年React 18的发布，期待已久的并发渲染器、对 Suspense 的更新，还有服务器组件等，现在的React正在发力于浏览器和服务端，它会变得无处不在。

vue的生态：

在 Vue 3 正式发布一年多后，我们看到这个生态系统正伴随着许多伟大的创新迅速发展。也为 TypeScript 的开发带来一波红利；以 Composition API 为基础建立的新状态管理器 Pinia 成为 Vuex 的继承者。

并且随着 Vite 成为 Vue 新的默认工具，Nuxt 3、Quasar 和 VitePress 等元框架现在都使用 Vite 作为其默认引擎。让开发者体验有了巨大的改进，并为创新打开了许多新的大门。

社区还在调整 Vue2 到 Vue3 的开发者体验上的问题,使迁移过程更加顺利。对于 Vue 开发者来说，这是伟大的一年，他们的应用在开发者体验和性能方面都得到了巨大的改善。

4. Low-Code恰逢其时

从2014年Forrester的研究报告提出 “low-code” 一词到今天，低代码领域持续升温。从低代码领域的行业角度看，2017年后，微软、甲骨文等各大厂家纷纷加入了低代码赛道的竞争。近年来，获得3.6亿美元融资的Outsystems更是成为低代码领域海外市场的一只独角兽。国内方面，也不乏云凤蝶、点石、iVX、轻流、积木等平台的诞生，低代码产品领域的蓬勃发展，正成为特定场景软件开发的重要趋势。

5. 全栈开发持续深耕

从DevOps到NoOps的路径之一，便是目前大家都在尝试的Serverless了。自从2012年有了Serverless的概念开始，至今已经10年头了。近年来随着国内的云厂商，如腾讯云、阿里云、华为云对Serverless的支持，并且伴随着小程序云开发的普及，国内的开发者对Serverless的使用已经非常熟悉了。

今年9月CodingSans 联合其9个合作伙伴，发布了Serverless2022 年度状态报告。调查结果显示：有75%的开发者会在公司使用这项技术。如此高的Yes也基本反映出了这样的技术已经被大众普遍接受并使用。

我们可以看到开发者选择应用Serverless的场景有很多，比如：为小程序、Web、Mobile提供基础性的API服务，大规模批处理任务处理，Web站点、DevOps的工具以及GraphQLAPI能力。

与其说Serverless是一项技术，不如说Serverless是一种理想的工作模式，是一种专注于业务价值的思考。单纯的通过函数进行业务交付，而不再需要关心解决业务问题之外的事情，比如：那些非常繁琐的基础设施。托管服务可以让开发者更专注于编写业务函数，从而减少对机器资源、降低运维成本的考虑，可以让开发者更专注的为产品和用户创造价值。随着云厂商对于Serverless的支持，后续会有越来越多的开发者，可以体会到云时代给大家带来的便利。

6. DevOps渐进增强

研发效能是2022年提到的比较多的一个热词，特别是在大厂，提到效能不得不提到近几年非常火热的DevOps，开发运维一体化流程，CI/CD流程的串联，帮助业务提升研发效能。

不过，想要完全达到DevOps的效果，难度是很大的，DevOps链路涉及到非常多的工具链，使用学习成本较高,但好在现在主流的云厂商，如腾讯云、阿里云，亚马逊云等，都提供了很多完整的DevOps解决方案，只要我们系统学习后，就可以快速运用起来。

7. WebRTC持续升温

随着互联网的不断加速和音视频技术的不断发展，许多以音视频技术为依托的产品相继面世，比如：直播、短视频等等。从3G到4G，再到即将到来的5G时代，移动网络的带宽和质量越来越高，海量低延迟直播、互动直播也成为了可能。音频技术发展到今天，实际已经非常成熟了。从H264/H265、VP8/VP9以及后面的AV1编解码器，解决了视频压缩率的问题；而5G的商用，解决了带宽的问题。这两个问题解决后，各行各业都开始使用音视频技术来实现更佳的用户体验，比如：音视频会议、直播带货、在线教育、远程医疗、娱乐游戏等等。

2022年由于疫情的影响，大家更多地认识和了解到音视2频相关的行业。音视频技术底层离不开编解码标准的发展。而就在今年，新一代国际视频编解码标准（H.266/VVC）正式出炉，其后续的落地实践非常值得关注。从行业应用的发展来看，围绕音视频直播一定会有三个发展方向：更快、更便宜、更智能。之前音视频领域有两大技术路线：一类是RTC，它主要用于满足多人会议中的低延时互动；另一类是流媒体直播/点播，主要满足于对延时要求不大的高并发低成本场景。而端上的音视频处理技术主要围绕更智能，诸如人脸识别、美颜、降噪、超分等处理优化来展开, 行业中也有更多的实践落地，从后端到前端都在探索更为极致的体验。

WebRTC有个特别宏伟的愿景：可以在浏览器上快速开发出各种音视频应用。但这早已不再仅仅是愿景，而是已经在逐步成为现实。

从Chrome、Firefox到近几年苹果Safari的加入与支持，各个云服务厂商、腾讯云、阿里云、网易云、七牛云以及诸如专门音视频服务商（声网和即构科技等等），都将WebRTC纳入浏览器实时音视频首选方案。

从StackOverflow Trends 和GoogleTrends来看：WebRTC的热度不断上升，而且由于2022年疫情的影响，直播带货、在线会议和在线教育等远程实时音视频技术的也迎来了风口，关注度急剧上升。

8. WASM的广泛应用

WebAssembly源于Mozilla发起的Asm.js项目，也被称为“设计补充 JavaScript”，其本解码速度比JS解析快得多，让高性能的Web应用在浏览器上运行成为可能。该模块可在浏览器中的专有虚拟机上执行，与JavaScript虚拟机共享内存和线程等资源。目前主流浏览器基本都支持了WebAssembly。

在2019年12月15日WebAssembly正式成为WorldWide Web Consortium (W3C) 的标准，加入到了HTML、CSS和JavaScript的行列，继而成为浏览器官方的标准的第四门语言。WebAssembly也正式抵达了1.0版本，获得了主流浏览器Firefox、Chrome、Safari和Edge的支持。

据统计了解，例如腾讯视频的直播播放器，字节、B站等带直播能力的播放器，已经在使用基于WebKit的WebAssembly实现的编译、启动和运行时等benchmarking领域的技术。当然除了音视频领域，以后也会出现WebAssembly新型生态系统等应用。

展望2022年下半年技术趋势

技术的核心价值是为业务创造价值。那么，如何能快速满足业务发展诉求呢？首先，我们始终离不开解决成本、效率、质量三者之间的平衡。因此，提升基础物料的可用性、提升开发工具的便捷性、完善动态运营的灵活性以及解决产品质量的稳定性，这些永远都会在我们的日常工作中持续进行，并且在追求极致的道路上永无止境！

正所谓分久必合，合久必分。 无论是选择极权式的中台化解决方案，亦或是选择去中心化的业务自制模式，都可以提升技术在业务的影响力。当然选择什么样的方式，这与企业自身的基因和团队发展的阶段有很大的关系。

在垂直领域的技术发展方面，我们对2022下半年年可以做一些展望：\

• 三大框架的同质化会越来越明显，而周边配套还在可持续的发展中。从开发者的基数上可以看到未来一年React还是会持续性地领先，但这并不妨碍Vue的优秀；

• 由于可维护性和系统的复杂度上升，TS未来一年依旧会保持强劲的势头吞噬JS的版图， 未来会有更多的开源框架和基础组件拥抱TS社区。

• 大前端领域的前端工程化如今已经慢慢成熟和稳定了，而在未来一段时间，更多是基于全栈开发的工程化体系的建设。前端开发者会更多的借鉴后台开发的经验去加速这一历史进程的速度，尽快完成全栈研发体系的升级和探索。

• 随着WebAssembly持续性的发展，会有越来越多的产品在业务上落地WASM这项技术。而随着WASM的发展浏览器桌面应用化的趋势也会越来越明显。 WebOS未来是否能够落地，相信WASM在其中一定扮演了重要的角色。

• 小程序的标准化虽然提上了日程，但是由于有微信这样超级APP的存在，标准化的道路注定不会平坦。 跨端开发上最耀眼的明星还是Flutter，而苹果公司发布的SwiftUI也在路上了。从开发者的角度来看，多端同构是一种美好的愿望，但是任重道远，仍然需要长期且持续性的攻坚克难；

• 与其说是Serverless不断地持续升温，不如说是泛前端的时代已经到来。前端团队寻求价值的渴望驱使着开发者们不断突破着自己的工作范围；前端服务化的工作模式已经从萌芽阶段发展到路人皆知的阶段了， 大前端服务化的趋势已经是这个时代不可逆转的趋势了。

• 随着5G网络的普及和手机硬件的不断提升，流量瓶颈和渲染性能在未来一年会有质的提升，这其中最大的受益者就是从事音视频领域的开发者。相信在未来的一年里，音视频领域一定是百花齐放的状态。

• 低代码的场景天然的靶场就是在B端业务中进行抽象和实现。而随着产业互联网的提出，整个行业进入了ToB的转型期，未来的低代码会越来越受到大厂的重视。 当然，低代码还是要持续解决三大问题：基础平台的能力完善、开发质量更加可控，以及低代码产物的可维护性提升。 可以遇见的未来低代码会火爆的表现，并且会在生产中绽放光彩。

今天的分享就到这里，如果今后有相关的前端学习或技术类的问题，欢迎在评论区留言或私信我们，也可以添加我们微信：bluej333，电话：15013001692

广州蓝景实训部--24人小班前端实训，前端“从学习到就业”路上的老司机，为你保驾护航。