Component-Driven Development

Component-Driven Development is a different approach to front-end development that empowers and encourages developers to build pure components in isolation before integrating them into larger containers, pages and layouts. This approach opens the doors to many interesting opportunities which we will learn about during the session.

Links:
* https://blog.hichroma.com/component-driven-development-ce1109d56c8e
* https://storybook.js.org/docs/guides/guide-angular/
* https://www.npmjs.com/package/@storybook/addon-storyshots

Transcript

1. Presentation Name here YOUR NAME HERE Component Driven Development BYRON SOMMARDAHL
2. Start with “WHY?”
3. Pure Is Better
4. Testable Is Better
5. Faster Is Better
6. Now for the “HOW”
7. Design Component Build component in wireframes or mockups first. Development Workflow Integrate with View Add component to larger smart component, view or container. Test Component Try component out, still isolated, in various states. Build Component Code component in isolation using Storybook.
8. to the RESCUE
9. Add Storybook to your project Config Configures your project to support Storybook (including Webpack). Scripts Adds npm scripts that you can use to build and run Storybook. Samples Adds a few sample stories to get you started. Code >>
10. Develop in Isolation Storybook enables devs to build pure components, free of influence from other components or views. Code >>
11. Unit Tests Included! Every story can be a test with ZERO extra effort (with StoryShots).
12. 20 Components 24 Tests +75% Coverage 0% Extra Effort
13. WE’RE HIRING! Come join a team who gets to do stuff like this AND MORE! acklenavenue.com/jobs Download Slides: