Storybook Best Practices mit Angular Christian Liebel @christianliebel Consultant

1. Introduction 2. Adding Storybook to existing Angular apps 3. Modular approach to implementing UI components 4. Architectural Advantages 5. Advantages for tests and mocking 6. Q&A Storybook Best Practices mit Angular Agenda

Overview – development environment for isolated UI components – provides a component library – allows to interactively develop and document components – technical & non-technical roles – add-on support (controls/knobs, actions, viewport, …) – Angular, React, Vue.js, Web Components and others supported Example: https://bbc.github.io/psammead/ Storybook Best Practices mit Angular Storybook

Component Story Format (CSF) import { Meta, Story } from '@storybook/angular'; import { AppComponent } from './app.component'; export default { title: 'App/AppComponent', component: AppComponent } as Meta; const Template: Story = (args: AppComponent) => ({ component: AppComponent, props: args }) export const Primary = Template.bind({}); Primary.args = { title: 'foo' }; Storybook Best Practices mit Angular Storybook

To Existing Angular Apps Angular CLI Workspace npx sb init npm run storybook Nx Workspace yarn add --dev @nrwl/storybook nx g @nrwl/angular:storybook-configuration project-name nx run project-name:storybook Storybook Best Practices mit Angular Adding Storybook

1:1:1 Pattern 1 Module – 1 (or few) Components – 1 Story Storybook Best Practices mit Angular Modular Approach

Angular Material Storybook Best Practices mit Angular Modular Approach

1. Designer provides a draft 2. Developer creates a module, component, and story 3. Review with designer, customer, other project members, … 4. (Iterate) Storybook Best Practices mit Angular Workflow

1. ng generate module button 2. ng generate component button/button 3. (add story) Storybook Best Practices mit Angular Modular Approach

– Separation of Concerns vs. “the all-solving CoreModule” – Only import what you need (improves tree-shaking etc.) – Supports lazy loading via dynamic import() – Refactor stability: internal restructurings don’t necessarily require changes (facade pattern) Storybook Best Practices mit Angular Modular Approach

– Ensures to think in isolated components – Favors presentational components where possible – Use the same mock data and service implementations for tests or the prototyping process Storybook Best Practices mit Angular Architectural Advantages

Add E2E tests (e.g., using Cypress) npm i cypress cypress-storybook Storybook Best Practices mit Angular Next Steps

Add visual regression tests (e.g., using Percy.io) Add component test harnesses Storybook Best Practices mit Angular Next Steps

Q&A Storybook Best Practices mit Angular

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]