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

740 阅读15分钟

一、写在前面

  • 本文的数据来源是 state-of-js 以及 state-of-css ,是前端生态圈中比较有影响力的且规模较大的数据调查。
  • 由于“前端生态圈”这个话题很大,涉及到的技术很多,所以很多可以深挖的技术只能一笔带过,但能出现在这个里的,都是有一定闪光点且有一定热度的技术,如果感兴趣的话可以深入了解。

二、state-of-js 详细解读

2-1、调查人员统计

今年的 state-of-js 调查共回收了 11761 份调查报告,在中国区则回收了 182 份报告,占 1.2%,相比去年不论是绝对值还是占比都有所增加。

2-2、JS 特性

这张图根据技术分类划分,显示了各种特性的采用率。 外圈的尺寸代表了了解这个特性的用户数量, 而内圈的尺寸代表了实际使用这个特性的用户数量。 在这里插入图片描述

  • 对于 JS 语言本身的特性,像可选链(Optional Chaining)、空值运算符(Nullish Coalescing)已经被大家广泛采用了;动态加载(Dynamic Import)、Promise.any、Promise.allSettled、Proxies 这些特性也有了一半左右的使用率了;而像 BigInt 这种就用的很少了。
  • 对于浏览器的 API,像 WebSocket、Shadow DOM 这些特性的使用率也很高了;但是像 WebRTC、WebGL 这种专业性比较强的 API 使用率就一直不高。
  • 而对于其他特征,PWA 技术已经被大家广泛采用了,WASM 还有一些进步空间。

2-2-1、语言

在这里插入图片描述 空值运算符在这一年里有 20%+ 的涨幅,看得出来大家都在使用这个特性了。

在这里插入图片描述 可选链在这一年里也有将近 20% 的涨幅,这个特性也被大家广泛采用了。

在这里插入图片描述 Proxies 这个特性有将近 10% 的涨幅,虽然用的人还是不多,但是看得出来还是在逐渐被开发者们接受的。

2-2-2、浏览器 API

浏览器 API 的使用率其实都没有太大的涨幅,只能矮子里拔将军找几个相对好一点的了。

在这里插入图片描述 Service Workers 有了 10% 的涨幅,还算不错,用的人越来越多了。

在这里插入图片描述 WebSocket 有着 8% 左右的涨幅,算是小幅度上涨吧。

2-2-3、其他特征

在这里插入图片描述 PWA 有着 15% 的涨幅,这个可以和 service workers 的涨幅结合来看,越来越多的开发者采用这种方式构建前端应用了。

在这里插入图片描述 WASM 有着 8% 的涨幅,不过随着 Rust 等语言,以及 FAAS 这种开发模式的流行,我相信 WASM 在未来会被更多的人使用的。

2-3、JS 技术

下面几张图展示了某项技术的使用人数和满意度的关系 使用人数很多且满意度较高的技术: 在这里插入图片描述 使用人数不是很多但满意度较高的技术: 在这里插入图片描述 使用人数不是很多且满意度也不是很高的技术: 在这里插入图片描述

2-3-1、前端框架

满意度: 在这里插入图片描述 使用率: 在这里插入图片描述 在前端框架方面,React 在使用率和满意度上都非常高,Vue.js、svelte 的满意度很高,但是使用率就没那么高了,而 Angular 虽然使用率还是很高的,但是满意度已经跌到 50% 以下了。

2-3-2、后端框架

满意度: 在这里插入图片描述 使用率: 在这里插入图片描述 在后端框架方面,Express 的使用率和满意度都很高,Next.js 紧随其后。另外值得注意的是,Koa 今年并没有在统计中出现,也许是因为 Koa 在国外真的不是很流行的缘故吧(又或许单纯只是设计问卷的同学忘记这个框架了,谁知道呢)。

2-3-3、测试工具

满意度: 在这里插入图片描述 使用率: 在这里插入图片描述 在测试工具方面,Jest 的使用率和满意度都还是稳居榜首(虽然 Jest 因为人力原因不维护了还是很让人感到遗憾的),Testing Library 的满意度最高,但是使用率还是偏低。

2-3-4、跨端技术

满意度: 在这里插入图片描述 使用率: 在这里插入图片描述 在跨端技术方面,基本上还是 Electron 和 RN 平分秋色,不过因为做混合应用的前端开发者还不是很多,所以实际上就算是使用人数最多的 Electron,使用率也没过半。

2-3-5、构建工具

满意度: 在这里插入图片描述 使用率: 在这里插入图片描述

构建工具这里真的是让人感叹“学不动了”,前几年我们都在吐槽“天下苦 webpack 久矣”,然后去年就跳出来了一个拥有闪电般打包速度的 esbuild,而今年又跳出来了一个使用原生 ESM 进行构建的工具 vite,不多说了兄弟们,慢慢学吧。

2-3-6、monorepo 工具

满意度: 在这里插入图片描述 使用率: 在这里插入图片描述 今年还额外统计了 monorepo 工具,对于这部分,pnpm workspace 的满意度最高,而 Lerna 和 yarn workspace 的使用人数最多。不过说实在的,monorepo 这种代码管理方式还不是很流行(甚至开发者们对于到底要不要用 monorepo 都还有一些争议),所以就算是使用人数最多的 Lerna,使用率也就在四分之一左右。

2-4、开发者对于 JS 的看法

2-4-1、JS 是否在向正确的方向发展

在这里插入图片描述

2-4-2、构建 JS 应用是否过于复杂

在这里插入图片描述

2-4-3、JS 生态系统变化是否太快了

在这里插入图片描述

2-4-4、使用 JS 的痛点

在这里插入图片描述 可以看到开发者们认为 JS 的痛点集中在依赖管理、代码架构和数据管理上。

2-5、总结

当下,JS 正在往一个越来越好的方向发展。现如今的 JS 生态里,既有成熟稳定、久经考验的技术存在,也有让人眼前一亮的新技术出现。 还记得前几年做 state-of-js 调查时,只有 21% 的人使用 TypeScript,而今天这一比例为 69%。虽然我们过去常常开玩笑说每天都会发布一个新的前端框架,但 React 和 Vue 现在已经连续 6 年占据主导地位。而且认为“JS 发展太快”的开发者们的比例也从 59% 下降到 38%。 当然这并不是说明 JS 语言本身已经停滞不前。 可选链和空值运算符已迅速成为调查中使用最多的新特性(尽管他们实际上只有 2 年的历史)。 构建工具的生态也在快速发展,可以说 2021 年最亮眼的构建工具就是 Vite。 Vite 不仅以 98% 的满意度首次亮相,而且在调查中,第一年的使用率已经达到 30%,甚至超过了 esbuild。另外,Vite 并不是唯一一个试图改善 JS 构建生态的工具,调查中出现的 12 个构建工具中有 8 个才推出不到两年! 虽然 pnpm、Lerna 在 monorepo 工具中位居榜首,但只有 25% 的人真正使用了这些工具,这表明 monorepo 还有很长一段路要走。 随着 JS 的发展,有越来越多的开源开发者和企业为 JS 的生态添砖加瓦,相信随着他们的加入,JS 会变得越来越好。

三、state-of-css 详细解读

3-1、调查人员统计

今年的 state-of-css 调查共回收了 6112 份调查报告。归功于一个非常棒的团队,我们可以将调查结果翻译成多种语言。

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

值得注意的是中国回收的问卷只占了全部问卷的 0.9%,虽然这个数字和去年调查占比出奇的一致,但这并不代表说中国的前端开发者占全球的比例只有 0.9%,实际上根据 antd 的下载量和 cnpm 的下载量估算,目测占比在 10% 左右。 也正是因为这一点,在看到这份调查数据时我们可能会有「诶这个框架在报告中很火,可是我身边没人用啊」的感觉。 但这也没太多关系,毕竟只有多角度评价一项技术才能得出一个比较全面的结论。

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

在这里插入图片描述 今年 state-of-css 调查还单独统计了开发人员年龄,可以看到绝大部分的前端开发者都是在 24 到 34 岁之间的,也有 21.9% 的前端开发者在 35 到 44 岁之间。虽然参与这份调查的大部分都是外国的开发人员,放到中国的话大概率会年轻化一些,但我仍然觉得看着这样一份数据,还是能够缓解一些我们所谓的“年龄焦虑”吧,毕竟还有几百位的 55+ 的老爷爷们在写 css 呢。

3-2、CSS 特性

这张图根据技术分类划分,显示了各种特性的采用率。 外圈的尺寸代表了了解这个特性的用户数量, 而内圈的尺寸代表了实际使用这个特性的用户数量。 在这里插入图片描述

  • 在布局(Layout)方面,像 position 、flexbox(弹性布局) 、grid(网格布局) 已经广泛地被大家采用,但是像 @container(容器查询) 、 subgrid(子网格布局) 这种就比较冷门,没什么人用。
  • 在图形和图像(Shapes & Graphics)方面,像 object-fit、clip-path 这种很常用的调整图像形状的特性已经被大家广泛使用了,但是像 color() 这种颜色配置函数就没什么人用了。
  • 在交互(Interactions)方面,像 pointer-events 这种特性的应用已经很广泛了,但像 overflow-anchor(滚动锚定) 这种就用的相对少。
  • 在排版(Typography)和可见性(Accessibility)方面,像 font-display 这种控制字体展示方式的特性还有 ARIA 这种 HTML 无障碍的特性用的比较多,其他都是一些使用度很低的冷门特性。
  • 而在其它特性中,像 calc、css 变量 这些特性也在被大家广泛使用。

3-2-1、布局

在这里插入图片描述 grid 的占比在以每年 10% 的比例逐渐升高,看得出来,绝大部分开发者都在使用了。 在这里插入图片描述 sticky 也被大家广泛使用了,相比去年也有着 8% 的涨幅,做粘滞效果的神器。 在这里插入图片描述 flexbox 就更不用说了,普及率已经快到 100% 了。

3-2-2、图形和图像

在这里插入图片描述 object-fit 用的人也越来越多了,每年约增长 10%,做图片自适应非常合适。

在这里插入图片描述 clip-path 也有了 7% 的增幅,用于图片区域的裁剪。

3-2-3、交互、排版与可见性

这三块内容中实在没有很常见且增长很爆炸的特性,硬要说的话,也就只有 tabindex 和 ARIA 了(但他们俩实际上是 HTML 的特性。。。)。 在这里插入图片描述 在这里插入图片描述

3-2-4、其它特性

在这里插入图片描述 css variables 每年有 10% 的使用率涨幅,随着前端主题定制的需求越来越旺盛,相信这个特性会被大家越来越广泛地使用。

在这里插入图片描述 calc 的使用率已经快到 100% 了,也是一个大家都在用的特性,毕竟很多响应式样式就得靠它来计算了。

在这里插入图片描述 comparison functions 在今年有 15% 的使用率涨幅,算是今年使用率涨的最快的特性了,它同样也是在做响应式样式时有很亮眼的表现。

3-3、CSS 技术

在这里插入图片描述

  • 在预/后处理框架中,Sass 是使用人数最多且满意度最高的,而 Less、Stylus 这种就不那么受开发者青睐。
  • 在 CSS 框架中,Bootstrap 用的人很多,但是满意度不太行,Tailwind CSS 正在逐渐成为主流,广受好评,而国产框架 antd 虽然用的人没那么多,但满意度也不错。
  • 在 CSS-in-JS 框架中,老牌框架 CSS Modules、Styled components、Emotion 都表现不错,但今年又有一匹黑马 vanilla-extract 值得关注(不过,也许称其为 CSS-in-TS 会更合适一点)。

3-3-1、预/后处理

满意度: 在这里插入图片描述 使用度: 在这里插入图片描述 预/后处理框架近几年一直很稳定,没有什么新的变化,也没有新的“黑马”出现,基本就是 PostCSS、SaSS、Less 这些东西,硬要说变化的话,应该也就是 Less 的满意度越来越低,而且越来越多的人在避免使用 Less。

3-3-2、CSS 框架

满意度: 在这里插入图片描述 使用度: 在这里插入图片描述 从满意度来看,近几年 Tailwind CSS 一直居于榜首,其原子化 CSS 的特性的确很好用,但是在国内就有点「雷声大雨点小」的意思了,也许是因为国内快糙猛的前端开发风格导致开发者写出来的都是「用完即抛」的 CSS 样式,很难沉淀出一套原子化的样式吧。 而从使用度来看,Bootstrap 的使用度一骑绝尘,甩了第二名整整 46%,可以说是大家都在用了,但是它的满意度很低,而且在逐年降低,有一种「天下苦 Bootstrap 久矣」的感觉。 另外值得一提的是,antd 的满意度排名和实用度排名都在稳步向上走,可以算是国产良心框架了(希望它不要再搞出圣诞节彩蛋这种幺蛾子了)。

3-3-3、CSS-in-JS 框架

满意度: 在这里插入图片描述 使用度: 在这里插入图片描述 从满意度来看,CSS-in-JS 技术中杀出了一匹 vanilla-extract 的黑马,应该是和近些年 typescript 的流行有很大关系。它能够构建类型安全的样式,并且是在编译时生成样式文件(这一点就比 emotion 这种运行时注入样式的框架好不少),使用起来就像下面这样,还是挺有意思的:

import { createTheme, style } from "@vanilla-extract/css";

const [themeClass, vars] = createTheme({
  color: {
    brand: "blue",
  },
  font: {
    body: "arial",
  },
});

const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: "white",
  padding,
});

document.write(`
  <section class="${themeClass}">
    <h1 class="${exampleStyle}">Hello world!</h1>
  </section>
`);

不过因为是最新出的框架,还没有多少人用,可以先观望一下。 老牌框架诸如 CSS Modules、Styled components、Emotion 这些,使用率都有小幅度的上涨,但是满意度却在小幅下跌,不过个人觉得这些久经考验的老牌 CSS-in-JS 框架都还是能用且好用的。

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

下面这张图显示了开发者们会在哪些浏览器中测试 在这里插入图片描述 可以看到对于 Chrome、Firefox、Safari、Edge 这些主流的浏览器,开发者们基本都要对其进行测试,而对于 IE11、IE8 这种浏览器,就很少有人(不到 10%)专门再去关注了。 另外我们国产的 UC 浏览器竟然还上榜了,还有 0.5% 的开发者会专门在 UC 浏览器进行测试。。。

3-5、开发者对于 CSS 的看法

3-5-1、CSS 的学习和开发体验

在这里插入图片描述 在这里插入图片描述 这两张图放到一起看,不难看出开发者们认为 CSS 的难度越来越高,以至于大家写 CSS 的体验稍微变得差了一些。

3-5-2、主要使用 CSS 做什么

在这里插入图片描述 可以看到大部分开发者还是在用 CSS 构建 web 应用、落地页、设计体系、博客网站等「美化页面样式」的工作,而像是用 CSS 做动效和插图、做打印样式排版这种就很少见了。

3-5-3、CSS 的痛点

在这里插入图片描述 开发者们认为 CSS 主要的痛点问题是:

  • 浏览器兼容性。
  • 工程化,比如样式文件如何组织、无用样式的剔除等。
  • 表单元素的样式。
  • 响应式布局。 这些其实都是老生常谈的痛点问题了,我觉得解决这些问题将是未来 CSS 技术演变的主要方向。当然,现在已经出现了很多优秀的技术方案去解决这些问题,比如使用 bootstrap 做响应式布局,使用 purify-css 去剔除 CSS 中的无用样式等。

3-5-4、CSS 还缺少的特性

在这里插入图片描述 这里的「缺少」并不是指那些凭空想象出来的特性,而是指现在已经有了提案但是浏览器还没有很好的支持的特性,这些特性主要有:

  • 容器查询。
  • 父选择器。
  • 更好的浏览器支持。
  • 原生嵌套样式。 希望各大浏览器们能早日支持这些特性。

3-6、总结

编写 CSS 的方式也许会发生变化了。 多年来,和 CSS 样式相关的创新都发生在其他地方,而不是 CSS 本身,比如预处理器、样式库等。虽然值得肯定的是,CSS 本身也有一些受欢迎的改进,比如刚才介绍的那些几乎已经被 100% 使用的 flexbox、calc、css 变量 特性,但我们在日常开发中仍然需要寻求刚才说的诸如预处理器之类的 CSS 技术的帮助。

但变化也在发生,CSS 语言正在经历越来越快的变革和更新。

container query(容器查询) 可以让我们更精细化地去做响应式布局,cascade layers(级联层) 将会使我们开发主题化样式或管理复杂样式变得更加容易,虽然它们现在的浏览器支持度都很差,不过我相信这些特性会慢慢普及的。

另外,近期一些诸如 @when/@else 的新提案,能给我们带来更多、更灵活的编写样式的可能性。

还有,我们终于看到 css nesting(CSS 原生嵌套) 有了一些进展。这会为我们提供另外一种完全不同于「借助 sass 或 less 等工具实现 CSS 嵌套」的工作方式。

所有这些都在意味着 2022 年可能是编写 CSS 的方式发生变化的一年,我们可以拭目以待。