storybook软件

2023-10-16 1719阅读

我一开始以为storybook是做组件库用的,随着我后面了解越来越深发现压根不是这么回事。后来经过我不断的翻storybook才发现stor活动:慈云数据爆款香港服务器,CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快,免备案,每月仅需19元!!storybookUI 我们先说一下不装插件的storybookUI,奇丑无比,一个canvas的tab页,看起来特别特别奇怪,光这ui就让不少人不想用这工具了。说了这么多,来个原子系统案例,此案例并非storybook制作。storybook试着去探索了几个设计流的最佳方案,做了几个说明书,其中组件开发人员的搞完了,设计人员的还没弄完。chormaui就是storybook的幕后公司。利用storybook制作设计开发范例。source插件 直接显示storybook上写的代码是哪一行写的。

前言

storybook软件
(图片来源网络,侵删)

我一开始以为storybook是做组件库用的,随着我后面了解越来越深发现压根不是这么回事。

我在写组件库中发现,很多功能比如umi-library(现在改名umi-father)都有了,storybook和umi-farther用的都是docz,那我直接用docz,干嘛用storybook?后来经过我不断的翻storybook才发现stor活动:慈云数据爆款香港服务器,CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快,免备案,每月仅需19元!! 点击查看ybook压根不是只为了做组件库存在的。

storybookUI 我们先说一下不装插件的storybookUI,奇丑无比,一个canvas的tab页,看起来特别特别奇怪,光这ui就让不少人不想用这工具了。没错,一开始我也这么觉得的,但storybook有个插件,以前是addon-info,现在变成了addon-docs,并且生成文档可以只输出docs内容,而不输出它原本的canvas内容。这个工具用起来很顺眼,而且做出来效果跟umi-farther那些差不多,毕竟都是用了docz,于是我就先用这个了。后来,我就觉得,storybook干嘛搞一个那么丑的canvas?storybook做这个canvas难道不想让别人用?一个为视觉开发者做的工具,制作者不可能连基本的审美也没有吧?经过我探索发现,storybook是做的一个平台用来整合各种工具,而它的canvas,并不只是展示组件那么简单,展示组件用docs插件呗,所以它这玩意其实是想做成一个类似工作台一样的东西。另外,它支持各种主流前端框架,还有些神奇用法,可以自己探索下。这个像工作台一样的东西不是用来展示给外人看的,而是为了内部使用,展示给外人看就用docs插件就好了。 原子设计,CDD组件驱动开发与storybook设计工作流 我以前也没听过什么原子设计,自从发现storybook的奇怪ui后才各种搜索知道的。原子设计的理念就是先造出原子,然后从原子造分子,最终造出页面,以及app。这个方式很麻烦,但是会有很好的效果。比如一个公司的所有产品,全是一个风格,那么就有很强的品牌感,如果有地方需要修改,那么所有组件全部都可以统一样式观察。还有的优势可以参考我百度到的这篇文章。说了这么多,来个原子系统案例,此案例并非storybook制作。在线预览地址。这个人是Brad Frost,原子设计系统创造者,storybook官网也有引用他说的一段话:

“Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing.”来个storybook官方给的工作流:

storybook试着去探索了几个设计流的最佳方案,做了几个说明书,其中组件开发人员的搞完了,设计人员的还没弄完。感觉设计人员的使用教程应该是围绕chromaui来进行。storybook可以把组件导入chormaui软件,有个线上版本的软件,类似于sketch一样的东西。chormaui就是storybook的幕后公司。用storybook自己的话来说,

如果一个组件被复用过3次,那么这个组件应该写到组件库里,如果一个组件库被复用3次以上,那么这个组件库应该拿来做成设计系统。

所以按我个人的理解,设计系统是在组件库之上的存在。利用storybook制作设计开发范例。

另外可以他们怎么利用storybook设计storybookUI的,并不是特别死的照搬原子设计storybookUI设计开发范例。

storybook的幕后公司chormaui在搞组件驱动开发(Component-Driven Development),也就是CDD,这个思想基于原子设计理念与一些现在比较流行的微前端概念,去掘金百度搜个CDD啥也没有。。我翻到一篇讲CDD的文章感觉讲的很好CDD开发指南。CDD个人简单理解,就和字面意思一样,是通过组件来驱动开发。就像TDD是测试驱动开发,而CDD就是完成所有组件的各种功能,以及其基本元素,开发时只要各种组合即可。有人可能会问,这和我直接去antd上拿写好的组件库有什么区别呢?个人理解,区别有以下几点:

1、可以同时并行开发并修改工作。比如一个团队,每个人都去antd上拿组件,结果设计师觉得某个地方颜色都得换掉,那么就得通知所有人把自己copy的组件全部换一下,这就是及其浪费效率的。但使用CDD开发,只要修改基本元素样式,就可以保证团队开发出的所有组件全部样式统一。新项目来的话,直接复用或者开发组件,调整风格即可。

2、更好的解耦拆分与维护。你做一个项目,一般不可能所有组件都能可以从antd上找到,总得自己做点什么东西吧,或者你需要加点自己的元素之类。但是这样你就是从0开始制作,或者因为对这个组件不熟悉而花时间去研究。而进行CDD开发,并不需要从0开始,只要拿到所需要的元素,既能保证风格统一,又能加快开发效率。

3、更加强大的代码共享。如果有队友写好一个组件,可以直接拿来复用,而不需要另外担心样式风格不统一的问题。

4、更短的学习曲线。由于是组件驱动开发,所以每个开发人员对于组件理解更熟练,开发新项目时开发速度更快! storybook插件 官网插件knobs,actions,source,docs,viewport,storyshots,backgrounds,accesssibility,console,links一般安装完,官方默认给配了actions,插件和links插件 actions插件 有actions,就会有个控制台一样的面板,有点像jest的mockfn一样,触发组件操作可以通过它提供的函数打印到面板上。actions插件文档。 links插件 这个插件比较常用,可以在不同story间进行跳转,可以当是个a链接用。links插件文档。 knobs插件 这个插件厉害了,主要是用来生成变量,并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字,那么文字可能有长有短,就可以使用这个插件设定一个长的文字和一个短的文字,预览时可以切换。另外还有很多强大功能。甚至可以代替background插件改变背景颜色。knobs效果在线预览knobs插件文档 console插件

需要借助于action插件来输出,为啥要用这个插件说明上写了,说可能有些情况要。。。反正我有点没理解。

addon-console预览界面

addon-console插件文档

source插件 直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。source插件文档 docs插件 docs插件就不用说了吧,支持mdx,就是最后可以展示给不懂行的人看的文档。我自己写了个组件库玩,还没写完,很多高级功能都没用,感觉这些功能比较适合团队开发,我一个人当然图快,主要就是靠docs插件做文档,同时部署静态网站到githubpage。我的组件库在线预览。docs插件文档 viewport插件 这个插件可以对tab页新增个选项,跟chrome里的切换不同设备有点像,使用这个功能,就可以把一个组件放入不同设备大小的story里。viewport插件文档。 background插件 可以设置story的背景颜色之类,当然也有些简单方法可以不需要background插件就能设置背景。background插件文档。 accesssibility插件 又叫a11y插件,有点相当于组件级别的lint,可以自动检验组件是否符合某些规范。一般是用来检查视障人士能不能分辨之类的。基于axe搞的。效果预览地址。a11y插件文档 storyshots插件 这个插件官网写的让人有点晕,实际还分成2个插件,都是jest相关。主要插件是storyshots,它可以把jest运行结果置于底部控制台页上,介绍说还可以拿到旧代码快照什么的,有点没懂怎么搞。另一个插件是storyshots-puppeteer,基于上面那个,pupeteer就有点像selenium一样开个虚拟浏览器去做测试。storyshots插件文档puppeteer插件文档 好用的社区插件 官方插件就上面那些,有些社区插件写的也很不错,可以看看。 storybook-mobile插件 可以给你的移动端网站用户体验上自动提供建议。这个功能相当6啊,对于移动开发经验不足的人有很多帮助。插件使用后在线预览地址插件文档地址 storybook-design-token插件 这个插件我个人觉得适合比较大的项目,我们写样式往往要制作多个变量,比如antd那个样式文件,定义了很多很多变量,还有动画之类的,但人脑肯定记不过来,就算记得了也可能记不得它是什么效果。有了这个插件,就可以把变量和效果全部展示出来。在开发过程中提供帮助。插件文档地址作者设计思想在线预览地址 Apollo Storybook Decorator插件 用于制作模拟graphql的插件,相当于可以模拟个假graphql传来的数据进行展示与调试。插件文档地址 storybook-graphql-kit 插件 也是graphql的一套工具,可以在线修改数据之类。插件文档地址 Readme 插件 这个功能有点对标了docs插件,感觉适合纯内部分享使用,它可以对每个story做一个文档说明,并且功能和docs差不多,就是docs是在tab页并且可以独立输出,这个是在addons界面,并且不是默认展现,每个都需要点一下看见。效果在线预览插件文档地址 storybook-addon-versions 插件 这个插件不支持storybook5,有段时间没维护了,就说一下功能吧,就是可以通过配置版本号实现各个版本的组件库中穿梭。比如我1.0.0的button是一个样子,1.0.1的button是另一个样子,那么就可以来回切换看。 story2sketch 插件 很多设计师会用sketch软件,这个工具可以把storybook的文件导出,导入给sketch使用。不过这个只支持5以下,storybook6本身就可以自己导出给sketch了。插件文档地址 jsx插件 这个插件感觉有点对标source,或者是docs部分功能。可以显示story中jsx怎么写的。插件文档地址 storybook-addon-react-live-edit 插件 在线实时编辑,感觉这个功能有点对标knobs。插件文档地址 i18n 插件 全局国际化用。插件文档地址。 storybook-host 插件 这个插件可以设定故事iframe设定些属性。插件文档地址 Specifications Addon 插件 这个插件可以用来整合一些测试工具到storybook上,有点类似storyshots插件 Storycap 插件 这个插件名字起的挺好啊,用途就是通过puppeteers来对每个故事截图,然后生成到文件夹里。插件文档地址 storybook-addon-responsive-views 插件 响应式布局一次头全预览!不过感觉加了viewport然后使用docs插件也能做到。插件文档地址 Storybook Playroom Addon 插件 可以同时浏览在不同分辨率下的效果。插件效果在线浏览插件文档地址 storybook-addon-theme-playground 插件 可以对每个story设置主题,有点像做好参数的knob。在线预览地址插件文档地址64759573

《storybook软件》来自互联网同行内容,若有侵权,请联系我们删除!

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]