Как интегрировать нужную библиотеку или инструмент во Vue.js? Схема фронтенд-разработчика GitLab Ильи Климова

Фронтенд-разработчик в GitLab Илья Климов создал исчерпывающий гайд о том, как применить ту или иную технологию в проекте на Vue.js. Незнание ответа на этот вопрос часто ведет к проблемам, которых можно было легко избежать, если с самого начала проекта применять простую схему принятия решений.

Вот она:

Схема интеграции библиотеки X во Vue.js

Х на схеме обозначает любой модуль, который необходимо применить во Vue.js. Первым делом нужно задаться вопросом: предоставляет ли Х данные, которые нужно реактивно обновлять?

К примеру, нам нужно использовать в проекте WebSocket или Socket.io. Предоставляют ли сокеты данные, которые нужно реактивно обновлять? Нет, потому что это однонаправленный поток данных: сообщения приходят к пользователю, он получает оповещение и при этом никак не может данные изменить. 

Другой пример — Apollo. Главное умение этого инструмента — синхронизировать обновленные данные с данными, полученными ранее. Синхронизация, обновленные данные — все это уже похоже на реактивность. Для таких вещей следует найти NPM-пакет, реализующий Apollo на Vue.js — vue-apollo.

Если же мы ответили «нет» на первый вопрос, то идем дальше и задаем следующий: может ли Х быть визуальным компонентом? Положительный ответ также отсылает нас к поиску специально интегрированного пакета для Vue.js. Но в этом случае связь не такая сильная — не всегда это будет оправданно, так как не все возможности оригинального пакета будут полностью реализованы в интегрированном пакете. Делать выбор в пользу него следует, только если вы уверены, что пакет полностью решает ваши проблемы.

Если же не уверены или ответ на второй вопрос «нет», то работать с Х следует как с обычным JS-модулем. По словам Ильи, это возможно избавит в будущем от проблем во время переиспользования компонента в других проектах с другим деревом зависимостей.

Ссылка на оригинальное видео.

Илья Климов «прославился» недавно благодаря неожиданному ходу: он записывался на платные курсы по Vue.js, чтобы потом их раскритиковать и выявить неточности в материалах. Вместе с этим он выложил свой собственный бесплатный курс по Vue.js на платформу YouTube.