【前端趋势调查系列】带你看看前端生态圈的技术趋势state-of-js 2023详细解读

239 阅读18分钟

往期文章:

【带你看看前端生态圈的技术趋势】state-of-js 2021 & state-of-css 2021 详细解读

【年更】带你看看前端生态圈的技术趋势 state-of-css 2022 & state-of-js 2022 详细解读

【前端趋势调查系列】带你看看前端生态圈的技术趋势 state-of-css 2023 详细解读

一、写在前面

  • 本次分享的数据来源是state-of-js,是由Devgraphics开源社区团队发起的前端生态圈中规模最大的数据调查。
  • 由于这个分享话题很大,涉及到的技术很多,所以很多可以深挖的技术只能一笔带过,但能出现在本次调查里的,都是有一定闪光点且有一定热度的技术,如果感兴趣的话可以深入了解。
  • 这次的调查结果比去年晚了将近四个月,这主要是因为,启动新的state-of-html调查、收集比以往更多的自由格式数据、重写数据可视化代码逻辑这几件事情工作量过于巨大,导致占用了太多时间。
  • 想要贡献 state-of-js 调查结果中文翻译的同学可以联系我,或者直接向Devographics/locale-zh-Hans这个仓库提 PR(不过我应该已经把 2023 年的调查结果都翻译完了)。
  • 如果这篇文章有其他意见或更好的建议,欢迎各位同学们多多指教。

二、受访者统计

2023 年的 state-of-js 调查共回收了 23540 份问卷结果,为了能够凸显出更多调查问卷的细节,我们针对问卷结果的图表展示做了更多的优化,同时也会披露更多细节。

地域统计

上图截取了调查中超过 200 名受访者的国家和地区,大部分国家的受访者数据分布和去年一致,来自波兰的受访者翻了 2 倍,多了 400 人,来自印度的受访者则腰斩了,少了 700 人。而来自中国的受访者则和去年差不多,一直很稳定,一直维持在 280 人左右。

虽然说从中国回收的问卷只占了全部问卷的 2%,但这并不代表说中国的前端开发者占全球的比例只有 2%,由于语言问题、宣传渠道问题和调查动机问题,实际上很多中国的开发者并不会参与 state-of-js 生态调查。根据 antd 的下载量在 npmmirror.com 和 npmjs.com 的下载量差距估算,中国的前端开发者保守估计占比在 5%左右。

也正是因为这一点,在看到这份调查数据时我们可能会有「诶这个框架在报告中很火,可是我身边没人用啊」的感觉。这其实是合理的,只通过国内的 KOL 或者国内工作接触到的技术来了解技术发展趋势,不融入国际技术社区接触一手信息,这其实是有问题的,而且只有多角度评价一项技术才能得出比较全面的结论。

年龄统计

今年调查统计的开发人员年龄分布出现了一些变化,30-39 岁的受访者占比首次超过了 20-29 岁的受访者。平均数和中位数也有了一些增长,首次突破了 30 岁(中位数是 31 岁,平均数是 31.7 岁),希望这个数据也能缓解一下大家的年龄焦虑。

JavaScript 使用经验统计

注:学习使用 JavaScript 和工作使用 JavaScript 的时间均计算在「JavaScript 使用经验」内。

从调查结果可以看到受访者的 JavaScript 使用经验分布相对均匀,4-6 年的最多,1-3 年次之,7-12 年也不少。甚至还出现了 2000 多名 js 使用经验超过 20 年的受访者——这意味着他们从 2004 年起就开始接触 JavaScript 了。只能说,国内相比于国外,web 技术发展还是晚了不少,在国内这是个完全不会出现的数据。

三、JavaScript 特性

本次 JavaScript 特性调查结果在展示上有了一些变更,它自动选取了近些年新增的 JavaScript 特性,并统计了它们的使用率。

语言特性

  • 在语言特性中,Nullish Coalescing(空值运算符)和 Dynamic Import(动态引入)的使用率已经很高了。
  • Private Fields(私有属性),是一个非常有意思的特性,它通过在类属性前面加「#」来声明它是一个 private 的属性,这是 JavaScript 语言首次官方支持 private 属性。相比于用闭包等方式来实现 private,它更加简洁好用,但是兼容性还是有些问题。
class ClassWithPrivate {
  #privateField;
  #privateFieldWithInitializer = 42;
}
  • Logical Assignment(“逻辑与”赋值),也是个很实用的属性,举个例子,x &&= y 运算仅在 x 为真值时为其赋值,比如:
let a = 1;
let b = 0;

a &&= 2; // Expected output: 2
b &&= 2; // Expected output: 0

字符串特性

  • 在字符串特性中,replaceAll 和 matchAll 的普及度已经很高了,相信大部分开发者已经在生产环境中开始使用它们了。
  • 正则表达式的 hasIndices 函数倒是相对冷门一些,它代表着如果正则表达式中 d 标志被使用,则 RegExp.prototype.hasIndices 的值是 true,比如:
const regex1 = new RegExp("foo", "d");
console.log(regex1.hasIndices); // Expected output: true

const regex2 = new RegExp("bar");
console.log(regex2.hasIndices); // Expected output: false

const regex3 = /foo/dg;
console.log(regex3.hasIndices); // Expected output: true

数组特性

  • 还在因为数组的 sort、reverse 和 splice 函数会改变原数组而苦恼吗?那你一定需要 toSorted、toReversed 和 toSpliced 函数,它们的用法和上述函数是一致的,唯一区别是返回值变成了一个全新的数组而不会改变原有数组的值!比如:
const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]

const items = [1, 2, 3];
const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
  • findLast 的使用人数也变得多了起来,虽然从后向前遍历数组也能实现完全相同的功能就是了。

异步特性

  • 异步特性中的这三个特性都是我们的老面孔了,不论是去年使用率大增的 Top-level await,还是能够在任意一个 Promise 对象 resolve 后就执行 then 函数的 Promise.any(),又或者是所有 Promise 对象都 resolve 后才执行 then 函数的 Promise.allSettled(),都是很好用的特性,我相信大家也都再过去一年中开始使用这些特性了。

痛点问题

  • 上图为受访者们认为 JavaScript 特性中的痛点问题,可以看到排在前三名的是 Static typing、ESM & CJS 和 Dates。

    • Static typing(静态类型),这个自不必多说,已经是维护大型 JavaScript 项目绕不开的一个痛点问题了,也诞生了非常多的诸如 TypeScript、Flow 之类的解决方案,但 JavaScript 标准方面却没有任何进展。
    • ESM 与 CJS 两种不同规范的冲突也给开发者带来了一定的困扰,但目前看来随着 Nodejs 逐渐开始支持 ESM 规范,这个问题也许会在未来得到解决。
    • Dates(日期处理),这也是个很常见的问题了,虽然从 moment.js 到 day.js,开源解决方案越来越多,也越来越好用,但这都不能掩盖 JavaScript 语言本身对于日期处理功能存在一定缺陷的问题。

四、浏览器 API

使用情况

  • 上图是浏览器 API 的使用情况。

    • 在所有浏览器 API 中,WebSocekt 和 PWA 的使用率是最高的。
    • Geolocation API(地理位置 API)的使用率也还不错,有 33%的受访者在使用它们。
    • WebGL、Web Animations、WASM 这三项技术都是在细分领域发挥重要作用的 API,但受限于使用场景,它们的使用率一直维持在 20%左右。

痛点问题

  • 上图是受访者们认为浏览器 API 的痛点问题。

    • 最让受访者们头疼的问题仍然是(Browser support)浏览器 API 的支持程度,也就是浏览器兼容性问题,而且是断崖式领先于第二名的痛点问题。
    • 其次就是马上成为“下一代 IE 浏览器”的 Safari,Safari 在某些浏览器 API 上总是“特立独行”,以至于开发者们不得不对 Safari 做单独的兼容处理。

五、JavaScript 技术

下图是根据 JS 技术的满意度进行的排名。满意度指的是“会再次使用这个技术的人数”。 请注意,使用率不到 10% 的代码库不包括在内。

前端框架

使用情况

使用率:

满意度:

  • 从使用率来看,最多人使用的前端框架依然是 react、vue、angular,react 的使用率仍在逐年增加,vue 的使用率在 2023 年首次超过了 angular,angular 的使用率则越来越低,svelte 的使用率也在逐年增加,达到了 25%。
  • 从满意度来看,react、vue、angular 这些成熟框架的满意度都在逐年降低,但整体来看 react 和 vue 的满意度都还不错,大概在 60%-70%的样子,svelte 满意度则是每年升高,满意度已经和 react 差不多了,有 70%。angular 满意度则是已经跌到了 32%……

痛点问题

  • 最让受访者头痛的问题是 react 相关的问题,占到了 17%。这其实也和 react 框架的满意度在逐年降低的调查结果是相吻合的。react 发展到现在,使用规模越来越大,问题也越来越多,受访者们也越来越被这些问题所困扰。
  • 排在第二位的是「Choice overload」,用大白话说就是「框架太多了选不过来了」,有 10%的受访者会在选择前端框架时产生困扰。
  • 排在第三位的是「Excessive complexity」,意思是「复杂度越来越高了」,这个其实也是一个近两年逐渐凸显出的问题,随着框架的不断迭代,新的概念越来越多,语法也越来越多,复杂度/心智负担也越来越高,导致 9%的受访者认为现在的前端框架变得太复杂了。

元框架

使用情况

使用率:

满意度:

  • 从使用率来看,Next.js 仍然是元框架中使用人数最多的,Nuxt 随着 vue 的普及,使用率也在逐年增高,今年是超过了 Gatsby 排到了第二的位置。
  • 从满意度来看,Next.js 在 2023 年有一个 10%下跌,这其实有两方面原因,一方面是 Next.js 的使用人数逐年上升,满意度下降是必然的(我们在多年的调查中都观察到了这个现象),另一方面是 Next.js 13 在 2023 年逐渐普及开来,确实有很多颠覆性的改动,有部分受访者不太能够接受。

痛点问题

  • 最让受访者头疼的问题时 Next.js 相关的问题,细分类一下的话,Next.js 的 app router 和 Next.js 13 的问题各占了 1%,这其实和 Next.js 在 2023 年有 10%的满意度下跌是相吻合的,这说明了有部分受访者不太能够接受 Next.js 13 中某些功能的大幅度改动。
  • 其次让受访者头疼的问题仍然是「Excessive complexity」,就是过高的复杂度,元框架将页面、服务器等概念都打包到了一起,复杂度的确相对更高一些。

测试工具

使用情况

使用率:

满意度:

  • 测试工具这里其实没太多变化,不论是满意度还是使用率,Jest 一直是第一名,绝大部分情况下,无脑选用 Jest 就可以。
  • 值得注意的是 2023 年出现了两匹黑马,分别是 Vitest 和 Playwright,前者是由 Vue 团队出品的最新的测试框架,随着 vue 生态的繁荣,Vitest 的使用率和满意度都有非常大的提升。Playwright 则是一款性能极佳的端到端测试工具,在 2023 年也有非常大的提升。

跨端技术

使用情况

使用率:

满意度:

  • 跨端技术仍然是 Electron 和 React Native 这两个分别用于 PC 端和移动端的跨端框架排在前两位,而且他们的满意度和使用率都非常接近。

痛点问题

  • 跨端框架中最让受访者头疼的问题是「性能」,这也是跨端框架最老大难的问题——性能&跨端框架带来的动态化和开发效率的提升,永远是需要取舍的两部分。
  • 其次就是 iOS 的问题,和 Safari 一样,苹果公司的终端总是那么“特立独行”,以至于开发者们不得不对齐做一些单独的处理。

构建工具

使用情况

使用率:

满意度:

  • 从使用率来看,webpack 仍然是使用率最高的构建工具,vite 随着近两年的普及,在使用率层面几乎已经追上 webpack 了。
  • 从满意度来看,webpack 的满意度逐年走低,「前端苦 webpack 久矣」,今年更是跌到了 45%。而 vite 在今年满意度有了进一步的提升,到了 88%,这是一个相当恐怖的数字了。之前在做生态调查时,绝大部分技术都逃不过「随着使用人数的增长,满意度逐渐走低」的魔咒,而 vite 是唯一一个打破这个魔咒的技术,足见其有多受开发者们喜爱。

痛点问题

  • 构建工具中受访者最头疼的痛点问题是「Configuration」,就是写打包配置,有 26%的受访者都对此感到头痛。随着前端项目变得越来越臃肿,引入的依赖项和插件越来越多,打包配置也必然会变得越来越复杂。到目前为止在构建工具领域也没有一个太好的解法,大部分都是通过配置模板化/插件化来减少一部分复杂度,不过未来随着 AI 能力的提升,也许 AI 辅助编写配置文件或许是一个方向。
  • 其次的痛点问题是「Performance」,也就是性能问题,这是个老生常谈的话题了,随着 esbuild 等更高性能的打包工具的普及,这个问题正在逐渐解决。

monorepo 工具

使用情况

使用率:

满意度:

  • 2023 年最亮眼的 monorepo 工具就是 pnpm 了,它甚至把前几年一直在 30%徘徊的 monorepo 使用率硬生生地抬到了 40%!而且满意度也很高,达到了 64%,可以说目前最好用的 monorepo 管理工具就是 pnpm workspace 了。

六、其它工具

工具库

  • 上图为受访者使用的其他工具库,可以看到 lodash 使用率排名第一;排名第二的是 date-fns,这是一个用于日期处理的库;第三是 Zod,这是一个优先使用 TypeScript 的模式声明和验证库,在处理和验证复杂格式的字符串的时候非常好用。

后端框架

  • 上图为受访者使用的后端框架,可以看到 express 断层式领先,领先第二名 Nest 足足有 44%!可以说在后端开发框架方面,绝大部分情况都可以无脑使用 express。不过在国内这个情况稍有不同,国内因为前些年 egg.js 影响比较大,所以用 koa 的会比上图调查数据多不少。

JavaScript 运行时

  • 上图为受访者使用的 JavaScript 运行时情况,可以看到绝大部分受访者仍然是在浏览器环境和 Node.js 环境下运行 JavaScript。像 Bun 和 Deno 这些新的运行时,使用率并不高,看下来还有很长一段路要走。

AI 编程工具

  • 上图为受访者使用 AI 辅助工具的情况,可以看到绝大部分受访者都在使用 ChatGPT 和 Copilot 辅助编程,不使用辅助工具的受访者仅有 18%,看下来大模型时代使用 AI 工具辅助开发已经是一个大趋势了。

七、JavaScript 使用情况

JavaScript 和 TypeScript 的使用情况

  • 上图为受访者使用 JavaScript 和 TypeScript 的情况,可以看到 TypeScript 的使用率已经非常高了,有 32%的人完全使用 TypeScript 进行编程,相比之下完全使用 JavaScript 的受访者仅有 9%。可以说 TypeScript 已经变成了前端开发者的首选开发语言了。

使用场景

  • 上图为受访者使用 JavaScript 的场景,有 98%的受访者将其用于前端开发,有 67%的受访者将其用于后端开发,还有 20%-30%的开发者将其用于开发移动端和 PC 端应用,以及 16%的受访者将其用于数据可视化。

痛点问题

  • 上图为受访者使用 JavaScript 的痛点问题。

    • 最让开发者感到头痛的问题是 Code Architecture(代码架构),这其实也是编程领域永恒的难题。这个问题没有银弹,只有多思考,多学习,多梳理代码架构,才能找到最适合的解决方案。
    • 排名第二的问题是 State Management(状态管理),这也是一个老生常谈的问题了,也因此产生了很多我们常用的诸如 redux、mobx 之类的状态管理库——当然,这些状态管理库中也都或多或少有一些“不太好用”的地方。
    • 排名第三的问题是 Build Tools(构建工具),这也是一个被吐槽很久的问题了,从前几年「前端苦 webpack 久矣」到后面诸如 swc、esbuild、vite 等性能更好的构建工具的涌现,越来越多的开发者、团队、框架都在尝试用更好的办法解决前端构建的问题。

六、今年 JavaScript 的亮点

使用率进步最大的技术

满意度最高的技术

最感兴趣的技术

自由问题提及次数最多的技术

评论次数最多的技术

最受喜爱的技术

七、总结

总的来说,2023 年 JavaScript 生态仍在稳步发展。

在前端框架、元框架、构建工具等方向,我们看到新的技术的出现的速度比大多数人能够学习的要快。这意味着,为了避免陷入「学不动了」的情况,开发者们需要从以下这两个选项中选择自己的道路:一是,你可以做第一个吃螃蟹的人,不停学习新技术,走在新技术最前沿;二是,放慢脚步,专注于稳定、成熟的技术,并在它们冷却后学习新的热点技术。

在 JavaScript 技术领域,我们看到开发者们不再钟情于一些广泛使用的库,比如像 Svelte、Solid 和 htmx 这样使用率不那么高的库在满意度方面也取得了相当好的成绩,这也证明了 JavaScript 生态的活力。另外一方面,我们看到“Rust 化”在前端基建方向也成了一种新的潮流,像编译器、构建工具、元框架等领域都出现了不少基于 Rust 的技术。

而回归 JavaScript 和浏览器本身,也有许多不错的进展,比如 toSort 等非常实用的 API 的出现,PWA 的更广泛使用等等。

同时,我们也发现 JavaScript 正在向服务器端转移,像 Next、Nuxt、Remix 这样的元框架的使用率迅速增长,也有很多新应用使用了这种「服务器优先」的开发模式,也正是因为如此,很多前端框架诸如 react、vue 等,也都在这个领域继续构建自己的生态。

当然最让人惊喜的还是 Vite 和 Vitest 了,Vite 再次成为满意度最高的技术,Vitest 成为受访者最感兴趣的技术,这都代表着受访者对于这些杰出库的认可,也代表着 Vue 团队在前端生态圈中越来越大的影响力。

最后,在 state-of-js 2024 调查中,我们会继续改善调查结果的多样性,让更多的人参与开发来提升调查结果的发布效率。

明年见!

八、花絮

在制作今年的 state-of-js 调查中,发生了不少有趣的事情,这些外国老哥都特别有意思,今年我想把这些事情放到解读的最后,供大家开心一下。

Ok i’ll bring them back. Just for you!

今年 JavaScript 的亮点本来@SachaG是不打算做的,但我和他简短交流了一下,于是,今年的 JavaScript 亮点就回来了!(请把“评论区”打在“牌面”上)

My 2023 pick: Rspack

前些年的「My yearly pick」都是@SachaG单独私聊找人写的,今年改成从社区征集了,大家都很踊跃,有推荐框架的,有推荐博客的,有推荐自己写的文章的,征集了十几条。我也搞到了一个位置,给 Rspack 吹了一波。

另外@Emma Bostian推荐的《作为一名新任管理者如何与各方建立信任》文章我觉得也很不错,推荐给大家!