Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storybook: Best Practices mit Angular

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

March 03, 2021
Tweet

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