往期文章：

【带你看看前端生态圈的技术趋势】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推荐的《作为一名新任管理者如何与各方建立信任》文章我觉得也很不错，推荐给大家！