Storybook: Best Practices mit Angular

Storybook ist ein hervorragendes Tool zur Erstellung von UI-Komponentenkatalogen. Steuerelemente können hier isoliert betrachtet, ausprobiert und dokumentiert werden – eine perfekte Schnittstelle zwischen Designern, Entwicklern und weiteren Projektbeteiligten. Christian Liebel stellt Ihnen in diesem Webinar ein Vorgehensmodell vor, das auf unseren Erfahrungen aus vielen Kundenprojekten mit Angular basiert. Auf einen Streich entsteht damit nicht nur eine erstklassige Komponentenbibliothek, sondern zugleich eine besonders modulare Codebasis – die zugleich Synergieeffekte für Unit Tests und Mocking mit sich bringt.

Transcript

1. Storybook Best Practices mit Angular Christian Liebel @christianliebel Consultant
2. 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
3. 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
4. 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<AppComponent> = (args: AppComponent) => ({ component: AppComponent, props: args }) export const Primary = Template.bind({}); Primary.args = { title: 'foo' }; Storybook Best Practices mit Angular Storybook
5. 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
6. 1:1:1 Pattern 1 Module – 1 (or few) Components – 1 Story Storybook Best Practices mit Angular Modular Approach
7. Angular Material Storybook Best Practices mit Angular Modular Approach
8. 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
9. 1. ng generate module button 2. ng generate component button/button 3. (add story) Storybook Best Practices mit Angular Modular Approach
10. – 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
11. – 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
12. Add E2E tests (e.g., using Cypress) npm i cypress cypress-storybook Storybook Best Practices mit Angular Next Steps
13. Add visual regression tests (e.g., using Percy.io) Add component test harnesses Storybook Best Practices mit Angular Next Steps
14. Q&A Storybook Best Practices mit Angular
15. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com