Bridging the gap between UX and development – A Storybook

on YouTube ↗37m

" summary

Claims that Storybook.js creates isolated, interactive UI components that become a single source of truth; demonstrates an Angular 7 Trello-like app using Angular Material drag-and-drop and shows stories for task, task-list and app states that reveal bugs before integration. Setup details include a .storybook config, Babel dependency and an npm script to run and publishable static storybook builds. Notes limitations: global state and HTTP services require mocking and extra wiring.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 4:29Building a design system
3. 6:53Pros
4. 7:26Cons
5. 17:53Install steps
6. 18:07Test application

" related talks

• 31mA Beginner’s Guide To StorybookNiamh McCooey · JSworld Conference 2023
• 32mStorybook Your Angular App with NxKaterina Skroumpelou · NG-BE 2021
• 15mOnce Upon a Time StorybookMichèle Legait · BDX I/O 2019
• 07mReact components, atomic design and storybookEinar Afiouni · NDC Oslo 2017
• 16mStorybook, a Really Good Idea?Sara ATTALLAH · Devoxx France 2023
• 27mBuilding a Maintainable UI with StorybookNorbert de Langen · ReactNext 2018
• 40mLove Story: Testing angular components with Storybook and PlaywrightTally Barak · angularday 2022
• 24mA Short Synopsis of Vue StorybookPeter Finn · VueConf US 2018