STORYBOOK 6.0您最喜欢的前端开发新工具

2020-08-12 22:54:47

Storybook是世界上最受欢迎的组件工作室,被行业巨头、初创企业和开源项目广泛采用。

我们研究了BBC、IBM、思科和Shopify等公司的领导团队。这些团队已经成功地扩展了组件库,并开创了自己的最佳实践。

新的Storybook合并了这些最佳实践,以便所有团队都能受益。更重要的是,我们删除了样板和配置,以简化您的开发体验。它包括:

故事书是构建UI组件的事实标准。它支持每个主要框架的结构化UI开发和文档编制。

📈记录采用。故事书的使用量持续增长,最近每月公开回购超过5万次,NPM下载量达到700万次。我们已经看到Vue、ANGLING和Web组件社区的增长速度特别快。

👩‍💻欣欣向荣的社区。根据GitHub的数据,故事书是2019年增长最快的十大OSS项目之一。它最近超过了1000名贡献者和5万名明星。

🧪平台创新。我们已经成功地推出了几个核心平台更改,同时确保了我们用户的稳定性。值得注意的是,Component Story格式是组件示例的可移植标准。故事书Docs为无数的产品设计系统提供动力,包括我们自己的系统。

零配置设置是高级用户要求最多的功能之一。受益于StoryBook的可配置性的领导团队也希望我们“简化”设置。这是因为他们希望公司内部的其他团队也使用StoryBook。强大的零配置设置使采用UI组件变得更容易。

故事书6.0附带了预先配置的最佳实践功能。这些功能以前是作为插件提供的。现在,这些基本的插件已经调优、记录并随Storybook一起提供。此外,内置了对文字的支持,因此您也不必担心这一点。

关于6.0,您将注意到的第二件事是一个可选的新故事构造args,它位于开发人员体验的核心:

严肃的故事书用户写了数百甚至数千个故事。他们想要更多的方式来让这笔投资通过可移植性、重用性和增值功能来实现回报。

故事书参数是写故事的根本性改变。作为用户,您现在可以声明故事的输入“args”和初始值。然后,Storybook及其插件将动态修改参数,启用自动生成的控件、用于事件日志记录的自动生成的操作,甚至是自定义工具栏。

从Storybook Args中受益的首批功能之一是控件,这是无数开发人员要求的一个新插件,它允许您在不接触代码的情况下动态编辑组件的输入。控件是自动生成的UI,用于快速组件实验。

如果你熟悉Storybook,它看起来可能类似于旋钮,也就是它所取代的插件。但这种相似只是肤浅的。因为控件是自动生成的,所以不需要编写额外的代码,也不需要在修改API时进行维护。控件代码也更具可移植性,因为它不依赖于特定于Storybook的API。

控件插件对于专业开发人员来说是一个胜利:不仅可以更轻松地自己探索新的组件状态,而且非技术团队成员可以立即访问您的故事书以获取反馈。

Storybook6中最激动人心的特性之一是合成:能够浏览本地Storybook内任何Storybook中的组件。

这个特性是IBM、Cisco和Chromal的团队所要求的,他们管理大型UI工作,在那里聚合分布式项目非常有用。

组合还开启了新的用例。例如,现在可以在单个合成的Storybook中用Reaction、Vue和ANGLE开发跨框架设计系统。当您在故事书中开发设计系统文档时,它还使您可以在应用程序屏幕旁边浏览设计系统文档。

最后一个要求--由Betterment和几乎与我们交谈过的每个团队提出--是为Storybook本身提供更好的文档。即使是拥有深厚故事书专业知识的投入巨大的团队也将此列为他们的关键痛点之一。

我们听取了意见,并且完全重新设计和重写了StoryBook的文档:

由“学习故事书”的编辑多米尼克·阮(Dominic Nguyen)和汤姆·科尔曼(Tom Coleman)领导,它是你一直想要的写得很好、内容全面的故事书参考资料。

除了主要的更改之外,我们还改进了现有功能并修复了数百个错误。几个亮点包括:

在大多数情况下,这足以让您启动并运行新版本。但是如果你被困住了,我们会帮你掩护的。

您将获得完整的6.0配置,包括本文描述的所有内容,并为新用户提供全新的入职体验。

该项目由1000多名开源贡献者维护,并由顶级维护人员组成的指导委员会指导。如果您有兴趣投稿,请查看GitHub上的故事书、创建问题或提交拉取请求。在Open Collective上捐款。与我们不和地聊天-维护人员通常在线。

随时关注Twitter上的故事书新闻,并注册我们的官方邮件列表: