Storybook 6.0 your new favourite tool for front-end development

168 点作者 winkerVSbecks将近 5 年前

17 条评论

xrd将近 5 年前

Many teams struggle to write tests for their UI. It's a hard problem to solve, a mixture of culture challenges and technology challenges.Tests show how pieces work together outside of the small confines of a live system. If you don't write tests, you probably aren't considering all the ways you component can work outside of the narrow confines when you, as the author, wrote and tested it. And, you probably can't consider how another developer will use your component and change the environmental code around it.Storybook gives you all the benefits of tests in that you can pull out pieces and play them back in isolation. I see all the benefits of tests (except that I don't see the results in CI) when using storybook and refactoring. Broken stories tell me a lot about code problems.Storybook is UI testing done right, we just needed to brand it as a story rather than a test. ;)Congratulations on a big milestone. This is an incredible piece of software that I use on all my projects.

评论 #24133343 未加载

评论 #24133451 未加载

评论 #24133200 未加载

评论 #24133460 未加载

评论 #24133207 未加载

评论 #24145707 未加载

评论 #24135385 未加载

city41将近 5 年前

This is great to see. I've always been a fan of Storybook but have also struggled with it a lot. Each new release has reduced the struggle. To their credit, it's hard to drop something like Storybook into a project because frontend projects have almost no rhyme or reason to how they are made up (well, React anyway, which is what I mostly work in).I am also using Storybook for my game dev. I wrote my own renderer for my engine and so the entities in my game have stories. It makes building new entities and seeing how two entities interact so much nicer and faster.

评论 #24133084 未加载

xingped将近 5 年前

Anecdote, but at my work there's two teams whose libraries we use that use Storybook for documentation and it is decidedly worse than other teams that create non-Storybook documentation.I don't know if this is a doc writing problem or a product problem with how Storybook works (is it even supposed to be a documentation product? I don't know), but so far my experience has been a 0 for 2 with Storybook-based documentation being significantly worse than normal.

评论 #24134194 未加载

评论 #24134125 未加载

评论 #24135548 未加载

andybak将近 5 年前

I've skimmed that page and I'm not entirely sure I came away knowing what it meant. It's good to see an open source project that can compete with large commercial companies in terms of inscrutable fluff.

评论 #24132641 未加载

michaelmior将近 5 年前

I haven't played around with v6.0 yet, but I've been using Storybook for a while now and it's been great! A lot of the new features aren't relevant to most of the components in the current app I'm working on, but the changes still help reduce a lot of the boilerplate with configuration.On a related note, I've also started playing with Percy (<a href="https://percy.io/" rel="nofollow">https://percy.io/</a>) which automatically integrates with Storybook to provide visual diffs of components in multiple browsers. Super useful for quickly validating changes since it can automatically comment on your GitHub PRs when a change is detected. (Not affiliated with Percy at all, just a fan.)

评论 #24134832 未加载

sthomas1618将近 5 年前

In addition to Storybook, their Chromatic product is amazing.Hot take: Delete your snapshot tests. Use Chromatic instead.

评论 #24137082 未加载

评论 #24135138 未加载

randiantech将近 5 年前

Although configuration can be a bit problematic at first, the benefits of using Storybook are clear. In my previous job, the typical question of "Is there a component for something like <X>?" was pretty much resolved going to Storybook and check for it.

gmaster1440将近 5 年前

Really enjoyed using the tool when I was working on a React codebase, would love to see support for Blazor[1] at some point![1] <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor" rel="nofollow">https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor</a>

评论 #24132837 未加载

Rapzid将近 5 年前

Storybook has been great working on an incrementally enhanced Vue app. The standard app doesn't really work with HMR and is a PITA when it comes to feedback loop.Building out components in Storybook with all but the final page integration into the main app has been a great workflow thus far. Some custom API recording/playback utils have even made it a snap to work on larger "connected" components within Storybook. Even just being able to manually verify a bunch of different states after making a refactor by flipping through the component stories is a huge win over doing that in-app.What was no so great with 5.x is getting it to build like a @vue/cli stock build with sass and full sourcemap support. This took quite a bit of Webpack knowledge of which I already had a fair bit but now have far more. Still the source lines are wrong in error messages for Vue compoments(at least with TypeScript) and I haven't looked too far into why yet.I know they have put work into making Storybook 6.0 setup for Vue closer to the ecosystem defacto defaults, but I'm not super looking forward to upgrading and having to sort out any issues haha.

评论 #24134724 未加载

somehnguy将近 5 年前

This looks fantastic! I just installed it to a test branch on my React/Redux project. Unfortunately after running 'npm run storybook' and clicking any of the 'Configure' options I get a 404 from Github.Any of these links: <a href="https://i.imgur.com/GwrOwiS.png" rel="nofollow">https://i.imgur.com/GwrOwiS.png</a>Maybe it has to do with my install method? The 'npx sb init' on the get-started page did not work, I had to hunt down the npm package manually and do 'npx -p @storybook/cli sb init'. I'm assuming the sb init listed on the get-started page failed because I didn't have it installed yet? No mention of how to do that on the page though. I'm relatively inexperienced with npm. It does report that I'm running v6.0.4 instead of v6.0.0 though.Again this looks like it'll be a great help for my work (I tend to struggle with UI work a bit) but by now I should know that when a project promises 'magic simple setup' it is never the case :PI'll keep playing when I have more time later because I think it will be worth it.

评论 #24134045 未加载

littlecranky67将近 5 年前

I've played a little with storybooks now included-by-default addon-controls package (designated successor to addon-knobs) and got to say, the API has become worse - especially if you are using TypeScript. It seems the API wasn't created at all with strong typing in mind, and I can't see how they will ever be able to get there. Instead of having strong typed concise functions (number(), color(), etc.) everything now is supposed to be a generic map of string properties, attached to Component.args and the "type" information is a custom map assigned to Component.argTypes (similar to prop-types which are almost obsolete when using TypeScript).If a SB dev reads this: Please, drop controls, and continue to support the knobs API.

评论 #24142880 未加载

Fr33maan将近 5 年前

I strangely use storybook with cypress for react native ui testing automation. Also to get multiple screen size on the same screen to check everything is done properly.I didn't intended to share the repo but as HN is talking about storybook, here it is. Not ready for prod, many todos but the storybook/cypress is demonstrated here.<a href="https://github.com/Fr33maan/react-native-ui-real-boilerplate" rel="nofollow">https://github.com/Fr33maan/react-native-ui-real-boilerplate</a>

yboris将近 5 年前

FYI: <a href="https://storybook.js.org/" rel="nofollow">https://storybook.js.org/</a> eats 100% of my CPU when I'm on the website!

评论 #24137375 未加载

mixmastamyk将近 5 年前

> The UI component explorer you’ll ️ to use. > Production-grade component developmentHuh? Yes, as a dev I understand what these words mean. But there should be just a tiny amount of exposition of why I'd want to this, on the front page. Not sure why I'd want to, besides neat pictures.I'm guessing the folks are so deep into this they don't remember what it's like to be a newcomer. Interestingly, the github readme is a bit more descriptive.

hsavit1将近 5 年前

anyone out there using Storybook with React Native? I'm curious to hear if it is as useful as Storybook for web is.

评论 #24132777 未加载

评论 #24132761 未加载

brightball将近 5 年前

Can it work with TailwindCSS?

评论 #24134780 未加载

cheez将近 5 年前

I have a Jupyter notebook that does this. Not sure I see the value of this tool but I guess packaging it up nicely is the value.