Reusable components: maintain clean code efficiently
summary
Claims concrete wins at GitLab: a design system called pajamas design system plus Vue components tame a giant repo of over 3,000 View files and about 1,500 buttons, leaving only 64 plain HTML buttons. The reusable button built supports props for variant/category/size, computed class binding, disabled and loading states, conditional icon-to-spinner swap, optional href output, and shared unit tests, so a single component fixes styling, accessibility and behavior project‑wide.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:43About GitLab codebase
- 3:08What is reusable component
- 5:34GitLab’s Pajamas
- 8:00Why reusable components matter
- 9:06How reusable components work
- 10:31Anatomy of reusable component
- 13:47Practical: building button
- 24:17Using button in code
- 27:32Refactoring to reusable components
- 28:59Summary
- 29:49Q&A
related talks
28mBuilding reusable UI components in Vue
21mVue JS Best Practices
34mComponent Documentation Made Easy
49mA Better Design-Dev Handoff Experience: Code-based Design System
27mVue and Vuex: The good, the bad and the ugly
07mDesign Systems in Vue
29mPerformant Components through Customisation
26mBuilding Awesome UI Apps with VUE