Сравнение
Пять библиотек, с которыми эту действительно сравнивают.
Каждая страница отвечает на один вопрос в одном порядке: что это за продукт, в чём он силён, когда взять его вместо этого — и как проверить остальное самостоятельно.
PrimeVue
- Класс продукта
- Библиотека компонентовисточник
- Визуальный язык
- Собственные темы и пресетыисточник
- Лицензия
- MITисточник
- Официальный сайт
- primevue.org
В чём сильна
Очень большой каталог, готовые темы и коммерческие шаблоны вокруг него.
Когда взять её, а не эту
Нужен компонент, которого здесь пока нет, или готовый коммерческий шаблон как отправная точка. Каталог — причина, по которой его выбирают, и причина хорошая.
Vuetify
- Класс продукта
- Библиотека компонентовисточник
- Визуальный язык
- Material Designисточник
- Лицензия
- MITисточник
- Официальный сайт
- vuetifyjs.com
В чём сильна
Зрелая экосистема, широкая известность и полная реализация узнаваемого визуального языка.
Когда взять её, а не эту
Продукт должен выглядеть как Material Design. Воспроизводить этот язык на чужих токенах дороже, чем взять библиотеку, которая им и является.
Element Plus
- Класс продукта
- Библиотека компонентовисточник
- Визуальный язык
- Собственный визуальный языкисточник
- Лицензия
- MITисточник
- Официальный сайт
- element-plus.org
В чём сильна
Зрелость, большая база пользователей и документация на нескольких языках.
Когда взять её, а не эту
Команда уже знает его или продукт живёт на рынке, где он выбран по умолчанию. Привычка — инженерный аргумент, а не поблажка.
Naive UI
- Класс продукта
- Библиотека компонентовисточник
- Визуальный язык
- Собственный визуальный язык, темы объектами JSисточник
- Лицензия
- MITисточник
- Официальный сайт
- www.naiveui.com
В чём сильна
TypeScript насквозь, темы как данные и репутация лёгкой библиотеки.
Когда взять её, а не эту
Хочется настраивать темы в JavaScript, а не в CSS-переменных. Это другая модель, а не худшая, и части команд она подходит лучше.
Quasar
- Класс продукта
- Фреймворк приложения со сборкой под платформыисточник
- Визуальный язык
- Material Designисточник
- Лицензия
- MITисточник
- Официальный сайт
- quasar.dev
В чём сильна
Один инструмент от веб-приложения до сборки под десктоп и мобильные, компоненты в комплекте.
Когда взять её, а не эту
Один и тот же код едет в веб, на десктоп и в мобильные. Это целый класс работы, которого дизайн-система не делает вовсе.
Как здесь сравнивают
На этих страницах нет ни одной цифры о чужой библиотеке, и это намеренно. Портал порождает свои числа на каждой сборке и не печатает ни одного, которое не может воспроизвести, — чужой вес бандла ровно такое число. Там, где нужна цифра, вы получаете команду, которая измерит её на вашем наборе компонентов: только для него ответ и осмыслен.
| Granularity | Проверить самому |
|---|---|
| Гранулярность импорта136 путей экспорта: компонент, composable или одна директива — у каждого свой граф. | Соберите приложение дважды — с одним компонентом и с двумя — и сравните бандлы. Разница и есть настоящая цена второго компонента.npx vite build && du -h dist/assets/*.js |
| Runtime-зависимости0 у ядра. Единственный обязательный peer — @floating-ui/dom, и он остаётся в вашем lock-файле, а не внутри пакета. | Прочитайте манифест пакета, который рассматриваете: поле dependencies, а не devDependencies.npm view <package> dependencies |
| Система токенов197 токенов именованными ролями в обеих темах, опубликованы типизированными данными и CSS-переменными. | Два вопроса: есть ли перечень ролей вообще и можно ли поменять роль, не открывая исходники компонентов. |
| Серверный рендерКаждый компонент рендерится на сервере и гидрируется без расхождений; контракт записан и проверяется стендом. | Ищите страницу, где сказано, что происходит на сервере, а не слово «SSR» в списке возможностей. |
| ДоступностьКлавиатурный контракт по компонентам, паттерны WAI-ARIA APG, контраст проверяется гейтом в обеих темах. | Откройте нужный компонент и попробуйте пройти его одной клавиатурой. Обещания в документации дёшевы, Tab и Esc — нет. |
| TypeScriptТипы по подпутям, порождённые web-types для IDE JetBrains, props и события типизированы из исходников. | Импортируйте один компонент в строгий проект и посмотрите, знает ли редактор его props без дополнительных плагинов. |
| ЛицензияApache-2.0 с оговоркой об этичном использовании — source-available, не OSI-лицензия. Названа на каждой странице, где это важно. | Читайте файл LICENSE, а не бейдж в README. |
| Модель поддержкиОдин мейнтейнер, компании за спиной нет, платной поддержки нет. Версия 0.41.0 — до 1.0 ломающие правки живут в журнале изменений. | Посмотрите в трекер: сколько идёт ответ и кто отвечает. |