Design Systems & Components Liraries
- Available Components Libraries
- Accessibility with Web Components
- Abstracting the Design System
- Performance Measurements
Available Components Libraries
Here are some design system
- Material Design: see https://vuetifyjs.com/en/
- France Design System: https://www.systeme-de-design.gouv.fr/ and https://github.com/GouvernementFR/dsfr and https://github.com/dnum-mi/vue-dsfr (Note: dsfr cannot be used outside of public web sites)
- Radix (radix vue)
- Spectrum (Adobe)
- Fast (Microsoft)
CSS UI / Vue Frameworks
- vuetify
- bootstrap 4 (bootstrap vue)
- bootstrap 5 (bootstrap vue next)
- tailwindcss (radix vue)
- foundation (does not seem to have vue integration)
- https://bulma.io/
Comparison Matrix
| Framework | Acceptability | Design & Accessibility | Github link | Maintainer | License | Project Activity | Vue or web components? | Less/Sass? |
|---|---|---|---|---|---|---|---|---|
| Vuetify |  Potential candidate? | https://github.com/vuetifyjs/vuetify | Community | MIT | https://awesomeopensource.com/project/vuetifyjs/vuetify Stars: 38.2k | Vue | saas | |
| Bootstrap 5 |  Does not provide Vue 3 components or Web Components | https://github.com/twbs/bootstrap | Community | MIT | sass | |||
| Prime Vue |
But, larger library of "free" components (e.g., has a tree component) | Excellent # of components Good Theming support and built in themes (including BS5) Will make use of CSS variables in the near future Figma Kit available
| https://primevue.org/ | Community | MIT | Stars: 4.7k Last release: Oct 18, 2023 | Vue | sass |
| Nextcloud Vue |  Maintained, but only to be used as an alternative is we need to integrate Cristal as part of a Nextcloud extension. | https://github.com/nextcloud-libraries/nextcloud-vue | Community | AGPL 3.0 | Stars: 198 Last release: Sept 26, 2023 | Vue | sass | |
| Shoelace | Probably not a good choice if mainly maintained by a single actor | https://github.com/shoelace-style/shoelace/ | Mainly a single developer | MIT | Stars: 9.3k Last release: Oct 16, 2023 | Web Components | ? | |
| Buefy | Probably not a good choice if mainly maintained by a core team of one | https://github.com/buefy/buefy | Core team of one | MIT | Stars: 9.5k Last release: Sep 26, 2023 | Vue | sass | |
| Polymer |
| https://github.com/polymer/polymer | At least initially started by Google? | BSD 3 | Start: 22k | Web Components | ||
| France Design System (dsfr) | This is a special case, this cannot be the default but we want to support it to ease the integration of wikis on french government sites. | Figma Kit available | https://github.com/GouvernementFR/dsfr | French Government | MIT | saas | ||
| Radix |
| Community | MIT | Stars: 1215 | Can't find the info for radix-vue | |||
| Spectrum | Not backed by community | Adobe | Apache-2.0 | https://awesomeopensource.com/project/adobe/spectrum-web-components Stars: 1008 | none | |||
| Fast | Not backed by community | https://github.com/microsoft/fast | Microsoft | MIT | Stars: 8.6k Last release: October 12, 2023 | |||
| Tailwind | not so great experience with it during prototyping (to be confirmed by @Ludovic Dubost) | https://github.com/tailwindlabs/tailwindcss | Community | MIT | sass | |||
| Foundation | Not backed by community | https://github.com/zurb/foundation-sites | ZURB | MIT | Stars: 29.5K | sass | ||
| Material-UI | the implementation is react based | https://github.com/mui/material-ui | Community | MIT | ||||
| Auro | Not backed by community | Alaskair | ||||||
| Bolt | Too small community | https://github.com/boltdesignsystem/bolt | Stars: 286 Last release: Jun 1, 2023 | sass | ||||
| Calcite Design System | Too small community | https://github.com/Esri/calcite-design-system | Stars: 240 Last release: 12 Oct, 2023 | |||||
| Carbon Design System | archived | https://github.com/carbon-design-system/carbon-web-components | ||||||
| Clever | Not backed by community | https://github.com/CleverCloud/clever-components#collection-of-web-components-by-clever-cloud | Clever cloud | |||||
| Crayons | Not backed by community | https://crayons.freshworks.com/ | Freshwork | |||||
| Dile | Too small community | https://github.com/Polydile/dile-components | ||||||
| Duet | not open source | https://www.duetds.com/ | ||||||
| Elix | Too small community | https://github.com/elix/elix | ||||||
| Graphite Design System | Not backed by community / too small | https://github.com/paqtcom/graphite-design-system | PAQT.com | |||||
| Helix | Too small community | https://github.com/HelixDesignSystem/helix-ui/ | ||||||
| Ignite UI | Not backed by community | https://github.com/IgniteUI/igniteui-webcomponents | infragistics | |||||
| Io GUI | experimental | |||||||
| Ionic Web Components | build to support https://ionicframework.com/ a framework for mobile UI | |||||||
| Kor | Too small community | https://github.com/kor-ui/kor | ||||||
| Lightning | Not backed by community / too small | https://github.com/salesforce/lwc | Salesforce | |||||
| Lion | Not backed by community | https://github.com/ing-bank/lion | ING | |||||
| Nordhealth Components | Not backed by community | https://nordhealth.design/components/ | Nordhealth | |||||
| Vaadin | Probably tightly coupled to the Java code base? | https://github.com/vaadin/web-components | ||||||
| Materialize | Too small community | https://github.com/materializecss/materialize | Community | MIT | Sass | |||
| Baklava | Small selection of components compared to other DS |
Figma Kit available | https://baklava.design/?path=/docs/documentation-welcome--documentation https://github.com/Trendyol/baklava | Trendyol | MIT | Stars: 1.1k Last Release: 23 Oct, 2023 | Web Components |
Accessibility with Web Components
https://stackoverflow.com/questions/75546623/web-components-a11y
Accessibility is NOT baked in on web components, so it falls on the creator of the components to take accessibility into account. Of the two web components DS being evaluated, only Shoelace has a dedicated page on a11y (see table above). Baklava only has some issues on Github, so it's a start, but maybe we should wait for it to have more a11y maturity to progress on this DS.
There is an experimental API for accessibility being drafted by Google, Apple and Mozilla, but currently it is not well-supported. Maybe something to keep an eye on for the future. https://wicg.github.io/aom/explainer.html
Abstracting the Design System
From our experience on XWiki, we know that going away from a design system is challenging and time consuming.
In the goal of making that easier, we propose to define a set of base visual components that we would abstract away.
Meaning that, it would be possible to modularily provide several design system implementations, and to switch between them by configuration.
The table below tries to map a few design systems to the corresponding abstract components.
Risk: This is effectively re-building a design system as we will need to identify the (least) common denominator of the implementations we'd like to support.
Note 1: We also have to take into account accessibility, so we need to take care to provide (as much as possible) options that are accessible by default.
Note 2: Following this approach will greatly limit the amount of fine-tuning that will be possible. A simple comparison of the options proposed by bootstrap and vuetify for the customization of buttons already shows a large variety of differences (size configuration, shape of the corner, icon positioning...)
| Abstract Component | API | dsfr (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton ) | Bootstrap 5 (https://getbootstrap.com/docs/5.3/components/buttons/) | vuetify (https://vuetifyjs.com/en/components/buttons/) |
|---|---|---|---|---|
| Button (primary) | <CristalButton level='primary'/> Label </CristalButton>
| <button class="fr-btn"> Label </button> | <button type="button" class="btn btn-primary"> Label </button> | <button class='v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated'> Label </button> |
| Button (seconday) | <CristalButton level='secondary'/> Label </CristalButton>
| <button class="fr-btn fr-btn--secondary fr-btn--tertiary"> Label </button> | <button type="button" class="btn btn-secondary"> Secondary </button> | <button class='v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-tonal'> Label </button> |
| Button (tersary) | <CristalButton level='tersary'/> Label </CristalButton> | <button class="fr-btn"> Label </button> | <button type="button" class="btn btn-light"> Label </button> | <button class='v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined'> Label </button> |
Mapping DS components
For a more exhaustive mapping, see Mapping of Cristal Components.
Performance Measurements
TLDR
- Test is only done on the alert component (1000 loads).
- The slowest is less than 0.4ms per component. The fastest 0.04ms per component.
- Done with the production build
- Fastests: Shoelace (index 100), DSFR (300), Vuetify (600)
- Wrapping an empty component is 0.007ms per component. Wrapping realcomponents seem to cost 20 to 50ms for 1000 components (0.02 to 0.05 per component).
- Wrapping shoelace is more expensive (probably because for the others it's vue to vue, with shoelace it adds the vue overhead).
- Web Components is possibly faster than VueJS components (but need to consider that it depends what the component does).
- Firefox seems slower than Chrome (up to 2x)
Chrome using Production build (lerna run start) with alert only
- Vuetify empty: 7ms
- Vuetify direct: 287ms to 350ms
- Vuetify encapsulated: 333ms to 400ms
- DSFR empty: 6ms
- DSFR direct: 150ms to 180ms
- DSFR encapsulated: 160ms to 200ms
- Shoelace empty: 5ms
- Shoelace direct: 30ms to 50ms
- Shoelace encapsulated: 60 to 70ms
Chrome using Production build (lerna run start) with alert + button
- Vuetify encapsulated: 500ms to 700ms
- DSFR encapsulated: 240ms to 350ms
- Shoelace encapsulated: 90 to 150ms
