组件百科 beta

前端开发比以往任何时候都更具挑战性。UI 有几十种相互关联的要求，从浏览器兼容性到渲染速度，以及介于两者之间的一切。

如果你是一名像我一样的开发者，可能会对如何针对给定的 UI 模式找到最佳实践感到困惑。网络变化很快，人们有很多不同的看法。了解什么有效最清晰的方法是参考其他人怎么做。

去年12月，我预告了 Component Encyclopedia，这是一个你可以从中学习的经过实战检验的组件目录。我很高兴地宣布，我们现在进入了 beta 阶段。感谢社区的贡献，我们迄今已收录了来自 44 个项目的 3,490 个组件。

📚 立即访问 beta 网站 或继续阅读下面的重点内容。

谁在使用 Storybook？

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

Component Encyclopedia 展示了来自 BBC、欧盟、Microsoft 等领先团队的 UI 组件。这为你提供了全面的现有技术参考，从中学习。现在就和我一起参观即将收录到百科全书中的一些鼓舞人心的项目吧。

新闻和广播公司

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

BBC

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

The Guardian

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

机构和公共组织

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

European Union

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

联合国世界粮食计划署

世界粮食计划署 (WFP) 是世界上最大的人道主义组织，在 80 个国家为 1.15 亿人提供服务。他们使用 Storybook 构建和文档化符合品牌指南的现成、可访问的 UI 组件。

Gov.UK

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

Mozilla Firefox

Firefox 拥有 1.98 亿用户，是史上最受欢迎的浏览器之一。Firefox 的支付 UI 使用 Storybook 独立构建。这通过将用户界面与复杂的支付和账单逻辑分离，简化了前端开发。

旅行和交通应用

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

Airbnb

想象一下构建一个供 5 亿客人用来寻找住宿的 DatePicker。Airbnb 用整个 Storybook 来映射他们的开源 react-dates 库的关键状态。

Skyscanner Backpack

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

Audi

Audi 是以驾驶体验闻名的前三大豪华汽车品牌之一。但随着越来越多的人通过网络发现车辆，同样的对细节的关注也必须延伸到用户体验。Audi 的设计系统是使用 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 工作和流程，以便整个前端社区可以相互学习。

Component Encyclopedia 现在处于 beta 阶段。我们需要你的帮助来 QA（质量保证）并向索引添加更多项目。加入我们的 Storybook Discord #showcase 频道。欢迎新开发者和资深开发者的贡献。