Storybook 5.0正式发布:有史以来变化最大的版本\n
Storybook 5.0(SB5)于近日正式发布,这是目前为止最大的一个版本。新版本的内容包括:
全新的开发者体验;
带有主题的组件库;
改进的前端插件架构;
全新的Storybook网站。
Storybook的进展和未来
Storybook是目前最受欢迎的UI组件环境,它为各种视图层(如React、Vue、Angular、React Native、Ember)提供了结构化的UI开发、测试和文档。
采用情况:Storybook是Airbnb、Slack、Squarespace、Lyft和Dropbox等巨头公司的首选UI工具,而且在各个行业和开源项目中的采用还在继续增长,最近的每月npm下载量超过450万次。
蓬勃的社区:Storybook社区在Github上有600多个贡献者和34K个星标,从星标数量来看,Storybook已经进入了前40个JavaScript项目的行列。Storybook社区比以往任何时候都更强大。为了这个项目的未来,还成立了一个由高级维护人员组成的指导委员会。
专业级工具:在2018年,Storybook团队专注于构建Storybook平台,包括扩展视图层支持、插件的交叉兼容性,并与JavaScript工具一起演化。2019年,Storybook团队将通过以下方式改善开发者体验:
提高用户反馈的优先级;
为Storybook提供更多的配置方式;
发布更多小版本,让平台变得更稳定。
Storybook 5.0新特性
SB5的核心是一个漂亮的新用户界面。具有讽刺意味的是,对于这样一个被广泛使用的UI开发工具,Storybook本身在设计方面还有很多需要改进的地方。Storybook的新设计是自项目开始以来的第一次重大调整。
新的用户界面解决了自2016年以来用户反馈的问题,包括:
新设计的亮色和暗色主题;
画布工具栏,可以方便地访问插件;
调整导航栏,菜单更加直观;
重新设计插件面板,可以使用按钮切换可见性和方向;
用户可配的键盘快捷键;
新的URL结构,消除了长串的查询参数。
这些升级改进了整个Storybook生态系统的视图层、插件和集成。
重用Storybook组件
Storybook本身就是用Storybook构建的。Storybook团队正在发布@storybook/components库,用来加快开发速度,促进最佳实践。这意味着插件开发人员可以更快地构建与Storybook UI一致的插件。
Storybook组件使用React和Emotion实现。这个库包含了Storybook界面的所有构建块,可用于开发桌面和移动UI,并可通过Emotion灵活的主题API进行定制开发。
这个库实现了以下几个的目标:
加快开发:记录常见的用例、自动化可视化测试,并促进代码重用;
促进最佳实践:Storybook团队的长期目标是让这个库成为使用Storybook构建设计系统的风向标。虽然还有很长的路要走,但SB5是迈出的关键一步;
改进工作流:SB5的很多改进来自构建Storybook组件库本身。
定制Storybook
Storybook还提供了一个新的前端架构,用于改进Storybook的定制化。Storybook一直都有提供插件和构建配置API,而现在SB5开始开启可配置的用户界面。
主题API
在Storybook中应用主题比以往任何时候都更容易、更一致、更美观。这可以通过新的主题API来实现,新版本的API对4.0版本的API进行了改进。
Storybook提供了开箱即用的“亮色”和“暗色”主题。这些主题可以独立使用,可以作为主题定制化的起点。下面是一个简单的例子:
SB5的主题系统被抽象为一组变量,简化了开发人员的定制化工作,同时随着Storybook UI的演化,更容易保持向后兼容性。有关SB5中主题的更多信息,请参阅相关文档。
插件API
SB5包含了一个扩展的插件API,提供了两种将插件连接到UI的新方式:工具栏和选项卡。
工具栏:插件现在可以被添加UI到工具栏!这样用户就可以立即看到插件。视图、背景和可访问性插件都支持这个新特性。
选项卡:插件还可以向主面板添加新选项卡。Notes插件已经支持这个特性,稍后会有更多的集成。
对于插件用户来说,SB5的安装和配置并没有发送变化。对新API感兴趣的插件作者可以参考Storybook的插件文档。
全新的Storybook网站
最新版SB5的最大亮点是Storybook的新网站。这个网站解释了Storybook诸多方面的好处——灵感来自社区的聚会、讨论、演示和博文。
为什么要使用Storybook?
用户经常会问为什么要使用Storybook?Storybook有很多应用场景:组件资源管理器、样式指南、UI文档、playground、沙箱、workshop和库。
下面的这个视频可以很好地回答这个问题。在不到两分钟的时间里,你将了解到为什么独立组件开发对现代应用程序来说非常重要,以及Storybook如何帮助你实现这一点。
升级到Storybook 5.0
如果你在运行Storybook 4.x,那么升级到5.0就很简单。这里有一个5.0升级指南。
如果你在使用3.x,那么也可以参考一下4.0升级指南。
如果你是Storybook新手,可以看看Storybook教程。
如果你想直接开始使用Storybook,只需要30秒就可以将SB5添加到现有项目中:
cd my-projectnpx -p @storybook/cli sb inityarn storybook
英文原文
https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8
更多内容,请关注前端之巅。
Storybook 5.0正式发布:有史以来变化最大的版本\n相关推荐
- PC休闲游戏~植物大战僵尸-植物连连看v1.0正式发布啦(更新iPhone版本)!
11.29: 又稍微花了一些时间制作了HD的iPad版本,不过提交app store审核失败了,侥幸看来真的只有一次啊 -增加计分(done) -增加关卡选择(done) 6.14: 看到卖的很悲惨, ...
- Spring Cloud 2020.0.0 正式发布,对开发者来说意味着什么?
作者 | YourBatman 在线教育领域资深架构师,Spring Framework 开源贡献者 冷冷 云集架构师.开源项目 pig 负责人.Spring Cloud Alibaba Commit ...
- Spring Boot 2.0正式发布,升还是不升呢?
Spring帝国 Spring几乎是每一位Java开发人员都耳熟能详的开发框架,不论您是一名初出茅庐的程序员还是经验丰富的老司机,都会对其有一定的了解或使用经验.在现代企业级应用架构中,Spring技 ...
- C# 9.0 正式发布了(C# 9.0 on the record)
翻译自 Mads Torgersen 2020年11月10日的博文<C# 9.0 on the record> [1],Mads Torgersen 是微软 C# 语言的首席设计师,也是微 ...
- .NET 5.0正式发布,有什么功能特性(翻译)
我们很高兴今天.NET5.0正式发布.这是一个重要的版本-其中也包括了C# 9和F# 5大量新特性和优秀的改进.微软和其他公司的团队已经在生产和性能测试环境中开始使用了.这些团队向我们反馈的结果比较令 ...
- Rainbond 5.0正式发布, 支持对接管理已有Kubernetes集群
今天很高兴的向大家宣布Rainbond v5.0正式发布,Rainbond是开源的企业应用云操作系统,支撑企业应用的开发.架构.交付和运维的全流程,通过无侵入架构,无缝衔接各类企业应用,底层资源可以对 ...
- TypeScript 2.0 正式发布
9 月 22 日,TypeScript 2.0 正式发布了. TypeScript 是微软开发的开源的编程语言,主要负责人是 C# 之父 Anders Hejlsberg. TypeScript 成功 ...
- “智汇光大 E启未来” 中国光大集团ESBU协同核心系统1.0正式发布
12月22日,"中国光大集团ESBU协同核心系统1.0"正式发布,标志着光大集团战略和光大数字化发展取得又一重大进展.光大集团党委书记.董事长李晓鹏现场发布"E-SBU协 ...
- 【Flink】Apache Flink 1.13.0 正式发布,流处理应用更加简单高效
1.概述 转载:Apache Flink 1.13.0 正式发布,流处理应用更加简单高效 侵权可删,这里是做个笔记,防止找不到. Flink 1.13 发布了!Flink 1.13 包括了超过 200 ...
最新文章
- Sqoop数据分析引擎安装与使用
- 构建 编译和运行Urho3D工程
- python读取txt中的一列称为,从python中的文本文件读取特定列
- Initializing libiomp5md.dll, but found libiomp5md.dll already initialized.
- python numpy矩阵乘法_高维Python-Numpy矩阵乘法
- vue --- [全家桶]vue-router
- [C#.NET 拾遗补漏]09:数据标注与数据校验
- 2018acm-icpc宁夏邀请赛后记
- Android 实现瀑布流的两种思路
- nvm use切换node版本,但是切换后没有*号
- I9 9900K线程_收藏党抓紧了!英特尔停产i9-9900K特色包装,只因运输太浪费
- java juc 包_JUC java并发包
- 在Dynamics 365 Fo/AX2012中获取不同类型的时间
- android studio partially installed,APK安装流程详解2——PackageManager简介
- 由于找不到vcruntime140_1.dll,无法继续执行代码
- 可微分神经计算机DNC
- 有道云笔记Markdown图片插入居中方法
- 车轮轨迹原理_在简单地形上小车运动轨迹的数学表达(一)
- 多线程中线程池常见7个参数的详解以及执行流程
- 中小学不得在校内设置食品经营场所,量子摩尔定律问世,美团运营摩拜亏45亿,英伟达史上最大手笔收购,这就是今天的大新闻。...
热门文章
- Vue组件绑定自定义事件
- 【C++】【六】约瑟夫问题
- 得到的旋转向量和平移向量转换成旋转矩阵 (SE(3))
- linux查看系统版本信息命令
- Linux(centOS)手动安装Apache+MySQL+PHP+Memcached+Nginx原创无错版
- Google Mock(Gmock)简单使用和源码分析——简单使用
- 在windows程序中嵌入Lua脚本引擎--使用VS IDE编译Luajit脚本引擎
- Ubuntu下使用CMake编译OpenSSL源码操作步骤(C语言)
- 在Windows7/10上快速搭建深度学习框架Caffe开发环境
- C++中#error/assert/static_assert的区别及使用