State of JS 2023：从犀利的左勾拳中反击归来

🎶 我被打倒，但我会再站起来。你们永远无法让我倒下。🎶 - Chumbawumba

在过去的八年里，《State of JS》调查通过对两万多名开发者进行调研，捕捉前端趋势。2023 年的调查结果刚刚出炉，它们揭示了一个正在变化的 JavaScript 生态系统。

作为 Storybook（调查中提及的其中一个包）的维护者，我对这些结果特别感兴趣。Storybook 是行业标准的 UI 组件工作区，被 OpenAI、MongoDB 和 Datadog 等团队使用。

以下是对 State of JS 的详细分析：它如何指导我们理解生态系统，我们过去如何使用它，以及我们在最新结果中看到了什么。

😵 State of JS：致命的左勾拳

State of JS 充满了执行精妙的可视化。我最喜欢的是“随时间的变化”。它在一张图中捕捉了 JS 生态系统的过去、现在和可能的未来。

这密集如乱麻的曲线图是一个人气竞赛，其中 JS 库争夺着正面评价和高使用率的右上象限。考虑 Vite 和 Webpack，生态系统中两个最流行的构建工具。

Vite 是 2023 年调查中无可争议的明星。其金色轨迹始于 2021 年的高评价和相对低使用率，并在过去两年中因出色的性能、简洁的配置和对现代标准的支持而迅速向右上角攀升。

同时，Webpack 在图表的顶部划出一道明显的路径，从 2017 年的正向评价和高使用率开始，然后向左下弯曲，先是缓慢，然后急剧。它仍然是核心基础设施的一部分，但由于 Vite 增长的所有原因，其评价已经变差。虽然它继续为世界上一些最重要的软件提供动力，但它正逐渐退出舞台，无论是在比喻意义上，还是在这个图表中，字面上都是如此。

Webpack 不是唯一一个向左下弯曲的包。重量级的 Jest 和 React 似乎也遵循着同样的轨迹。Jest 的弯曲很容易用 Vitest 的崛起解释，Vitest 是 2023 年的另一个大赢家。React 则更难解释。“前端框架”类别中最接近巨头的是 Svelte，然而就连它似乎也略微向左下弯曲了！

🏳️ 2022：一个摇摇欲坠的项目

当 Storybook 在 2022 年遭遇急剧的左下弯曲时，我们很担心。从以往的结果来看，没有任何一个项目在遭遇左下弯曲后能够恢复并回到向右上方发展的轨迹。

2022 年的结果并不令人意外。在 2022 年末，Storybook 的稳定版本 6.5 正面临速度、安装体积、兼容性和稳定性方面的挑战。它还基于 Webpack 4，这是一个落后的版本，已经向左下弯曲，并且正处于自身的衰退螺旋中。

❤️‍🩹 2023：扭转局面

我们在 2023 年发起了扭转局面的行动，其中包括提供一流的 Vite 支持、一流的 Next.js 支持、修复我们的依赖结构以支持 pnpm、提升性能以及普遍解决社区提出的主要问题。所有这些都在 2023 年初随着 Storybook 7 的发布而实现，并受到了社区的热烈欢迎。

我们仍然需要等待一年多才能看到 2023 年 State of JS 结果的更广泛抽样。那么，我们表现如何？

在 2023 年直线向上！虽然评价与去年持平，但我们认为这是一次胜利。这不仅对于之前向左下弯曲的库来说是不寻常的，而且我们相信社区的质量标准在过去一年里有所提高（得益于 Vite 等优秀的工具）。

因此，通过保持稳定，意味着 Storybook 的改进速度与标准的提高速度同步。

同时，使用率有所增长，将我们送入了令人向往的右上象限，与仅有的另外七个出色工具（React, Jest, Vite, Next.js, tsc, Vue 和 esbuild）为伴。

🥊 2024：应对挑战

尽管在 2023 年成功扭转了局面，但仍有工作要做。以下是调查中提出的主要批评意见以及我们如何应对它们：

依赖项 (12 👎)。用户抱怨臃肿 (8 👎) 和过时的依赖项 (4 👎)。我们已经解决了过时依赖项的问题，并相信这些评论来自于早期 7.0 版本之前的不良体验。至于臃肿问题，我们正在积极努力减小安装体积，并希望推出大大精简的 Storybook 9。

维护 (11 👎)。用户抱怨 Storybook 的设置困难 (3 👎)、升级困难 (6 👎) 以及总体维护困难 (2 👎)。我们承认维护 Storybook 对用户来说一直是个挑战。自 2023 年调查以来，我们在 自动化迁移 (automigrations) 方面投入了大量精力，这是一种帮助版本升级的代码片段，通过 codemods 和其他自动化实现。在 8.x 版本中，我们正在努力使设置新的 Storybook 更加容易。例如，我们在 8.1 版本中引入了交互式故事生成的 UI。

非 React 框架 (8 👎)。用户抱怨对非 React 框架的支持问题，包括 Vue (3 👎)、Angular (2 👎)、Svelte (1 👎) 和 HTML (1 👎)。Storybook 7 中最令人沮丧的问题之一是它依赖于 React (peer dependency)，这是为了支持 pnpm 而添加的。令人欣慰的是，我们在 8.0 版本中成功移除了这一要求。

文档 (6 👎)。几位用户抱怨 Storybook 的文档。这方面总会有改进的空间，但我们一直在持续投入文档改进和平台建设。在此查看！

错误 (5 👎)。最后一类抱怨涉及 Storybook 的质量和稳定性。像 Storybook 这样的大型开源项目是一个无限的问题源泉。我们扩大了核心团队，并在每个版本中逐步解决最严重的错误。

🏆 虎之眼

2024 年，我们摆脱了困境，回到了 Storybook 的发展轨道。我们通过积极创新达到了这一步。我们为此暂停了近两年，以偿还技术债务并解决应得的批评。

现在，我们回到构建新想法的道路上，让构建和维护 Storybook 变得更加容易，并创造组件测试的超能力，让您对 UI 更有信心。

Storybook 8.1 是我们最新的稳定版本，它包含了 State of JS 2023 中回顾的先前版本之上的无数改进。Storybook 8.2 即将发布，其中包括：

1. 语法改进，使 Storybook 的文件格式 CSF 与现有的 Jasmine 风格单元测试保持一致。
2. 一个全新的上手流程，帮助新用户比以往更快地学习 Storybook。
3. 包结构重组，减少了安装大小/时间，是朝着消除依赖冲突迈出的巨大一步。

查看 Storybook 的路线图，了解正在考虑和进行中的项目概览。

立即试用 Storybook

Storybook 的最新稳定版本是 8.1。要在新项目中使用它：

npx storybook@latest init

或升级现有项目

npx storybook@latest upgrade