组件百科 Beta 版

前端开发比以往任何时候都更加困难。用户界面有许多相互关联的要求，从浏览器兼容性到渲染速度，以及介于两者之间的一切。

如果你像我一样是一名开发者，那么要了解任何给定 UI 模式的最佳实践可能会令人困惑。Web 变化很快，人们有很多意见。了解什么有效的最清晰方法是参考别人的做法。

在 12 月，我预览了组件百科，这是一个经过实战检验的组件目录，供您学习。我很高兴地分享，我们现在正处于 Beta 版阶段。感谢社区，到目前为止，我们已经索引了 44 个项目中的 3,490 个组件。

📚 现在访问 Beta 版网站 或继续阅读以下亮点。

谁在使用 Storybook？

自定义是 Storybook 受欢迎的主要原因之一。它足够灵活，可以适应任何组织的结构。跨国公司使用它来跟踪其应用程序中无数的边缘案例。初创公司和独立开发者使用它来更快地组装 UI。

组件百科展示了来自 BBC、欧盟、微软等领先团队的 UI 组件。这为您提供了全面的现有技术概述，供您学习。现在加入我，一起参观即将加入百科全书的鼓舞人心的项目。

新闻与广播公司

报纸旨在通过新闻报道和调查来告知人们。如今，“报纸”中的“纸”是一个用词不当，因为大多数新闻都是在线传播的。新闻网站的开发者必须支持各种内容，如文本、视频、音频和互动格式。此外，他们还必须考虑旧设备和慢速连接的可用性。

BBC

BBC 是世界上历史最悠久、规模最大的广播公司。他们的观众遍布 4.56 亿人，这意味着内容必须本地化到数十个国家/地区。BBC Psammead 设计系统使用 Storybook 构建一个持久的组件库，该库具有可访问性、国际化和高性能。

卫报

《卫报》是英国最受信任的报纸之一。它涵盖了广泛的主题。为了提供最佳的阅读体验，《卫报》的页面布局需要能够适应每种内容类型，同时保持可定制性。Storybook 用于构建整个 UI，从组件到页面，都与内容管理系统隔离。

机构与公共组织

机构的存在是为了服务公众。但“公众”不仅仅是一个人，而是许多具有不同需求、连接、设备和残疾的个人。这对 UI 开发者来说可能是一个挑战，因为你需要支持近乎无限的用例。

欧盟

欧盟包括 27 个成员国，共有 4.47 亿人口。Europa 组件库 (ECL) 提供了一套标准的 UI 组件，在 Storybook 中构建，用于所有 Europa 网站和应用程序。

联合国世界粮食计划署

世界粮食计划署 (WFP) 是世界上最大的 humanitarian 组织，在 80 个国家/地区为 1.15 亿人提供服务。他们使用 Storybook 构建和记录现成的、可访问的 UI 组件，这些组件符合品牌指南。

Gov.UK

Gov.uk 是英国每个政府部门的数字门户。他们使用 Storybook 构建的设计系统来维持高用户界面标准。任何团队的任何开发者都可以查找和重用现有工作。

Mozilla Firefox

Firefox 的 1.98 亿用户使其成为有史以来最受欢迎的浏览器之一。Firefox 的支付 UI 是使用 Storybook 隔离构建的。这通过将用户界面与混乱的支付和账单逻辑分离开来简化了前端开发。

旅行与交通应用

每个行程都由许多不同的方面组成，如日期、地点、乘客人数、住宿、交通。这对你来说很难跟踪，因为排列组合的数量似乎是无穷无尽的。

Airbnb

想象一下构建一个 DatePicker，有 5 亿客人使用它来查找住宿。Airbnb 专门用一个 Storybook 来绘制其开源 react-dates 库的关键状态。

Skyscanner Backpack

当 1 亿人信任你的搜索引擎来满足他们的旅行需求时，它需要万无一失。Skyscanner 使用 Storybook 来构建和压力测试其 UI。Backpack 设计系统包含了创建 Skyscanner 体验所需的所有基础知识。

奥迪

奥迪是世界前 3 名的豪华汽车品牌，以其驾驶体验而闻名。但随着越来越多的人通过网络发现汽车，同样的对细节的关注也必须扩展到用户体验。奥迪的设计系统是使用 Storybook 构建和记录的。

开发者工具

每家公司都是不同的，他们的技术栈也是如此。开发者工具用于构建和调试现代应用程序的不同层。创建 devtool UI 很困难，因为你需要模拟 UI 在难以重现的、具有不同依赖项的环境中的行为方式。

GitHub

全球有 7300 万开发者使用 GitHub 构建软件。开发者生态系统很广泛，因此 UI 需要格外灵活。Primer 设计系统依赖 Storybook 来开发在整个 GitHub 应用程序中使用的原子组件。

Twilio

Twilio 为 25 万个应用程序提供文本消息和电话呼叫服务。他们的客户遍布 180 个国家/地区，使用不同的语言和不同的服务进行通信。产品覆盖面很广，因此他们在 Storybook 中构建了一个设计系统，以简化开发者原型设计和交付 UI 的方式。

Visual Studio Code

根据 Stack Overflow 2021 年开发者调查，VSCode 是最受欢迎的代码编辑器。VSCode 使用 Storybook 为您首选的编码语言、扩展、主题和 git 工作流程提供个性化体验。

想让你的项目加入百科全书吗？

我们的使命是编目最高质量的 UI 组件，供您在开发 UI 时参考和重用。但我们不知道每个 Storybook 发布在哪里，所以我们需要您的帮助来找到它们。

➕ 在这里添加你的 Storybook »

获取官方发布通知

成千上万的团队依靠 Storybook 来交付 UI。我们正在展示他们的 UI 工作和流程，以便整个前端社区可以相互学习。

组件百科现在处于 Beta 版阶段。我们需要您的帮助来进行质量保证并将更多项目添加到索引中。加入我们的 Storybook Discord #showcase 频道。欢迎来自新开发者和资深开发者的贡献。