How to Evolve a Component Library Without Breaking It

on YouTube ↗46m

" summary

A Mail.ru team describes managing a shared UI component library used across projects and the repeated breakages when developers customized it. They explain their solution approach and tools used to prevent regressions, specifically naming Storybook, BackstopJS, Jest, Webdriver.io, and TypeScript.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 7:25Component library problems
3. 11:05CSS screenshot testing
4. 13:37Storybook development
5. 21:20JavaScript testing coverage
6. 25:16Test-driven development
7. 30:15Summary and future plans
8. 44:27Q&A

" related talks

• 25mFrom Design Systems to Component LibrariesGagik Arustamyan | ReactConfAM19 · React Conf Armenia 2019
• 26mLearnings from building a component libraryThomas Pink, Fabian Friedl · NG-DE Conference 2019
• 44mBest Practices on building a UI component library for your companyDavid Wells · Full Stack Fest 2016
• 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
• 33mKickstarting a library of internal React components for multiple teamsXavier Lefevre · ReactFoo 2019
• 14mBuilding a component library with React, Vue, Angular or WebComponentsNorbert de Langen · Frontend Developer Love 2018
• 28mDesign Decisions for the Components LibraryAlexey Shestakov · JetBrains JavaScript Day 2022