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

往期文章：

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

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

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

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

一、写在前面

• 本次分享的数据来源是state-of-css和state-of-js，是由Devgraphics开源社区团队发起的前端生态圈中规模最大的数据调查。
• 由于这个分享话题很大，涉及到的技术很多，所以很多可以深挖的技术只能一笔带过，但能出现在本次调查里的，都是有一定闪光点且有一定热度的技术，如果感兴趣的话可以深入了解。
• 想要贡献state-of-js调查结果翻译的同学可以联系我，或者直接向Devographics/locale-zh-Hans这个仓库提PR（不过我和另外一位社区小伙伴应该已经把2024年的调查结果都翻译完了）。
• 如果这篇文章有其他意见或建议，欢迎各位同学们多多指教。

二、调查人员统计

今年的state-of-css调查共回收了 9704 份问卷结果，state-of-js调查共回收了 14015 份问卷结果。和去年相比，css的问卷结果多了一些，js的问卷结果少了一些。

虽然这主要还是23年的state-of-js调查延期的锅，但前段时间在社区里我和@SachaG内部也有讨论，自2022年起，填写问卷的人越来越少，我们尝试分析了一些原因——比如前端的整体热度都在走低，像是google trends上前端相关的搜索词的热度都在下降；再比如问卷内容过长导致内容填写起来比较麻烦；还有不少受访者虽然一直关注这项调查，但填了第一年的问卷之后第二年的问卷就不填了等等。

于是今年我们在调查中专门增加了「用户元数据」部分，来披露更多的调查人员统计信息。

2-1、调查人员地域统计

上图截取了state-of-js调查中回收问卷数量，从中国回收的问卷数量为150，占了全部问卷的1%。state-of-css调查中中国区的问卷数量非常少，只有几十份，就没有在调查结果中披露了。

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

也正是因为这一点，在看到这份调查数据时我们可能会有「诶这个框架在报告中很火，可是我身边没人用啊」的感觉，这也是合理的，毕竟环境不同，面对的开发任务也不同，因而国内和国外、大公司和小公司采用的技术栈都有可能完全不同。

2-2、调查人员年龄统计

今年的调查继续统计了开发人员年龄，值得高兴的是，开发人员年龄分布右移更加明显了，去年是30-39岁的受访者占比首次超过了20-29岁的受访者，而今年30-39岁的受访者变得更多了，中位数已经从去年的31增长到了今年的33岁！虽然说网上经常会渲染35岁年龄焦虑，但从调查的数据来看，情况看起来没有想象中的那么糟糕，也希望这个数据缓解大家对于年龄的焦虑感吧。

三、state-of-css

3-1、CSS特性

下图根据使用率划分，显示了top15特性的采用率。深蓝色部分为「使用过」该特性的人数占比，浅蓝色部分为「听说过」的人数占比，灰色部分为「没听说过」的人数占比。另外，每个部分中绿色下划线的部分为对该特性「表示满意」的人，红色下划线部分为对该特性「不满意」的人。

• css filter effects，也就是滤镜效果（blur()、contrast() 等）意外成为 2024 年使用最广泛的 CSS 特性，75.4% 的受访者表示使用过。

• 然后是一些熟悉的老朋友——has选择器、Intrinsic Sizing Keywords（也就是fit-content、max-content之类的关键字）、aspect-ratio、scroll-behavior等等，这些都是在前几次state-of-css调查中经常上榜的特性。

• 那榜单上有哪些新面孔呢？

  • 首先是prefers-color-scheme，这是一个媒体查询的特性，用于检测用户是否有将系统的主题色设置为亮色或者暗色的特性，在针对亮色/暗色主题做定制化样式时非常好用。prefers-color-scheme - CSS：层叠样式表 | MDN
  • 其次是prefers-reduced-motion，这是也一个媒体查询的特性，用于检测用户的系统是否被开启了动画减弱功能，如果用户修改了系统设置，将动画效果最小化，那最好将所有的不必要的动画效果都移除掉。prefers-reduced-motion - CSS：层叠样式表 | MDN
  • 再然后是line-clamp，这是一个可以把块容器中的内容限制为指定的行数的特性，超过则显示省略号，也很常用。-webkit-line-clamp - CSS：层叠样式表 | MDN

3-2、CSS技术

CSS框架与UI库

• 在CSS框架和UI库方面，Tailwind CSS继续走在其他更传统的CSS框架前面，独树一帜，使用率也相比之前有了大的突破，今年甚至超过了Bootstrap。
• Ant Design也有了进步，在今年的调查中，作为UI库，已经能爬到第三名的位置了。

CSS-in-JS 框架

CSS-in-JS框架则趋向稳定，从使用率上看，还是这三个老牌框架CSS Modules、Styled components、Emotion使用率最高。虽然CSS-in-JS的一些优点可能已经被诸如css variables之类的特性所取代，但从长远来看，这个领域仍有值得期待的地方。

3-3、浏览器环境与设备

下面这张图显示了开发者们会在哪些浏览器中进行开发和测试

可以看到对于 Chrome、Firefox、Safari、Edge 这些主流的浏览器，开发者们基本都要对其进行测试，值得注意的是，Arc浏览器的使用率正在缓慢爬升，从去年的7.8%上升到了今年的12%。

另外在移动端，主流的浏览器是Safari、Chrome Android、Chrome iOS。

3-4、CSS的痛点

下面这张图显示了开发者们认为CSS的痛点问题

• 首先最大的痛点问题还是浏览器对于不同特性的支持程度，这是个老生常谈的话题了，将其称之为CSS永恒的痛点都不为过。

• 其次是Tailwind CSS，这是很有意思的一个信号，随着Tailwind CSS的普及，一些人逐渐为其原子化样式的写法而烦恼（尤其是当你要给一个元素添加十余种原子化样式时），而另一些人则抱怨它使用得不够多。

• 再然后是三个并列第三的问题——复杂度过高，Safari，以及条件逻辑。

  • 复杂度过高是指随着CSS特性的逐渐发展，增加了越来越多的特性，但随之而来的就是更高的复杂度，这给一部分开发者带来了困扰。
  • Safari现在已经成为了新时代的IE了，它总有一些API和web标准不一致，需要单独做兼容，很让开发者头疼。
  • 条件逻辑则是今年新出现的痛点问题，主要是指现有CSS条件判断能力的缺失。一方面，只靠媒体查询难以应对复杂的样式条件判断，开发者们只能使用js在运行时动态修改样式。另一方面，如果CSS条件判断能力做的过于复杂，那又会面临「复杂度过高」的困扰。让我印象深刻的是，在调查中，有一位老哥还评论「CSS is becoming brainfuck language」，这说明并不是所有开发者都希望CSS变得过于复杂。

3-5、今年 CSS 最大的亮点

使用最多的功能

最受喜爱的功能

被评论最多的功能

四、state-of-js

4-1、JS特性

语法特性

• 在语言特性中，Nullish Coalescing（空值运算符）和Dynamic Import（动态引入）的使用率最高，普及率相比去年都有2-3%的提升。
• Private Fields（私有属性）今年提升了10%，使用率来到了45%，它通过在类属性前面加「#」来声明它是一个private的属性，这是JavaScript语言首次官方支持private属性。相比于用闭包等方式来实现private，它更加简洁好用，兼容性相比去年也有所改善。私有属性 - JavaScript | MDN

class ClassWithPrivate {
  #privateField;
  #privateFieldWithInitializer = 42;
 }

• Logical Assignment（“逻辑与”赋值），今年也提升了10%，使用率达到了44%，这是一个比较实用的语法糖，x &&= y运算仅在x为真值时为其赋值。逻辑或赋值（||=） - JavaScript | MDN

let a = 1;
let b = 0;

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

字符串特性

• 在字符串特性中，replaceAll和matchAll的普及度已经很高了，他们在今年也有2-3%的使用率上升。相信大部分开发者已经在生产环境中开始使用它们了。

数组特性

• 在数组特性中，增长的最迅猛的就是toSorted了，它在今年有10%的使用率提升！它和sort函数用法一致，唯一区别是返回值变成了一个全新的数组而不会改变原有数组的值，使用这个API，我们就不会再因为原数组被改变而苦恼了。Array.prototype.toSorted() - JavaScript | MDN

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]

• Array.fromAsync()则是今年新增的一个数组特性，它可以为异步迭代器直接创建一个数组。Array.fromAsync() - JavaScript | MDN

const asyncIterable = (async function*() {
    for (let i = 0; i < 5; i++) {
        await new Promise(resolve => setTimeout(resolve, 10 * i));
        yield i;
    }
})();

Array.fromAsync(asyncIterable).then(array => console.log(array)); // [0, 1, 2, 3, 4]

异步特性

• 在异步特性中，Promise.allSettled()使用率最高，而且相比去年有4%的提升。
• 今年新增了一个Promise.try()的特性，它接受一个任意类型的回调函数（无论其是同步或异步，返回结果或抛出异常），并将其结果封装成一个Promise，不过它在firefox上完全不可用，可以先观望。Promise.try() - JavaScript | MDN

function doSomething(action) {
    return Promise.try(action)
      .then((result) => console.log(result))
      .catch((error) => console.error(error))
      .finally(() => console.log("完成"));
  }
  
  doSomething(() => "同步的结果");
  
  doSomething(() => {
    throw new Error("同步的错误");
  });
  
  doSomething(async () => "异步的结果");
  
  doSomething(async () => {
    throw new Error("异步的错误");
  });
  
  // 使用 async/await 语法实现的相同效果的代码如下：
  async function doSomething(action) {
    try {
      const result = await action();
      console.log(result);
    } catch (error) {
      console.error(error);
    } finally {
      console.log("Done");
    }
  }

浏览器API

• 在所有浏览器API中，WebSocekt和PWA的使用率依然是最高的，这和去年一致，使用率基本也没什么变化。
• Geolocation API（地理位置API）、WebGL、Web Animations、WASM这几项技术都是在细分领域发挥重要作用的API，但受限于使用场景，它们的使用率和去年相比基本也没有变化。
• 所以总的来看，浏览器API的使用情况基本已经固定下来了，从近两年来看，不论是使用率还是排名，都没什么变化。

痛点问题

下面这张图显示了开发者们认为JS特性的痛点问题

• 排在第一名的是Static typing（静态类型），它从去年开始就一直在痛点问题榜单中排名第一。这个问，已经是维护大型JavaScript项目绕不开的一个痛点问题了，也诞生了非常多的诸如TypeScript、Flow之类的解决方案，但JavaScript标准方面却没有任何进展。
• 排在第二名的是浏览器对于不同特性的支持程度，相比去年，这个问题的排名上升了3位，而且它在CSS的痛点中排名第一，看起来越来越多的开发者被它所困扰。
• Dates（日期处理）这个问题也是榜单上的熟面孔了，它在去年的榜单中就排在第三位。虽然从moment.js到day.js，开源解决方案越来越多，也越来越好用，但这都不能掩盖JavaScript语言本身对于日期处理功能存在一定缺陷的问题。
• 另外值得注意的是，今年榜单中出现了一个新上榜问题——Standard Library，许多开发者都表示JS现在缺失了官方的标准库。虽然我们在各个领域都有社区的实现方案，比如日期处理我们有day.js、moment.js，高精度数处理我们可以用decimal.js等等，但这些库或多或少都面临着不再维护、API设计有缺陷之类的问题。所以开发者们越来越希望能有一个JS官方的标准库。

4-2、JS 技术

综述

下图根据使用率划分，显示了top15技术的采用率。深蓝色部分为「使用过」该特性的人数占比，浅蓝色部分为「听说过」的人数占比，灰色部分为「没听说过」的人数占比。另外，每个部分中绿色下划线的部分为对该特性「表示满意」的人，红色下划线部分为对该特性「不满意」的人。

Webpack是使用率最高的JS技术，但它的满意度有些低。满意度最高的JS技术是Vite，它获得了56%的好评。令人吃惊的是，尽管Vite推出的时间相对较短，但它已经成为了使用率第三高的JS技术！

另一方面，React不仅在使用率排行榜上位列第二，而且在满意度排行榜上也位列第二——这对于一个已经有10多年历史的项目来说是相当不容易的！

State of JavaScript 2024: JS技术满意度和使用率一览

随时间变化的趋势

下图代表着这些库随时间变化的趋势。它有四个象限，纵向由下至上代表着使用率由低到高；横向由左至右代表着使用体验由坏到好。也就是说，这张图中每条线越往右上走，代表着开发者对这个库的使用态度越积极，反之，则代表着这个库越来越不被大家所使用。

随着时间的推移，JS的技术通常会出现 “回旋镖”模式——早期获得积极评价（横轴向右），使用率会增加（纵轴向上），但用户随后会遇到更多的问题，使用评价会变得消极（横轴向左）。

因此，看到那些能够逆势而上的项目总是很有意思，比如Vue和Angular，它们都在经历了几年的不景气之后再次获得了积极的评价。

State of JavaScript 2024: JS技术随时间变化的趋势

前端框架

使用率：

满意度：

• 从使用率来说，还是这熟悉的三位面孔：React、Angular、Vue，虽然去年Vue的使用率首次超过Angular，并拉开了5%的差距，但从今年的调查来看，Angular追赶的势头很猛，现在两者只有1%的微小差距了。
• 从满意度来说，Solid.js这款5年前的“新秀”框架仍然位居榜首，抛弃Vdom使其拥有了非常小的包体积和极佳的性能，确实能为开发者带来不错的体验。
• 值得注意的是，Vue在今年满意度有了一个非常恐怖的提升，达到了12%，一般来说，随着用户规模的不断增加，框架的痛点问题会越来越多，但Vue在今年逆势而上。看了下开发者的反馈，这主要得益于Vue生态的逐步完善以及Vue3的逐渐普及。

元框架

使用率：

满意度：

• 元框架这里主要指的是前后端一体化的，用于渲染前端页面的框架。因此，像express和koa这样的后端框架没有上榜。
• Next.js依旧是使用率最高的框架，使用率达到了54%，但值得关注的是，它的满意度跌了8%，使用率也跌了2%，留存率排在所有元框架里的倒数第二。看起来确实有一部分用户因为使用体验问题而选择放弃了Next.js。
• Astro的满意度升高了4%，今年已经达到了94%，是满意度最高的元框架，同时它的使用率今年也有4%的增长，成为使用率第二高的元框架，是非常有潜力的框架。

测试工具

使用率：

满意度：

• 今年Vitest依然保持了强劲的增长势头，使用率增长了7%，目前已经达到了40%，排名第三，而且满意度连续三年排行第一，今年更是到达了98%！作为一个4年前的框架，能做到这种程度并从相对稳定的老牌框架诸如Jest、Storybook中脱颖而出，真的非常不容易。
• 当然，从使用率来看，Jest还是第一，但使用率今年也有所下降，降低了2%。不过在未来，测试工具的使用率是否会持续变化，仍然很值得期待。

跨端技术

使用率：

满意度：

• 跨端框架这里和去年相比没有什么变化，仍然保持一个相对稳定的状态。
• 去年的黑马Tauri今年也面临着增长乏力、使用率下跌的问题。
• 另外，老牌框架React Native和Electron这两个分别用于PC端和移动端的跨端框架使用率仍然是最高的，而且他们的满意度和使用率都非常接近。

构建工具

使用率：

满意度：

• 与同门兄弟Vitest一样，Vite也在以非常恐怖的速度扩大市场份额，今年它使用率又增长了5%，达到了78%。
• 另外值得关注的是Rolldown和Rspack，这两个基于Rust编写的构建工具成为了新的黑马，他们都有一个非常高的满意度，分别为91%和89%。尤其是Rspack，它采取了非常聪明的策略，首先把大公司的份额吃下来（其实就是字节跳动），成为公司内webpack的直接替代品，并对产品进行不断打磨，然后向其他公司和个人开发者进行推广，也取得了非常不错的效果。
• 而老牌打包工具webpack，虽然使用率仍然是最高的，有86%，但满意度已经跌到35%了。在所有细分领域使用率最高的JS技术中，它的满意度是最低的。开发者们对于webpack的负面反馈越来越多，而webpack并没有做太多优化这些负面反馈的动作。看github上的commit，也是以fix和chore为主，仿佛已经摆烂了，作为一个用户量如此庞大的构建工具，属实不应该。

Monorepo工具

使用率：

满意度：

• 从使用率来看Monorepo尚未成为主流的Web开发方案，但对于那些持续探索这一新领域的开发者来说，pnpm 似乎是当之无愧的领跑者。不论是使用率还是满意度，都排行第一。
• 另外，我们还观察到一些有趣的信息，在超过500人的公司中，Monorepo工具的使用率要远比大盘高。由于公司规模通常与代码库规模相关联，所以这意味着Monorepo工具在代码库规模变大时，会更容易被开发者采用。

4-3、JS的使用情况

JS与TS的平衡

下图展示了开发者编写JS和编写TS的占比

• 从图中，我们不难看出，我们现在已经进入了TS的时代。67%的开发者编写的TS代码多于JS代码，而最大的一个群体是只编写TS的人，占到了总调查人数的1/3。

辅助编写JS的AI工具

下图展示了开发者使用的AI辅助编程工具

• AI辅助编程是近两年的热门话题，而开发者们最常用的辅助编程工具是ChatGPT和Copilot，当然，像是Claude、Gemini这些大模型工具也是有力的竞争对手。
• Cursor作为AI IDE，虽然和上述大模型工具不是一个维度的产品，但也有了11%的使用率，也是非常有潜力的。

JS的痛点问题

下面这张图显示了开发者们认为JS的痛点问题

• 最让开发者感到头痛的问题是代码架构（Code Architecture），它在去年就是排行第一的痛点问题，它其实也是编程领域永恒的难题。这个问题没有银弹，只有多思考，多学习，多梳理代码架构，才能找到最适合的解决方案。
• 排名第二的问题是状态管理（State Management），它也是经常上榜的老问题了，虽然说为了解决这个问题，社区中产生了很多我们常用的诸如redux、mobx之类的状态管理库，不过他们中也都或多或少有一些“不太好用”的地方，这也导致仍然有非常多的开发者认为状态管理是JS的一大痛点。
• 排名第三和第四的问题有所变化，去年第三是构建工具，第四是依赖管理，今年反过来了。看起来随着新的构建工具的出现，构建工具的痛点问题正在逐渐解决，反而是依赖管理这个问题逐渐凸显。当然，依赖管理这个问题和node_modules的底层设计是强相关的，纵使有pnpm这样相对好用的打包工具，在现有设计模式下，依然有很多诸如影子依赖、产物复用等问题需要去解决。

4-4、今年 JS 最大的亮点

使用最多的技术

满意度最高的技术

最受关注的技术

被评论最多的技术

最受喜爱的技术

五、总结

从2024年算起，三大前端框架——React、Vue、Angular都已经推出十年（或超过十年）了！诚然，这三个框架都经历了许多变化，它们中的一些API和设计模式在如今看来也稍显陈旧，但考虑到JS生态系统以不断变化的特点而闻名，能够看到这些老牌框架仍然被广泛使用，这确实令人欣慰。

先来看CSS，在过去的两年中，CSS迎来了一段飞速发展的时期，涌现出非常多的新特性。就算你是一位全职的前端开发者，想要跟上新特性的步伐仍是一项艰巨的任务。不过，这也意味着用CSS写页面样式有更多的可能性可以去探索和实验。例如，在多年的呼声之后，CSS的has选择器成为了CSS最强大的新增功能之一，显著减少了对JS的需求，甚至有些开发者把它比作从使用float到flexbox的转变。

而在JS方面，我们仍然能看到一个充满活力且不断发展的生态系统，比如高居榜首的Vite和Vitest，它们仍在引领着新一代更简单易用的前端工具的发展。另外，在构建工具领域，我们也能很惊喜的看到有越来越多好用的工具出现，比如基于Rust的Rolldown和Rspack，用于解决开发者们广泛面临的「前端代码构建」的痛点问题。

但是，在今年的调查中，我能看到一种「割裂感」，这份割裂感尤其体现在针对新技术的态度上。拿Tailwind CSS来说，一些人逐渐为其原子化样式的写法而烦恼（尤其是当你要给一个元素添加十余种原子化样式时），而另一些人则抱怨它使用得不够多。在JS领域也有所体现，相对保守的开发者会选择React、webpack这样久经考验的JS技术，而相对激进的开发者已经在用svelte开发页面，rolldown构建项目了。也许很快，开发者们就都需要从以下这两个选项中选择自己的道路：一是，你可以做第一个吃螃蟹的人，不停学习新技术，走在新技术最前沿；二是，放慢脚步，专注于稳定、成熟的技术，并在它们冷却后学习新的热点技术。不过总之，我还是很高兴能够看到一个充满活力的前端生态——在这个生态中，不论是新的技术，还是稳定成熟的技术，都能找到自己的位置。

最后，希望各位能在这些数据和分析中有所收获，明年见！