Понимание, чтобы определить лучшую библиотеку пользовательского интерфейса для вашего проекта Vue.js
За последние несколько лет Vue.js уверенно активизировался, став серьезным претендентом на конкуренцию с Angular и React. Если мы посмотрим на рост Vue, он связан с простотой фреймворка, доступностью библиотек, компонентов и учебных материалов для укрепления экосистемы. Кроме того, Vue также поставляется с хорошим набором библиотек компонентов пользовательского интерфейса на выбор.
Эта статья будет посвящена 3 отличным библиотекам компонентов пользовательского интерфейса, созданным для Vue, которые выделяются среди остальных.
1. Квазар
Первым в нашем списке стоит Quasar, библиотека / фреймворк пользовательского интерфейса с открытым исходным кодом, разработанная для Vue. Он позволяет быстро разрабатывать адаптивные одностраничные приложения, прогрессивные веб-приложения и приложения с рендерингом на стороне сервера. Кроме того, вы можете использовать Quasar в мобильных и настольных приложениях.
Quasar делает упор на единой кодовой базе для всех веб-решений, мобильных и настольных решений, обеспечивая при этом мощные компоненты интерфейса командной строки и пользовательского интерфейса.
Quasar также известен как фреймворк, который следует передовым методам кодирования. Фактически, Quasar по умолчанию поставляется с некоторыми встроенными передовыми практиками, и вам не нужно делать для этого никаких дополнительных настроек. Вот некоторые из этих передовых практик:
- Минимизация HTML / CSS / JS.
- Очистка кеша.
- Дерево трясется.
- Источник-отображение.
- Разделение кода с отложенной загрузкой.
- Линтинговый код.
Если мы посмотрим на статистику о Quasar, у него более 16000 звезд и 350+ участников. В последнее время эта статистика, похоже, быстро растет, и такие компании, как Jounce, Qrstore, Whiteboard-it, Biting Bit и Decision6, начали свой путь с Quasar.
Плюсы
- Веб-компоненты с высокой производительностью и быстродействием.
- Интегрированные лучшие практики.
- Большое сообщество и документация.
- Соответствует дизайну Material 2.0.
- Поддержка RTL.
- Высокая безопасность.
- Он может легко переносить существующие проекты.
Минусы
- Quasar известен фреймворком, разработанным одним человеком (по крайней мере, по большей части), что вызовет некоторые проблемы с обслуживанием в будущем.
2. Vuetify
Vuetify - это еще один фреймворк пользовательского интерфейса, основанный на Vue.js, и он предоставляет разработчикам многоразовый чистый набор компонентов для создания решений с богатым пользовательским интерфейсом. Подобно Quasar, Vuetify поддерживает почти все веб-браузеры и предлагает шаблоны для веб-разработки, прогрессивных веб-приложений, мобильной разработки (Cordova), а также для разработки настольных приложений (Electron).
Vuetify следует стандартам материального дизайна.
Однако для некоторых эти стандарты могут показаться немного строгими. Кроме того, практика материального дизайна дает некоторые преимущества, такие как возможность многократного использования и стандартизация стилей для пользователей. Кроме того, Vuetify предоставляет набор динамических макетов для настройки вашего приложения и переменные SASS для настройки компонентов.
Если мы рассмотрим статистику GitHub, Vuetify имеет более 27900 звезд в своем репозитории с более чем 550 участниками, что ставит Vuetify немного впереди Quasar. Taigbot, qfl-stack, FinTech Consortium, Bitting bit - это некоторые ведущие компании, которые используют Vuetify в качестве своей инфраструктуры пользовательского интерфейса.
Плюсы
- Компоненты многоразового использования.
- Обеспечивает красоту для разработчиков с ограниченными возможностями графики.
- Большой выбор комплектующих.
- Совместимость с браузером.
- Материальный дизайн.
- Большое сообщество и хорошая документация.
- Постоянные обновления.
Минусы
- Если вы не очень любите материальный дизайн, Vuetify может быть не лучшим выбором.
- Настройка немного сложнее.
3. Bootstrap Vue
Bootstrap можно назвать самой известной интерфейсной средой, используемой на веб-сайтах и веб-приложениях. BootstrapVue - это настроенная версия начальной загрузки, разработанная для Vue JS. BootstrapVue содержит более 85 компонентов, более 45 доступных плагинов, директив, тем и более 1100 значков. BootstrapVue также включает подробную реализацию из компонента начальной загрузки 4 и системы сеток.
Будучи частью семейства Bootstrap, BootstrapVue может использовать обычные элементы начальной загрузки в качестве компонентов Vue.
Если вы знакомы с Bootstrap, время обучения будет относительно коротким, и вы получите преимущество перед его использованием.
Ophigo, Channext Platform, Keymentics могут быть признаны крупными компаниями, использующими BootstrapVue, а репозиторий GitHub имеет более 12000 звезд с почти 300 участниками под его именем.
Плюсы
- Адаптивный макет, ориентированный на мобильные устройства.
- Быстрая и легкая укладка.
- Вы можете импортировать только определенные компоненты, группы, компоненты и директивы.
- Автоматическая разметка Доступность WAI-ARIA.
- Современные функции, полученные от Bootstrap.
- Создавайте темы с переменными SCSS и глобальными опциями.
- Большое сообщество и документация.
Минусы
- Настройка немного сложнее.
Практика создания многоразовых компонентов
Если вы начинаете с Quasar, Vutify или Bootstrap Vue, одним из важных способов является создание дизайн-системы с использованием этих элементов пользовательского интерфейса. Следуя этой практике, вы можете постепенно добавлять новые компоненты в систему дизайна, сотрудничать с дизайнерами, настраивать и делиться ими с другими разработчиками.
Кроме того, при определении дизайн-системы вы можете определить уровень абстракции ваших компонентов. Это могут быть либо визуальные компоненты, либо даже богатые бизнес-компоненты, в зависимости от ваших потребностей.
Однако вам будет сложно сделать это вручную. Здесь вы можете использовать Bit (Github) для управления всем жизненным циклом компонентов вашей дизайн-системы. Для начала вы можете обратиться к следующей статье.
Сравнение библиотек
Пройдя через функции этих трех библиотек, я заметил, что все эти библиотеки предоставляют общий или аналогичный набор услуг для общего использования. Если вы ищете UI-библиотеку для небольшого или личного проекта Vue.js, вам подойдет любой из них. Кроме того, есть некоторые дополнительные функции, которые необходимо учитывать, когда речь идет о крупномасштабных проектах.
Согласно приведенному выше сравнению, мы видим, что Vuetify - лучший вариант для крупномасштабных приложений или приложений корпоративного уровня, в то время как BootstrapVue занимает второе место.
Не ограничиваясь приведенным выше сравнением, давайте посмотрим некоторую статистику из тенденций GitHub и NPM.
На приведенном выше графике показана статистика тенденций NPM, где мы можем увидеть количество загрузок каждого пакета NPM за последние 6 месяцев. Мы ясно видим, что Vuetify и BootstrapVue были загружены по сравнению с Quasar.
Что касается статистики GitHub, есть небольшое отклонение от тенденций NPM. Там Vuetify занимает первое место как по количеству звезд, так и по количеству авторов. В GitHub у Quasar больше звезд и участников, чем у BootstrapVue, и недавняя шумиха вокруг Quasar может быть причиной этого.
В целом, я могу сделать вывод, что Vuetify будет лучшим вариантом для вас, если вы знакомы с пользовательским интерфейсом материала. Если нет, то лучше использовать BootstrapVue или Quasar.
Спасибо, что прочитали…!
