Storybook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment.
意思是什么呢,简单来说它是一个可运行在独立环境里面的UI组件开发工具。有以下几个特点:
将组件文档化,使得组件能够更好地复用,我们知道,复用是软件开发永恒的话题。
自动地将组件进行视觉测试,从而减少bug。
只在用于开发阶段,线上环境是不会将storybook的部分打包进去。
从0到1搭建一个storybook
根据官方文档,设置已有项目的storybook是非常简单的一件事情:
npx sb init:安装storybook依赖
npm run storybook:启动storybook,前面我们提到storybook会运行在独立的环境里面,相应地,在我的本地也是单独启动了一个服务
两年前开始听说storybook,当时看文档觉得很复杂,就没有深入地去研究、去了解,现在项目上有机会做这样的尝试,我个人就基于一个小组件进行了第一次尝试,弄好之后发现,哇塞,太好用了吧,怎么没有早早开始研究呢~~
Prerequisite
初衷
团队是一个有10人左右规模的团队,不算大团队,但是我们频繁地在自定义新的组件,而其他人做了什么,或者说我们代码目前有哪些组件,是否可以重用,新的业务需求有了UI的设计之后如何快速地沟通我们现有的组件,是否保持设计系统风格的统一。那Storybook是一个非常好的工具,可以做一个简单的试验。
什么是storybook
官方的解释:
Storybook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment. 意思是什么呢,简单来说它是一个可运行在独立环境里面的UI组件开发工具。有以下几个特点:
从0到1搭建一个storybook
根据官方文档,设置已有项目的storybook是非常简单的一件事情:
会看到搭建好之后已经有了几个例子,非常典型的Button,会有不同的状态、描述、默认值、Congtrols和Actions等。
我自己也是挑选了一个简单的组件来测试,登陆页面的Input组件,该组件也会有不同的状态:
根据这三种状态进行了不同的尝试,如下图:point_down::
按照文档的学习,实际上是非常简单的过程,我来总结一下值得注意的地方:
label
和onChange
一个描述,可以在自定义组件里面这么写:args
和defaultProps
两个属性,可传入props:*.stories.js
的代码个人的一些思考
前端开发组件化是一个趋势,设计领域的设计系统也都是在以原子化的趋势变化,storybook也是为了是的系统的统一性而衍生出来的一个产品,这是一个无论对于开发或是设计师来说都是极佳的体验。大量的插件也帮助我们更好地描述我们的组件。我认为storybook必将更加广泛地应用到开发领域,占有一片占比比较大的天地,我虽然也只是做了一个小小的试验,也深刻地感受到了storybook强大的威力,将来我也会更加关注设计系统。不论开发还是设计师,最终都是为了产品,好的产品需要多方面的认知。
References: