ПОСТЫ

Vue и Битрикс24

Однажды мне пришлось…

Писать приложение для Битрикс24. Такие приложения состоят из интерфейса и номинального бэк-энда. Это значит, что по сути это SPA приложение и скрипт на богомерзком php или нормальном языке который заметит веб-сервер.

Я вообще не близок к миру фронтенда, и если что-то и делал когда-то, то это был днострап и инфернальный jQuery которые вместе превращали 2 килобайтный лендинг в пыхтящее, кривое и разноцветное, но все еще говно мамонта весом в Гигабайт. Благо я не из верстальщиков и дизайнеров.

В общем в этот раз я решил научится какому-нибудь интересному 11/10 актуальному JS фреймворку, да еще желательно такому, чтобы когда-нибудь свершилась моя давнишняя мечта: написать хелло ворлд на Android. И выбор мой пал на Vue, потому что а тебя волнует? ну понравился он мне.

Короче понравился он мне и теперь у меня появилось ви́дение А?а?а? понял(а/ли/ло/пошло на).

Ближе к делу.

Битрикс24

У Битрикса есть JS-библиотека(что очень громко сказано), которую отдает сам Битрикс по-простому:

1

<script src="//api.bitrix24.com/api/v1/" />

Однако нас это не интересует, потому что Vue клал на такие кэйси(если это не встраивание конечно). Посему у нас есть три варианта импортнуть это дело.

Способ первый(фуу)

Я люблю и ненавижу eslint поэтому этот способ я конечно же люблю, ведь вдальнейшем от каждого использования BX24(это переменная инициализируемая js-библиотекой) eslint будет пытаться совершить суицид и попутно выжечь все красные пиксели на мониторе.

Делается все просто:

  1. Добавляем тег <script src="//api.bitrix24.com/api/v1/" /> в <head>
  2. Пользуемся…

Однако eslint не понимает, редактор методов не видит и так далее.

Плюсы:

  • Дешево
  • Сердито
  • Временно

Минусы:

  • Ненадежно
  • Невсегда работает

Способ второй(костыльный/почти третий)

Ставим полезную либу vue-plugin-load-script И каждый раз когда хотим обратится в API, делаем так

1
2
3
4
5
6
7

// в main.js
Vue.use(LoadScript);
// в компоненте
this.$loadScript("//api.bitrix24.com/api/v1/")
.then(() => {
    BX24.callMethod(...)
})

Плюсы:

  • Достаточно не костыль, чтобы было почти хорошо(нет их, но первый способ принципиально буду ненавидеть)

Минусы:

  • Скрипт загружается каждый раз(конечно ca$h кэш, но все же)
  • Выглядит ужасно из-за дополнительных отступов и скобок
  • Нормальный минус

Способ третий(неплохой)

На самом деле все еще проще:

  1. Делаем утилиту(ее можно найти здесь)
  2. Создаем Promise
  3. Резолвим в нем загрузку скрипта и реджектим че хотим
  4. Экспортируем init() и возвращаем из него Promise когда попросят

Внутри компонента, где надо, делаем:

1
2
3

//                                     🔽ето утилита🔽
let {default: BX24Init} = await import('./utils/bx24');
const BX24 = await BX24Init();

Плюсы:

  • Выглядит неплохо(да тут только так оценивают)
  • Работает именно так как запланировано сатаной разрабами битрикса

Минусы:

  • Придется делать каждый метод использующий API асинхронным(хотя можно импортировать один раз в и без того асинхронном mounted и сохранить где-нибудь в data())

Способ четвертый(почти хороший)

Я его еще не сделал. Да, вот так. Но вроде как можно сделать примерно тоже самое(99%, нужно что-то с асинхронностью решить), что и в третьем способе, но вызвать где-нибудь:

  • в main.js и сделать глобальный Vue.use()
  • сделать псевдо-компонент как event-bus, сделать use от него и использовать его как саму переменную с помощью мета-магии обработки method not defined или как оно там исключения

Заключение

Всем приятной разработки на Vue. Если беретесь за битрикс, то старайтесь сделать его или хотя бы его части лучше. Как говорится

« Никогда не спорьте с идиотами. Вы опуститесь до их уровня, где они вас задавят своим опытом © Омар Кон Стэтхэм, 1488 год до нашей эры »

* * *

Ах да, приложение, вот что получилось(запись ниже). В общем оно выводит контакты, компании и сделки на карту и строит между ними маршрут с помощью Google Карт. Также есть бинд в календарь и планируются бинды в сделки и лиды, так что если тебе нужно что-то такое, то пиши по контактам.