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

shadowingszy
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 的方式发生变化的一年，我们可以拭目以待。

avatar
文章
阅读
粉丝