Managing a (component) zoo - DIY web component catalogues
summary
Shows a concrete workflow for turning dozens of scattered NPM packages into a maintainable component catalog using Lerna as a monorepo, with an example repo, CI-friendly patterns and a local NPM registry. Details include Lerna bootstrap uses local packages to avoid network noise, one-button build/test scripts (npm run build / npm test), generating API clients from OpenAPI, Yeoman scaffolding for uniform components, and the practical pain points: concurrent builds exploding CPU minutes and a working local registry used during development.
AI-written summary · about
chapters (22)
- 0:00Managing JavaScript projects
- 3:00Web components overview
- 6:58Real-world project complexity
- 9:51Component versioning & dependencies
- 12:42Component workflow & testing challenges
- 15:12Code rot & inefficiencies
- 16:57JavaScript runtime differences
- 18:43Modern JS tooling solutions
- 20:12Yeoman generators for automation
- 21:37Strict linting & unified testing
- 23:28Lerna for monorepos
- 25:16Lerna development workflows
- 27:35Local dependency bootstrapping
- 29:10CI costs & parallelization
- 31:18Scaffolding & team discipline
- 31:40API clients from OpenAPI specs
- 33:25Secure local package registries
- 34:28Concurrency & hardware limits
- 36:13Windows & antivirus issues
- 37:18Lerna release limits
- 38:02Key takeaways
- 39:49Further resources
related talks
01h 12mMake Web Development Fun Again, with Web Components
29mBuilding an Angular component Library
24mCase Study: Creating a Component Library in React JS
46mBuilding Reusable Components ... That Are Actually Reusable
07mReact components, atomic design and storybook
42mMoving towards web components
51mBuilding Better Components — A Journey to a More Resilient Frontend
26mLearnings from building a component library