Learnings from building a component library

on YouTube ↗26m

" summary

A four-person team runs a component library used by 300+ UI developers, enforces semantic versioning with weekly patch/minor releases, and keeps APIs stable by prefixing public symbols and marking internals with an underscore. Components default to onPush change detection, avoid direct DOM access, and use the Angular CDK and Angular Universal for platform independence. CI runs Axe accessibility checks, visual diffs on pull requests, custom lint rules, and a repo-scanner that finds deprecated usages across apps.

AI-written summary · about

" chapters (13)

1. 0:00Introduction and context
2. 2:13Component library motivation
3. 4:20API design philosophy
4. 5:55Consistency and familiarity
5. 7:49Building for flexibility
6. 9:31Establishing developer contracts
7. 12:06Versioning and communication
8. 14:25Using the Angular CDK
9. 15:25Managing change detection
10. 17:30Platform independence
11. 19:34Comprehensive testing
12. 21:45Community and tooling
13. 24:12Tracking usage and takeaways

" related talks

• 29mBuilding an Angular component LibraryCoen Koopman · AngularNL 2019
• 44mBest Practices on building a UI component library for your companyDavid Wells · Full Stack Fest 2016
• 25mFrom Design Systems to Component LibrariesGagik Arustamyan | ReactConfAM19 · React Conf Armenia 2019
• 24mCase Study: Creating a Component Library in React JSKathryn Grayson Nanz · NationJS Frontrunners React 2019
• 34mBuilding component libraries using the Angular CDKAustin McDaniel · Uphill Conf 2018
• 46mHow to Evolve a Component Library Without Breaking ItArtur Udalov · HighLoad++ 2017
• 28mDesign Decisions for the Components LibraryAlexey Shestakov · JetBrains JavaScript Day 2022
• 33mKickstarting a library of internal React components for multiple teamsXavier Lefevre · ReactFoo 2019