Разработка внешнего интерфейса пользователя - это быстро развивающаяся область отрасли, и инфраструктуры, инструменты и методы быстро меняются. При запуске нового проекта необходимо учитывать множество строительных блоков, и разработчики должны учитывать множество вещей, в том числе производительность, масштабируемость, интеграцию и внешний вид сайта. Мы выбрали Vue.js для недавнего работающего проекта, потому что он легкий и способен обрабатывать сложные одностраничные приложения. Он также универсален, прост в использовании и поставляется с обширной документацией.

Изначально мы использовали Materialize для стилизации приложения. Приложение включает в себя множество визуализаций данных D3, поэтому крайне важно, чтобы интерфейс был чистым, последовательным и интуитивно понятным в использовании. Однако я быстро обнаружил, что Materialise сложно интегрировать с Vue. Такие компоненты, как раскрывающиеся списки, выборки и модальные окна, нуждаются в jQuery для запуска при динамической загрузке (Materialize отменяет многие настройки браузера по умолчанию и полагается на jQuery). В документации по Materialize предлагается использовать функцию jQuery $ (document) .ready () для инициализации этих элементов. Все это jQuery раздувает приложение и затрудняет отрисовку даже простых компонентов. Кроме того, поскольку Vue использует виртуальную модель DOM и создает компоненты на лету, $ (document) .ready () не работает при внедрении или обновлении элементов, и требуются дополнительные методы.

Фронтенд-технологии быстро меняются, и не все согласны друг с другом. Materialize не идеален для фреймворков, которые динамически создают элементы, как это делают многие из наиболее популярных современных технологий пользовательского интерфейса. Фреймворк CSS / компонентов должен быть вторичной основой приложения и работать как можно более гладко с первичным фреймворком. В противном случае это вызовет проблемы во время сборки и может вызвать потенциальные проблемы по мере роста и масштабирования приложения.

По мере роста популярности Vue появляется все больше наборов инструментов пользовательского интерфейса, которые создаются либо явно для использования с Vue, либо полностью совместимы с Vue - Vuetify, Vue Material, Quasar и BootstrapVue, являющиеся немного. Я переключился на Vuetify, структуру семантических компонентов, основанную на материальном дизайне, и увидел гораздо лучшие результаты.

Vuetify легкий, быстрый и поставляется с вспомогательными компонентами и восемью шаблонами Vue-CLI. Он был построен для работы с серверным рендерингом Vue, который является одним из немногих фреймворков для этого. Его компоненты многоразовые и просты в реализации. Как и другие наборы инструментов CSS, Vuetify использует 12-точечную сетку, упрощающую создание адаптивных приложений. Vuetify также предоставляет настраиваемые темы стиля, которые придают приложению современный вид. Что наиболее важно, он легко интегрируется с Vue, позволяя бизнес-логике приложения и его пользовательскому интерфейсу разрабатываться рука об руку.

Кроме того, у Vuetify есть отличная документация, которая учитывает несколько сценариев для каждого компонента, поэтому разработчики могут легко найти нужную настройку. Недостатком является то, что Vuetify еще не получил широкого распространения, поэтому поиск поддержки по проблемам может быть более сложной задачей, чем с фреймворком с большой пользовательской базой, таким как Bootstrap или Materialize. Однако у Vuetify есть активное чат-сообщество через Discord с множеством разработчиков (а также создателем фреймворка), готовых помочь в устранении неполадок. Он также находится в стадии активной разработки.

Мне нравится создавать красивые, интуитивно понятные пользовательские интерфейсы с использованием новейших веб-технологий, при этом делая упор на удобство пользователя при разработке приложений. Это включает в себя поиск лучших инструментов, которые соответствуют потребностям проекта и легко интегрируются с существующей инфраструктурой клиентов. В этом проекте использование специфической для Vue структуры, такой как Vuetify, максимально увеличило совместимость в приложении и сделало компоненты сборки, форматирование макета и стилизацию интерфейса простым и понятным.

Примечание: это было впервые опубликовано в блоге моей компании и размещено здесь с разрешения. Посетите нас на http://www.eikospartners.com/!