返回博客

2024 年 Storybook 的未来展望

2023 年亮点回顾及未来展望

loading
Michael Shilman
@mshilman
最后更新

自 2016 年成立以来,Storybook 经历了飞速发展。尽管我们尽力“边走边清理”,但项目仍然变得庞大而复杂。因此,我们在 2023 年的大部分时间都在偿还技术债务。这不会产生引人注目的头条新闻,但在这一年中,我们极大地改进了产品,同时也为 2024 年下一代改进 奠定了基础。

Storybook 7.0

我们以 Storybook 7.0 开启了新的一年,这是自 2020 年以来的首次重大版本发布。此版本包含了大量的基础性改进

加快步伐

7.0 是一个重要的里程碑,但我们并没有止步于此。为了提高迭代能力,我们开始更频繁地发布 7.x 版本。在九个月的时间里,我们发布了六个小版本(最近的是 Storybook 7.6)。这些版本包括

自动捕获 UI 错误

我们还一直在努力将 Storybook 变成一个强大的测试工具,使您能够在开发组件时捕获意外的更改和回归。Chromatic Visual Test Addon 现已推出私有 Beta 版。注册加入超过 1,000 名开发者的早期访问

Chromatic Visual Test addon for Storybook

构建社区

Storybook’s London meetup. A room full of developers

我们不仅在网上掀起了波澜,在线下也是如此!在我们的首次系列聚会上,我们在全球各地会见了数百名 Storybook 开发者,包括在西雅图、伦敦、巴黎、浦那和多伦多的活动!我们计划在 2024 年举办更多活动,敬请关注。

在热心志愿者的帮助下,我们还改进了 Storybook 的支持社区。在此向我们 Discord 帮助者俱乐部的所有成员致敬,包括

Ahmadreza Shamimi, Belle, Burton, CuddleBunny, Danny HW, foxhoundn, Frog, George, Jen C, literalpie, María Simó, MarkB, dkwoody, hinogi, 和 unpunnyfuns!

对于在 2023 年帮助解决其他用户问题的任何人:我们非常感谢您的贡献以及您在我们社区中扮演的角色。

文档万岁!

现在是学习 Storybook 的最佳时机,因为今年我们对文档站点进行了一系列改进。

我们为许多用户最常要求的主题创建了文档。这包括 主配置ArgTypes组件故事格式 (CSF)框架CLI 选项文档块 的 API 页面。

同时,我们还显著升级了文档站点的用户体验

锦上添花:Storybook 8.0

我们的下一个主要版本 Storybook 8.0 将为每个项目带来显著的性能提升。

我们计划在 2024 年初发布 Storybook 8.0。查看完整的发布时间表


2024 年的展望

在 2023 年投入大量精力进行维护之后,我们很高兴在 2024 年转变方向,构建新的产品领域。我们将有三个核心重点

  1. 应用程序开发
  2. 增强对非 React 框架的支持
  3. 改进故事生成

应用程序开发

我们 2024 年的重大押注是应用程序开发。Storybook 以其用于隔离组件开发和设计系统的工具而闻名,但它也可以用于开发 连接的组件 甚至 全栈应用程序

我们正在从测试的角度对这些场景进行更多投资。这为开发人员提供了一种强大的方式来执行完整的应用程序用户流程,但具有 Storybook 隔离环境的速度和可靠性。

A demonstration of scanning different pages in Storybook

非 React 框架

我们还在投资非 React 框架。这是一项长期努力,但在 2024 年之前发生变化的是,我们已开始与框架维护者合作,以提供尽可能一致的 Storybook 体验。

Angular: 我们一直在与 Angular 核心团队合作,以确保跨主要版本升级的兼容性。明年,我们计划与其他 Angular 用户的生活质量改进措施一起,与 Angular 新的高性能 构建系统 集成。

Svelte: 我们与 Svelte 的维护者合作发布了一流的 SvelteKit 支持,并在 7.x 中继续改进集成。在此过程中,他们敦促我们用户应该使用 Svelte 语法编写故事。明年,我们计划在其他关键的 Svelte 改进措施中正式支持 Svelte CSF

故事生成

最后但同样重要的是,我们希望使编写故事更容易。

2023 年最令人兴奋的社区发展之一是 StorybookGPT,这是一种使用大型语言模型为您的组件自动生成故事的方法。这是由我们在 Netlify 的朋友 Kaelig Deloumeau-Prigent 开发的。我们以 Kaelig 的创作为基础,编写了关于如何试验将此概念应用于您选择的任何框架的说明。

构建您自己的 Storybook GPT
为您的组件自动生成故事

参与进来

Storybook 由 1,800 多名开源贡献者维护,并由指导委员会指导。如果您有兴趣贡献力量,请在 GitHub 上查看 Storybook,创建 issue 或提交 pull request。在 Open Collective 上捐款。在 Discord 中与我们聊天 — 通常有维护者在线。在 Twitter 上或通过注册我们的 邮件列表 了解 Storybook 的最新消息。

鸣谢

Storybook 8 核心团队

Michael ArestadYann BragaJoão CardosoMichael ChanTom ColemanCharles de Dreuille, Norbert de LangenShaun EveningKyle GachGert HengeveldDom NguyenValentin Palkovic, Kasper PeulenChakir QatabJeppe ReinholdKai RöderMichael Shilman (我!), Joe VaughanVarun VachharIan Van SchootenDaniel WilliamsJosh WoodingVanessa Yuen

Storybook 8 贡献者

@0916dhkim, @1234tgk, @42shadow42, @aditya1, @adityakrmodak, @agriffis, @akarachen, @alex-ahumada, @alexandertrefz, @almoghaimo, @amerlander, @andarist, @anneau, @artur93gev, @arup1221, @atreay, @auctumnus, @autoboxer, @barsheshet, @bartlangelaan, @bashmish, @bdriguesdev, @benmccann, @bkfarnsworth, @bodograumann, @bryanjtc, @cdedreuille, @cgatian, @chakas3, @chocoscoding, @coliff, @cprecioso, @d-koppenhagen, @danez, @danielmarcano, @dannyhw, @darleendenno, @dartess, @darth-koder007, @daves28, @decherneyge, @diamondex, @dobesv, @domyen, @dotwoodmedia, @dprcoles, @dschungelabenteuer, @dubbs, @dxb-story, @edutoit, @efrenaragon96, @eltociear, @enterframe, @epreston, @esilverm, @ethanmick, @fazulk, @felixrizzolli, @fezvrasta, @filiptammergard, @flynnfc, @foxhoundn, @francois2metz, @g-cappai, @ghidersamihaela, @gipoezcan, @github-actions[bot], @gitstart, @gitstart-storybook, @gossi, @greut, @gufah, @halitiince, @hcvdhaar, @henkerik, @hobbes7878, @hoishin, @honzahruby, @iabu94, @ianvs, @idesigncode, @imccausl, @integrayshaun, @iqbalcodes6602, @irangarcia, @j3rem1e, @jackw, @jared-christensen, @jd-oconnor, @jnschrag, @joaonunomota, @joevaugh4n, @joeycozza, @johnhunter, @jonniebigodes, @jonthenerd, @joriswitteman, @joshbolduc, @joshwooding, @jpzwarte, @jreinhold, @jrencz, @json-betsec, @julien-deramond, @junghoe, @jungpaeng, @justineloff, @justineloffbbd, @kaelig, @kasperpeulen, @kawokas, @kbazilio, @kkirby, @klescouar, @kolife01, @konsalex, @kota-kamikawa, @kripod, @krofdrakula, @kshmidt-digma, @kubijo, @kuriacka, @kylegach, @kylemeenehan, @kyletsang, @legnaleurc, @literalpie, @liwn9527, @lucavazz, @luk-z, @machycek, @madarauchiha-314, @magicismight, @maheshchandra10, @manbearwiz, @mandarini, @marcelckp, @mariasimo, @marioarnt, @mariocadenas, @marklb, @martinnabhan, @masaya48, @mastrzyz, @mattlewis92, @mauriciorobayo, @mayank99, @mdornseif, @medihack, @michaelarestad, @michens, @mickmcgrath13, @miily8310s, @mnigh, @mrb1nary, @mrzillagold, @mvarendorff, @mz8i, @nasvillanueva, @natehouk, @ndelangen, @neretin-trike, @nikospapcom, @nlepage, @noltron000, @notwoods, @noviceguru, @nsheaps, @nvitius, @okuramasafumi, @omahs, @orangecms, @orisomething, @oruman, @osnoser1, @oxcened, @paoloricciuti, @pascalfiv, @piratetaco, @pratikkarad, @programmarchy, @pruthvip15, @pure-js, @rashidshamloo, @re-taro, @redbugz, @roel-t, @rohanpoojary1107, @roottool, @samvv, @sebastiankapunkt, @seriouz, @sheriffmoose, @shilman, @showrin, @sidnioulz, @simenb, @sitogi, @sjwilczynski, @smeagol74, @sookmax, @sorakumo001, @specialdoom, @speelbarrow, @spookyjelly, @stilt0n, @stof, @storybook-bot, @stropitek, @subhajit20, @syabro, @t99, @ta1m1kam, @taehyeon-envoi, @taozhou-glean, @thapasusheel, @thtliife, @tmeasday, @tobiasdiez, @tolkadot, @tomo5524, @tyankatsu0105, @ubugnu, @usrrname, @valentinpalkovic, @vanessayuenn, @webblocksapp, @wesgro, @wilson2k, @wise-introvert, @wjdtjdgns, @wouterk12, @wuzhuobin, @xueyawei, @xyy94813, @yamanoku, @yannbf, @ygkn, @yilun-sun, @yoshi2no, @yossisaadi, @youngboy, @zachtball, @zhyd1997, @zigang93, and @zmarkan

加入 Storybook 邮件列表

获取最新的新闻、更新和发布信息

6,730位开发者及更多

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者用于生产环境的工具。远程优先。

查看职位

热门文章

在 Storybook 中使用 React Server Components 和 Mock Service Worker 构建 Next.js 应用程序

使用 MSW 模拟网络请求,隔离开发、文档化和测试 RSC 应用程序
loading
Michael Shilman

React Native Storybook 7

比以往更紧密地对齐 React Native 和核心 Storybook
loading
Daniel Williams

如何使 Storybook 速度提高 2-4 倍

优化 Storybook 7.6 的构建性能
loading
Kasper Peulen
加入社区
6,730位开发者及更多
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI