I'm genuinely curious what others are using to solve the real world problem of consuming a design system's components in existing applications that are in various tech stacks? Suppose you're building components to be used in Angular, React, Vue, [whatever hot new framework].
Are you using Stencil to build Web Components? Is Svelte viable?
A few months ago, I worked on a design system project where we faced this question and decided to focus on CSS only, at least to start. We followed Bulma's example and instructed developers to add classes like is-active or is-loading using a framework of their choice. More complicated functionality will probably require web components or something similar - think data tables, date pickers, etc. - but vanilla CSS isn't a bad place to start.
Here are some examples of what other design systems are doing:
Salesforce's Lightning Design System uses web components alongside its own component system.
Edit: This design system uses vanilla JS. The web component implementation of Material Design components is still a work in progress.
IBM's Carbon Design System offers implementations in React, Vue, Angular, and vanilla JS. The vanilla JS version looks a bit like Bootstrap's JS implementation; it doesn't appear to use web components.
I think a major point is that web components are low level API that are unconcerned about where they live. At least with LitElement based web components that we've built. I can't speak for every method used to create them because I believe lit-element and lit-html were built with the goal of eventually making those libraries unnecessary as more gaps get filled in browser specs.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm genuinely curious what others are using to solve the real world problem of consuming a design system's components in existing applications that are in various tech stacks? Suppose you're building components to be used in Angular, React, Vue, [whatever hot new framework].
Are you using Stencil to build Web Components? Is Svelte viable?
I'm super curious about this as well.
A few months ago, I worked on a design system project where we faced this question and decided to focus on CSS only, at least to start. We followed Bulma's example and instructed developers to add classes like
is-activeoris-loadingusing a framework of their choice. More complicated functionality will probably require web components or something similar - think data tables, date pickers, etc. - but vanilla CSS isn't a bad place to start.Here are some examples of what other design systems are doing:
web componentsCSS and vanilla JavaScript. It just left beta in March. There are Material Design implementations for Java, Swift, Web, Angular, etc.Carbon looks to be experimenting
I think a major point is that web components are low level API that are unconcerned about where they live. At least with LitElement based web components that we've built. I can't speak for every method used to create them because I believe lit-element and lit-html were built with the goal of eventually making those libraries unnecessary as more gaps get filled in browser specs.