'Centralizing the Frontend with Design Systems and Web Components'
summary
Chatham Financial centralizes ~30 web components using Stencil and web standards (custom elements, Shadow DOM) so Angular, React, Vue, jQuery and legacy apps share the same UI and accessibility behavior. The system keeps almost no modeled values (about 50–60 pieces of internal state across 30 components), uses size‑1 memoization caches and debouncing, hot‑pushes minor versions to all apps, and embeds an accessibility linter. Result: faster bug discovery, one dev part‑time to roll out global features like navbar and notification tray, and fewer duplicated bespoke components.
AI-written summary · about
chapters (11)
- 0:00Intro
- 1:00Without design systems
- 2:01Shareable Functionality
- 4:32Web Components
- 5:22Component architecture
- 6:44State example
- 8:08Recommended method
- 8:35State management
- 9:03Design system state
- 13:38Updating in action
- 17:01Breaking changes
related talks
56mChasing the holy grail Reusable Web Components and Design Tokens
22mInclusive development through web components
58mChasing the holy grail: reusable web components and design tokens
40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps
36mAngular, React, Vue and co: Harmoniously united by web components and micro apps?
56mModernizing Large Frontends with Web Components
33mWeb Components with StencilJS
20mAvoiding vendor lock-in through Web Components