サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
storybook.js.org
Atomic Design by Brad Frost inspired frontend developers to create design systems. It shifted our focus from implementing UIs one page at a time to creating reusable, atomic components. Design systems went from "nice to have" to "must have". But a majority of design systems ended up imploding. According to the 2021 Design Systems Survey, only 40% of the systems were successful. Why do some design
Teams at GitHub, Adobe, BBC, and many others use Storybook because it streamlines your frontend workflow. You write stories for granular UI states and then use them to verify component appearance during development. From there, you can reuse stories to run snapshot, visual, and accessibility tests during QA. Storybook can even analyze stories to auto-generate documentation. Storybook 6.5 is our bi
Storybook is the industry-standard UI component workshop. Thousands of application and design system teams worldwide spend most of their day working inside Storybook—building, documenting, and testing their UI components. Therefore, Storybook needs to run as fast as possible, so it does not slow down their workflow. Storybook's performance when first booting up or rebuilding a changed file largely
Storybook is the workshop environment where all UI code gets built, tested and documented. It's used by front-end teams at Shopify, Workday, Adobe, The Guardian and many more to ship robust UIs. As Storybook usage has grown, performance has become a top priority. A central theme for our 6.x release series has been to re-architect Storybook to reduce build and load times. We started by optimizing p
Components fetch data, respond to user interactions, and manage app state. To verify this functional behavior, developers rely on automated tests. But most testing tools are Node and JSDOM based. That means you’re forced to debug visual UIs in a textual command line. At Storybook, we’re improving component testing by using the browser to run tests. Over the past six months, we introduced several f
Over time, implementation and design tend to drift apart. As apps get more complex, teams lose track of what’s been developed in Storybook and what’s been designed in Figma. This ambiguity slows you down. I’m thrilled to announce that Storybook Connect for Figma is now in beta. It’s a Figma plugin which brings your stories into the design workspace. That streamlines design handoff and UI review be
Shipping UIs is lossy. It requires constant back and forth between design and development. Designs help you get an overview of the UX, but are often limited to the happy path. It’s up to developers to hunt for all the un-specced edge cases. Meanwhile, development is never perfect the first time around. It’s up to designers to give feedback and sign off on the implementation before it ships. We res
Building pages in an app might seem straightforward at first, but as your project matures things get more complicated. What happens if the network fails or the data is missing? Or worse, your app gets poorly formatted or incomplete data. What should the page render in all these scenarios? Leading teams at Mozilla, The Guardian, and Shopify use Storybook to capture page states that are tricky to re
Storybook is the industry-standard tool for building component-driven user interfaces. It enables you to capture component use cases as stories and render them in a browser. During development, you can quickly cycle through them to verify UI appearance. But there's more to a component than just looks. Teams at Target, Adobe, and Shopify import stories in their tests to verify component behavior. N
The more information you have, the harder it is to find what you're looking for. At first, your Storybook has a handful of components, so it's easy to keep track of things. But as the number of components grows, so does the organizational complexity. You end up with questions like “Where did we put that component again?” and “Is there a story for this state?” That leads to confusion, or worse, dup
At Storybook, we believe the software industry is converging on Component-driven UIs to deliver durable user experiences. Our goal is to accelerate the industry's shift to components. Thousands of developers now build, test, and document components with Storybook. Designers create components too. Figma adopted components back in 2016 and is championing the cause from the design perspective. I’m ex
A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next ⚠️ DEPRECATED ⚠️ This addon has been deprecated in favor of @storybook/nextjs which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything storybook-addon-next does and much more! I even worked on developing this with them so you should be in good hands.
Refactoring CSS is one of the most challenging tasks as a frontend developer. You need to improve the code without altering the look and feel of the UI. But it's tricky to catch visual changes as you refactor an entire production codebase across multiple repos. Moreover, dealing with global styles, overrides, pseudo-states and browser quirks makes the job extra complicated. Last quarter we migrate
Storybook is the industry-standard UI development workshop for components and pages. It's used by BBC, Netflix, Twitter, and thousands more teams. Since the beginning, our goal was to make the tools and techniques used by the best frontend teams available to everyone. Today, Storybook has established itself as the best practice for component development, testing, and documentation. It supports eve
Storybook is used by thousands of teams at companies like Audi, Twilio, and Spotify. Our community develops everything from atomic UI components all the way to pages in isolation with Storybook. Along the way, developers write countless stories. Even though stories follow CSF, a standard ES6-based format, it can still be tough to catch typos and syntax errors. Or to know which practices are offici
OverviewUI testing is integral to delivering high-quality experiences. But there are so many ways to test that it can be overwhelming to figure out what's right for your project. This guide distills learnings from leading teams such as Target, Adobe, O'Reilly and Shopify into a pragmatic testing strategy that offers comprehensive coverage, easy setup, and low maintenance. We'll walk through the pr
professional developers experienced with JavaScript, React and Storybook. If you're not quite there yet, visit Intro to Storybook to learn the basics! Testing UIs is awkward. Users expect frequent releases packed with features. But every new feature introduces more UI and new states that you then have to test. Every testing tool promises “easy, not flaky, fast”, but has trade-offs in the fine prin
Storybook is the leading UI development workshop for components and pages. Over the past five years, it's grown from niche tool to standard fixture in frontend that's used by teams at Twitter, Github, BBC, and the New York Times. As Storybook's user base has grown, so have its use cases. Early adopters used Storybook to develop components for design systems and libraries. Now, teams use it to buil
2023 UPDATE: Storybook created a zero-config integration with NextJS. Learn how to use it here. Next.js is a fantastic framework for building high-performance applications in React. But as it becomes more advanced — with features like next/image — it becomes more difficult to integrate with documentation and testing environments like Storybook. I dove in deep to learn how to make Storybook the bes
🚀 Get started🖋 Write stories📖 Write docs🔬 Testing🔖 Sharing🧩 Essential addonsIntroductionActionsBackgroundsControlsHighlightInteractionsMeasure & OutlineToolbars & globalsViewport🔧 Addons⚙️ Configure🧰 Builders🔌 API🛠 Contribute❓ FAQ↗️ Migrate to 7.0 Watch a video tutorial on the Storybook channelStorybook Controls gives you a graphical UI to interact with a component's arguments dynamicall
Building components in isolation allows you to stress test them to find edge cases. With Storybook, you write stories for each of these cases by supplying props to your component. But not all component variations can be reproduced with props alone. Some UI states can only be reached via user interaction like dropdowns, modals, and hidden form elements. In the past, you interacted with the componen
As the number of stories grows, it gets trickier to load them all in a performant way. That ends up bogging down the developer experience. We use Storybook to build Storybook so we also feel that pain. In recent releases, performance has become a top priority. The latest versions include incremental yet noticeable improvements in build time and bundle size. I am excited to share Storybook's new on
UI testing workflows often spiral into maintenance nightmares. Your tests break whenever there’s an implementation tweak. You duplicate test cases for every tool. It’s easy to find tools that test different parts of the UI. But knowing how to combine them into a productive workflow is tricky. If you get it wrong, the UI development process feels like a slog. I interviewed ten teams from companies
Developers spend 4-8 hrs a week fixing bugs. Things only get worse if a bug sneaks its way into production. It takes 5-10x longer to fix it. UI testing is integral to delivering high-quality experiences but can be a huge time sink. It's too much work to run all your tests manually after every change. Leading UI engineering teams at Twilio, Target and Adobe automate UI testing. Tests are triggered
Storybook is the industry standard tool for building component driven user interfaces. It enables structured UI development, documentation, and testing. I’m thrilled to share a preview of Storybook’s supercharged testing features. Stories capture key states of your components. Leading teams like Shopify, Adobe, and O’Reilly Media already import stories in their test files to expand UI test coverag
26% of adults in the US have at least one disability. When you improve accessibility, it has an outsized impact on your current and future customers. It’s also a legal requirement. The most accurate way to check accessibility is manually on real devices. But that requires specialized expertise and a lot of time. Both of which are scarce on frontend teams. Teams at Twilio, Adobe and Shopify use a c
Storybook is based on one core construct: the story. Everyone that uses Storybook writes stories for their component examples. Component Story Format is our expressive, platform-agnostic format that's used across the industry from Netflix to Shopify and beyond. I'm excited to announce Component Story Format 3.0. It's the next major iteration of CSF that harnesses a year's worth of community feedba
Storybook is the industry-standard UI development workshop for components and pages. It's used by Dropbox, Shopify, Stripe, and thousands more teams. Developers choose Storybook because it helps them focus on one thing: the user interface. There's already a mountain of complexity in app development, Storybook makes your job simpler by isolating UI concerns from the noise of backend, APIs, and data
Remember Javascript fatigue? It was 2015, and every few hours a new framework/boilerplate/build tool would burst onto the scene, one-upping the previous contender and shooting to the top of Hacker News. Eventually, React and Webpack became a de facto standard and a relative peace fell across the land. Frontend devs were able to relax and get real work done rather than frantically switching tools e
次のページ
このページを最初にブックマークしてみませんか?
『Storybook: Frontend workshop for UI development』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く