Storybook 4.0 大升级:为 RN 提供一级支持、引入 6 个新视图层

1,689 阅读5分钟
原文链接: mp.weixin.qq.com
作者|Michael Shilman 译者|谢丽 随着时间的推移,前端开发者开发的应用比以往任何时候都要大,并随着逻辑和功能向客户端转移,应用变得越来越复杂。有许多很棒的库可以简化前端堆栈的不同部分,从构建工具(如 Webpack)到视图层(如 React)。但迄今为止,还没有一个通用的工具来构建 UI 组件——应用的原子单元。

Storybook 的目标是帮助每个开发人员构建 UI 组件,无论是框架还是技术栈。近日,Storybook 4.0 的发布让我们离这个目标又近了一步。

Storybook 4.0 (SB4)将支持 6 个新的视图层,并引入了可以节省时间的特性来快速构建现代化 UI:

  • 视图层:Ember、MarkoJS、Mithril、HTML、Svelte、Riot

  • 构建:Webpack 4、Babel 7

  • 移动:移动设备视图 React Native

  • UI:主题

  • 内核:Story 参数

Storybook 支持 6 种新的视图层

我们很高兴为 Storybook 的 UI 组件工具 & 最佳实践生态系统引入了六个新的视图层。Storybook 及其插件与视图层无关。这意味着,每当有人添加一个特性或修复一个 Bug 时,每个用户都可以从中受益,而不管他们选择了哪种框架。

例如,引入 Storybook Angular 极大地改进了 Typescript 支持,React Native 的改进将有利于下一代 Web UI,新的视图层使每个人都可以从中受益。

  • Ember(由 Gabriel J Csapo 和 Robert Jackson 创建)

  • MarkoJS(由 Neville Mehta 创建)

  • Mithril(由 Sangmin Yoon 创建)

  • HTMLSnippets(由 Filipp Riabchun 创建)

  • Svelte(由 Gavin King 创建)

  • Riot.js(由 Lionel Ben ychou 创建)

使用 Webpack4 和 Babel7 提升构建速度

随着 Webpack 4 和 Babel 7 的升级,Storybook 4 得到了显著的性能提升。Storybook 现在可以和一些流行的前端工具兼容,比如 create-response-app 2、Gatsby 2 和 Next 7。

Webpack 4 和 Babel 7 还包含了其他数百个改进,包括 Webpack 4 中的 WebAssembly 支持、Babel 7 中的 JS 配置、Typescript 和 JSX 片段。

如果你正在从旧版本升级,则可以学习 Storybook 4.0 的迁移指南:

https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c

为 React Native 提供一级支持

组件不仅仅局限于 Web。React Native 把组件带到了移动领域。

Storybook 4.0 使得向团队的移动设备发布 Storybook 变得非常简单。它提供了运行 Storybook 应用所需的所有功能,而且无需连接到 Storybook 服务器。

@storybook/react-native 的更新改善了它与应用的集成方式。此外,Storybook 现在有了一个设备内置的用户界面,可以用于流行的插件,比如旋钮、便签和背景。

Storybook 主题

Storybook 4.0 提供了黑色主题

开发人员现在可以精确控制 Storybook 的外观。Norbert de Langen 引入了主题,它允许你调整样式以匹配你的品牌。

Storybook 4.0 包含了一个“黑色”主题来展示这些可能性。有关主题说明,请查阅文档(https://storybook.js.org/configurations/theming/)。

简化移动 Web 应用开发

前端开发人员为桌面和移动设备构建 Web 应用,Storybook 4 包含一个专门的移动视图。

当检测到移动设备用户代理时,Storybook 会在三个单独的选项卡中显示它的故事目录、主组件预览和插件面板。

你可以在手机上浏览我们的官方 Storybook 示例,检出一个演示程序,或者在 Web 浏览器的开发工具中设置一个移动用户代理并重新加载页面。

Story 参数 API

借助由 Tom Coleman 开发的新的参数 API,用户和插件作者现在有了配置故事的标准格式。

例如,不必针对每个故事使用笨拙的 withNotes 修饰符:

storiesOf('My component', module)
  .add('story1', withNotes('some notes')(() => <Component ... />))
  .add('story2', withNotes('other notes')(() => <Component .../>))

你可以在添加故事时通过传递一个额外的参数来标注故事:

// .storyook/config.js (全局修饰符,也支持局部修饰符)
addDecorator(withNotes)
// Component.stories.js
storiesOf('My component', module)
  .add('story1', () => <Component />, { notes: 'some notes' })
  .add('story2', () => <Component />, { notes: 'other notes' })

所有官方 Storybook 插件都会转换为使用故事参数,有关如何使用新 API 的更多信息,请参阅文档:

https://github.com/storybooks/storybook/blob/master/MIGRATION.md#addon-story-parameters

升级到 Storybook 4.0

只需一分钟,你就可以升级到 Storybook 4.0。

如果你对 Storybook 不熟悉,现在就是入门的最佳时机。Storybook 支持最流行的视图层和前端技术,帮助你创建长久的 UI 组件。查看 Storybook 教程,逐步演练 React/Angular/Vue,或者,你想立即开始:

cd my-project
npx -p @storybook/cli sb init
yarn storybook

Storybook 仍然是世界上最流行的 UI 组件浏览器。最近,该项目在 Github 上的 star 数超过了 3 万,在 NPM 上每月的下载量超过了 100 万,还有 500 个贡献者。

Storybook Open Collective 发展势头良好。它每月从 Facebook、Chromatic、Percy、Tipe 和 Applitools 等网站获得赞助,Algolia 和 Airbnb 最近进行了重大的一次性捐赠,另外,还有许多来自社区的支持者。

英文原文

https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de

 活动推荐

推荐大家关注由 InfoQ 中国主办的 ArchSummit 全球架构师峰会,大会即将于 12 月 7-8 日在北京国际会议中心举办,来自 Google、Netflix、LinkedIn、腾讯、阿里、百度、京东等百位知名企业的架构师都将前来分享各自的架构实践,并特别设置了前端技术专题,分享他们的最新黑科技和研发经验。

9 折优惠购票火热进行中,点击“阅读原文”了解更多详情!

票务 MM 灰灰联系方式:17326843116 (微信同号 等你来撩)