Chasing the holy grail Reusable Web Components and Design Tokens
summary
Building a federal design system with reusable web components and design tokens aims to run the same components in Angular React and AEM, using Stencil.js to compile components, CSS variables to cross Shadow DOM, and an Adobe DSP pipeline to output platform artifacts. The team pilots micro front ends after six months, uses Storybook for docs, npm workspaces and plop for packaging, and accepts extra work around forms and SSR; accessibility and multi-design-system versioning drive most tradeoffs.
AI-written summary · about
chapters (13)
- 0:00Start
- 1:22Why Web Components
- 2:10Micro Front Ends
- 2:41Reusable Styles
- 8:23Team Structure
- 12:26Web Components
- 15:00Shadow Dom
- 25:28Server Side Rendering
- 26:20Stencil Js
- 30:59Design Tokens and How Do We Get Them in Code
- 38:53Visual Studio Code Snippets
- 41:08Accessibility Plugin
- 55:00Shoelace
related talks
58mChasing the holy grail: reusable web components and design tokens
22m'Centralizing the Frontend with Design Systems and Web Components'
29mDesign at scale with Web Components (and ducks)
22mInclusive development through web components
39mDesigning with Components
35mDesign system - From a Developer Point-of-View
25mBuilding a Design System as a team
01h 04mBuilding Design Systems for Scale: From Tokens and Components to Motion & AI Tools