往期文章:
【带你看看前端生态圈的技术趋势】state-of-js 2021 & state-of-css 2021 详细解读
【年更】带你看看前端生态圈的技术趋势 state-of-css 2022 & state-of-js 2022 详细解读
一、写在前面
- 本次分享的数据来源是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构建项目了。也许很快,开发者们就都需要从以下这两个选项中选择自己的道路:一是,你可以做第一个吃螃蟹的人,不停学习新技术,走在新技术最前沿;二是,放慢脚步,专注于稳定、成熟的技术,并在它们冷却后学习新的热点技术。不过总之,我还是很高兴能够看到一个充满活力的前端生态——在这个生态中,不论是新的技术,还是稳定成熟的技术,都能找到自己的位置。
最后,希望各位能在这些数据和分析中有所收获,明年见!