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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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 = (args: AppComponent) => ({
   component: AppComponent,
   props: args
   })
   export const Primary = Template.bind({});
   Primary.args = { title: 'foo' };
   Storybook
   Best Practices mit Angular
   Storybook
   

   View Slide

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
   

   View Slide

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

   View Slide

7. Angular Material
   Storybook
   Best Practices mit Angular
   Modular Approach
   

   View Slide

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
   

   View Slide

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

   View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

14. Q&A
    Storybook
    Best Practices mit Angular
    

    View Slide

15. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide