Интеграция UI Kit с REST API и бизнес-логикой

Переход на новый UI Kit может вызывать вопросы у разработчиков, особенно если до этого вы уже создавали приложения для Битрикс24 на PHP или использовали BX24.js в статичных HTML-страницах. В этом разделе мы объясним, как изменился подход к построению интерфейса, что осталось прежним, и как теперь работает связка между визуальной частью UI Kit и REST API Битрикс24.

Как было раньше

Если вы уже писали приложения для Битрикс24, то знакомы со схемой:

  • интерфейс создается на PHP, HTML и Bootstrap,
  • внутри iframe отображается сгенерированная разметка,
  • данные подгружаются с помощью BX24.callMethod() из BX24.js,
  • REST-запросы шли напрямую из браузера или через PHP "до" формирования страницы.

Такой подход работал и продолжает работать, но у него есть ограничения:

  • интерфейс нельзя повторно использовать,
  • сложно реализовывать состояния: загрузка, ошибки, взаимодействие,
  • CSS часто приходилось писать вручную под каждый экран,
  • все «на руках»: вы рисуете таблицу — вы ее же и обновляете.

Что поменялось

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

Простой пример:

<script setup>
        import { ref } from 'vue';
        
        const count = ref(0);
        </script>
        
        <template>
          <button @click="count++">
            Нажато {{ count }} раз
          </button>
        </template>

Значение count — это реактивная переменная. При каждом клике значение обновляется, и интерфейс автоматически перерисовывается. Вам не нужно вручную менять HTML — Vue делает это за вас.

С UI Kit вы получаете готовые Vue-компоненты, которые реализуют всю визуальную логику за вас:

  • кнопки, формы, таблицы, лейауты, модальные окна,
  • компоненты адаптивны и соответствуют стилю Битрикс24,
  • вы работаете не с HTML и стилями, а с декларативными компонентами,
  • REST API теперь вызывается внутри Vue-приложения через fetch() или axios.

Но REST API остался тот же. Методы, параметры, авторизация — все работает так же, как и в BX24.js или PHP.

Что осталось прежним

  • Все методы REST API работают точно так же.
  • Вы можете вызывать API с фронтенда или с вашего backend-сервера.
  • Авторизация: OAuth 2.0, webhook — все осталось.
  • Приложение по-прежнему работает внутри iframe.

Где теперь логика?

Вот как теперь делятся роли:

Ответственность Было PHP + BX24.js Стало Vue + UI Kit
Верстка PHP шаблон Vue-компоненты UI Kit
REST-запрос BX24.callMethod() axios, fetch, useAsyncData
Обработка результата JS вручную реактивные переменные Vue
Таблица и прочие элементы интерфейса HTML + Bootstrap Компоненты UI Kit Битрикс24

А если я не знаю Vue?

Это нормально. Вам не нужно знать весь Vue, чтобы начать работать:

  • компоненты UI Kit инкапсулируют поведение,
  • структура проектов на Vite или Nuxt простая,
  • достаточно понимать, как передавать данные и обрабатывать события.

Можно начать с копирования примеров и постепенно разобраться. Кроме того, можно использовать только дизайн-токены и иконки, если пока хочется остаться на HTML + Tailwind CSS. Но тогда вы не получите всех преимуществ UI Kit.

Предыдущая
Компоненты
Следующая
Быстрый старт