From Design Systems to Component Libraries

on YouTube ↗25m

" summary

Built component libraries for two independent projects to stop duplicated components and speed development, and they deliver measurable wins: fewer repeated implementations, faster feature shares across apps, and more consistent UI while still being work in progress. Implementation choices: transpile with Babel and publish precompiled modules, keep the library modular by design so apps import single components, expose native element attributes to proxy native props, split behavior (popover) from presentation (tooltip), and use Storybook and CSS modules + custom properties.

AI-written summary · about

" chapters (5)

1. 0:00Introduction
2. 0:50Design Systems
3. 4:13Component Libraries
4. 10:03Implementing Component Libraries
5. 18:30Styling Component Libraries

" related talks

• 44mBest Practices on building a UI component library for your companyDavid Wells · Full Stack Fest 2016
• 28mDesign Decisions for the Components LibraryAlexey Shestakov · JetBrains JavaScript Day 2022
• 24mCase Study: Creating a Component Library in React JSKathryn Grayson Nanz · NationJS Frontrunners React 2019
• 46mBuilding Reusable Components ... That Are Actually ReusableCory House · Connect.Tech 2021
• 46mHow to Evolve a Component Library Without Breaking ItArtur Udalov · HighLoad++ 2017
• 31mBuilding Component Library from ScratchSandro Dolidze · JS Conf Armenia 2021
• 21mBuilding Cross-Platform Component Libraries for Web and Native with ReactPerttu Lähteenlahtii · React Advanced 2021
• 26mLearnings from building a component libraryThomas Pink, Fabian Friedl · NG-DE Conference 2019