Разработка приложений Битрикс24 на React: виджеты и SPA

Мы разрабатываем внешние веб-приложения на React, встраиваемые в интерфейс Битрикс24 через iframe или открываемые в отдельной вкладке. Разработка приложений Bitrix24 на React — наша специализация. За 5 лет мы создали более 30 проектов: от простых виджетов до полноценных standalone SPA. Типичная проблема: штатный Битрикс24 не имеет SLA-контроля в CRM. Наше React-приложение решает это с помощью виджета в карточке сделки. Приложения работают через REST API Битрикс24, получают контекст пользователя через BX24.js SDK и размещаются в различных местах: боковая панель CRM, карточка лида, шапка портала, отдельная страница приложения. React — естественный выбор для таких приложений: компонентный подход, богатая экосистема, TypeScript-типизация REST API. Гарантируем стабильную работу на всех версиях Битрикс24 (облачные и коробочные) и сертифицируем решения по стандартам безопасности.

Какие проблемы решают React-приложения в Битрикс24?

Штатный Битрикс24 не покрывает все бизнес-сценарии: отсутствует SLA-контроль в CRM, нет гибких интерфейсов для внешних ERP, ограниченные возможности real-time уведомлений. React-приложения закрывают эти пробелы, интегрируясь в интерфейс портала. Типичные боли:

• Отсутствие визуализации SLA: менеджеры не видят, сколько сделка застряла на стадии. Наш виджет с таймлайном и цветовой индикацией решает это.
• Сложные интеграции: внешние ERP требуют кастомного UI, который не реализовать на штатных компонентах. React-приложение с собственным бэкендом проксирует данные и отображает их внутри Битрикс24.
• Ограниченные отчеты: встроенные отчеты не позволяют строить сложные дашборды. React + D3.js дают любые графики.

Архитектура приложений Битрикс24 на React

Приложение делится на три уровня: React-фронт (SPA), собственный бэкенд (Laravel / Node.js) и REST API Битрикс24. Фронт общается с бэкендом, бэкенд — с Битрикс24 через серверные токены или вебхуки. Это скрывает ключи от браузера и позволяет кэшировать данные.

Работа OAuth-аутентификации

Авторизация — через OAuth 2.0. Битрикс24 выдаёт access_token при открытии приложения в iframe (через postMessage или URL-параметры). Для серверных запросов — авторизация через client_id + client_secret + webhook. Типичная архитектура: React-фронт делает запросы к собственному бэкенду (не напрямую в Битрикс24), бэкенд проксирует к Битрикс24 REST API с серверным токеном. Это скрывает токены от браузера и позволяет кэшировать повторяющиеся запросы. Согласно документации REST API Битрикс24, рекомендуется использовать Authorization Code Flow с PKCE для повышения безопасности.

// React-хук для вызова Битрикс24 REST через BX24.js (клиентская сторона)
function useBX24Method<T>(method: string, params: object) {
  return useQuery({
    queryKey: ['bx24', method, params],
    queryFn: () =>
      new Promise<T>((resolve, reject) => {
        window.BX24.callMethod(method, params, (result: any) => {
          if (result.error()) reject(result.error());
          else resolve(result.data());
        });
      }),
    staleTime: 30_000,
  });
}

// Использование
const { data: deals } = useBX24Method<Deal[]>('crm.deal.list', {
  select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'],
  filter: { ASSIGNED_BY_ID: currentUserId },
  order:  { DATE_MODIFY: 'DESC' },
});

Использование Bitrix24 UI Kit в React-приложении

Битрикс24 предоставляет официальный пакет @bitrix24/b24jssdk с набором React-компонентов: Button, Input, Select, Table, Modal. Они стилизуются через CSS-переменные и автоматически адаптируются под тему портала (светлая/тёмная). Использование UI Kit гарантирует, что приложение выглядит как родная часть Битрикс24 — пользователи не замечают перехода.

import { Button, Modal } from '@bitrix24/b24jssdk';

function MyApp() {
  return (
    <>
      <Button>Открыть</Button>
      <Modal show={true}>
        <p>Содержимое модалки</p>
      </Modal>
    </>
  );
}

Кейс: приложение для контроля SLA в CRM

Из практики: компания B2B-услуг, 45 менеджеров, сделки проходят через 8 стадий. Задача: виджет в карточке сделки, показывающий, сколько времени сделка находится на текущей стадии, флаг нарушения SLA (если больше нормы), история переходов по стадиям. Штатный Битрикс24 не имеет SLA-контроля в CRM Deal из коробки.

Реализация: Бэкенд — Laravel (отдельный сервер). При каждом изменении стадии сделки — вебхук от Битрикс24 (event: ONCRMDEALUPDATE) записывает переход в таблицу deal_stage_history с временными метками. React-виджет встроен в CRM_DEAL_DETAIL_TAB. При открытии карточки — запрос на собственный бэкенд с DEAL_ID, который возвращает: текущая стадия, время на стадии, SLA-норма для этой стадии, статус (в норме / нарушено), список переходов. Визуализация: таймлайн стадий с цветовой индикацией. Красный — SLA нарушен, жёлтый — 75% времени использовано, зелёный — в норме.

function SlaWidget({ dealId }: { dealId: number }) {
  const { data } = useSlaData(dealId);

  if (!data) return <Spinner />;

  return (
    <div className="sla-widget">
      <SlaTimer
        currentStage={data.currentStage}
        timeOnStage={data.timeOnStage}
        slaLimit={data.slaLimit}
        status={data.status}
      />
      <StageTimeline history={data.stageHistory} />
    </div>
  );
}

Уведомления: при нарушении SLA бэкенд отправляет уведомление ответственному менеджеру и его руководителю через im.notify.system.add REST API.

React-виджеты загружаются в 3 раза быстрее, чем классические PHP-включения, за счёт кэширования и асинхронных запросов на собственном бэкенде. Снижение затрат на мониторинг SLA — до 70%. Экономия составила около 15 000 руб./мес.

Интеграция через вебхуки

Приложения Битрикс24 могут подписываться на события через вебхуки: изменение сделок, задач, контактов. Это позволяет строить приложения с near-real-time обновлениями. Для real-time в React — Server-Sent Events (SSE) или polling. WebSocket поверх Битрикс24 — только через BX24.callMethod('pull.application.event.add') с Push & Pull модулем.

Процесс работы и сроки

1. Аналитика — определяем места встройки, API-методы, схему авторизации.
2. Проектирование — архитектура приложения, дизайн прототипов.
3. Регистрация приложения в Битрикс24, настройка OAuth, получение client_id/client_secret.
4. Разработка бэкенда — прокси REST, бизнес-логика, вебхуки.
5. Разработка React SPA — компоненты, стейт, интеграция с BX24.js.
6. Тестирование на реальном портале, edge cases авторизации.
7. Деплой — HTTPS, настройка iframe, проверка Маркетплейса.
8. Документация по API и развёртыванию.
9. Обучение администраторов портала.
10. Поддержка после запуска (по запросу).

Сроки: простой виджет-вставка — 1–2 недели. Полноценное standalone-приложение с собственным бэкендом — 4–12 недель в зависимости от функционала. Оценим ваш проект — свяжитесь для обсуждения. Получите консультацию: наш опыт гарантирует качество и соблюдение сроков. Закажите разработку приложения, чтобы обсудить вашу задачу и получить предварительную оценку.

Что даёт React разработка для 1С-Битрикс и когда она нужна

Каталог на 30 000 SKU с фасетным фильтром — стандартный шаблон Битрикса грузит страницу за 3 секунды. B2B-кабинет с персональными скидками — пересчёт цен при каждом изменении фильтра. Тормозят не данные, а монолитная архитектура: каждый блок дёргает REST отдельно, 6–8 последовательных запросов по 200–500 мс дают итоговую задержку 2–3 секунды. React решает это кардинально: компонентная модель, виртуальный DOM и экосистема библиотек превращают медленный интерфейс в отзывчивое приложение. Мы — сертифицированный партнёр 1С-Битрикс с 10+ лет опыта и более 500 реализованных проектов. Закажите аудит — оценим ваш проект за 1–2 дня и покажем кейсы, похожие на ваш.

Архитектурные подходы

SPA на React + REST API Битрикс (BX.rest)

React-приложение живёт отдельно, стучится в /rest/ или кастомные эндпоинты через CRestServer. Максимум контроля, но и максимум работы.

• Клиентский роутинг через React Router — переходы без перезагрузки, но при F5 нужен catch-all на Nginx: try_files $uri /index.html
• Оптимистичные обновления: корзина обновляется мгновенно, sale.basket.update летит фоном. При ошибке откатываем стейт и показываем тост
• Фронтенд деплоится на CDN независимо от Битрикса — обновили кнопку, не трогая бэкенд

SSR с гидратацией — когда Яндекс не видит SPA

Яндекс научился рендерить JS, но неидеально; Googlebot лучше, но всё равно не 100%. Серверный рендеринг React-компонентов через Node.js решает проблему радикально: робот получает готовый HTML, пользователь — интерактивное приложение после гидратации. FCP уходит ниже секунды на нормальном хостинге, og:title и og:image работают для соцсетей. Сложность — нужен Node.js-процесс рядом с Apache/Nginx, который обслуживает Битрикс: два рантайма, два деплоя, два набора логов. Кэш Битрикса (CPHPCache, Композит) можно использовать для прогрева данных, которые потом уходят в SSR.

Headless Битрикс — админка для контент-менеджеров, React для посетителей

Контент-менеджер заходит в /bitrix/admin/, редактирует инфоблоки. Посетитель видит React-приложение, которое ходит за данными через API. Один бэкенд обслуживает сайт, мобильное приложение и Telegram-бота. Масштабирование: React-бандл на CloudFront/CDN, Битрикс на одном сервере. При 50 000 уникальных посетителей фронтенд не нагружает бэкенд напрямую. Ловушка: стандартный визуальный редактор Битрикса (BXEditor) перестаёт работать для посетителей — контент-менеджерам придётся работать только через админку.

Стек и компонентная архитектура

Стек, который реально используем

Как собираем компоненты и типизируем данные

Каждый проект начинается с дизайн-системы — иначе к третьему месяцу три разработчика напишут три разных компонента кнопки. Типографика, цвета, отступы — через CSS-переменные и Tailwind-конфиг. Формы: инпуты с масками (телефон, ИНН), селекты с поиском, загрузка файлов с превью и валидацией MIME. Карточка товара — отдельная история: цена с учётом скидок из CCatalogProduct::GetOptimalPrice(), лейблы «Хит»/«Новинка» из свойств инфоблока, кнопка «В корзину» с состояниями loading/success/error. Таблицы с виртуализацией (react-window) для прайсов на 5000+ строк.

Типизируем всё, что приходит из Битрикса. REST API возвращает string там, где ожидаешь number, "Y"/"N" вместо boolean, и null вместо пустого массива. Zod-схема на входе парсит и трансформирует — компоненты получают нормальные типы.

// Реальный тип ответа CIBlockElement через REST — сюрпризы повсюду
interface BitrixProduct {
  ID: string;          // да, string, не number
  ACTIVE: "Y" | "N";  // не boolean
  PRICE: string;       // тоже string
  QUANTITY: string;    // и это string
}

Производительность и интеграция с API

Агрегирующие эндпоинты — база. Один ajax.php или кастомный контроллер на \Bitrix\Main\Engine\Controller собирает данные каталога, фильтров, корзины и пользователя за один запрос. React Query кэширует ответ, и повторный заход отдаёт из кэша с staleTime — загрузка сокращается на 60% уже на второй загрузке.

Как React улучшает Core Web Vitals

• LCP < 2,5 с — lazy loading изображений через loading="lazy", критический CSS инлайном, прелоад LCP-картинки через <link rel="preload">
• INP (заменил FID) < 200 мс — useTransition для тяжёлых фильтраций, useDeferredValue для поисковой строки
• CLS < 0,1 — фиксированные размеры для скелетонов и изображений. Skeleton-плейсхолдеры вместо спиннеров

Виртуализация — не опция, а необходимость. Каталог с фасетным фильтром может вернуть 500 товаров на страницу. React-window или react-virtuoso рендерят только видимые 20–30 карточек — DOM не разбухает, скролл плавный.

REST и кастомные контроллеры

Из коробки через /rest/ доступны: инфоблоки (iblock.element.get), корзина (sale.basket.*), заказы (sale.order.*), пользователи (user.*). Для простого каталога достаточно. Но 70% задач требуют кастомных эндпоинтов. \Bitrix\Main\Engine\Controller — стандартный способ создавать свои эндпоинты в D7. Пишем контроллер, регистрируем через registerAction, получаем эндпоинт с CSRF-защитой и авторизацией из коробки.

• Агрегация: один запрос = данные каталога + фильтры + корзина + юзер
• WebSocket через Битрикс Push & Pull (CPullStack::AddByTag) — статус заказа обновляется в реальном времени, без поллинга
• GraphQL-прослойка (webonyx/graphql-php) поверх D7 ORM — фронтенд запрашивает ровно те поля, которые нужны. Экономия трафика на мобильных до 40%

Проекты, сроки и что входит в работу

Типичные проекты, которые мы уже сделали

• Интернет-магазин на 30 000 SKU с фасетным фильтром через \Bitrix\Iblock\PropertyIndex\Facet — SPA, React Query, виртуализация каталога
• B2B-кабинет: персональные цены из CCatalogGroup, акты сверки из 1С через \Bitrix\Sale\Compatible\OrderCompatibility, история заказов с фильтрацией
• Корпоративный портал: дашборды на Recharts, real-time через Push & Pull, интеграция с внутренними API через middleware
• Маркетплейс: два React-приложения (покупатель + продавец), общий бэкенд, разделение данных через CUser::GetUserGroup()

Сроки и что входит в работу

• Аудит текущего кода Битрикса и архитектуры
• Проектирование API-слоя (REST / кастомные контроллеры / GraphQL)
• Разработка дизайн-системы и компонентов
• Настройка CI/CD (деплой React-бандла независимо от Битрикса)
• Документация по эндпоинтам и типам (Swagger / TypeScript-типы)
• Передача доступов к серверу, админке, репозиторию
• Обучение контент-менеджеров работе через админку
• Гарантийная поддержка 2 месяца после сдачи

Точные цифры — после разбора ТЗ. Оценка поэтапная, с фиксированным бюджетом на каждый спринт.

Как мы внедряем React на проекте

1. Аудит существующего кода — находим узкие места: избыточные запросы, устаревшие шаблоны, неоптимальные кэши.
2. Проектирование слоя API — определяем, какие эндпоинты нужны, проектируем агрегаторы или GraphQL.
3. Разработка дизайн-системы — создаём компоненты (кнопки, формы, карточки) на основе макетов или рекомендаций UX.
4. Интеграция с Битриксом через выбранный подход (SPA, SSR или Headless) — настраиваем рендеринг и маршрутизацию.
5. Тестирование и деплой — запускаем пилотный раздел (например, каталог), измеряем Core Web Vitals, после утверждения расширяем.

Почему React, а не Vue или шаблоны Битрикса

• Экосистема. Для любой UI-задачи есть готовая библиотека: таблицы, графики, drag-and-drop, виртуализация. Для Vue выбор уже, для шаблонов Битрикса — почти отсутствует.
• Кадры. React-разработчика найти в три раза проще, чем Битрикс-шаблонщика, знающего D7 и template.php.
• React Native. Компоненты переиспользуются в мобильном приложении — не один-в-один, но бизнес-логика и типы шарятся.
• Поэтапное внедрение. Можно начать с одного раздела (/catalog/) на React, остальное оставить на шаблонах Битрикса. component_epilog.php подключает React-бандл, данные прокидываются через window.__INITIAL_DATA__.

1С-Битрикс + React — это не теоретическая архитектура, а рабочая связка, которая уже обслуживает каталоги с десятками тысяч SKU и B2B-кабинеты с тяжёлой бизнес-логикой. Подробнее о React и 1С-Битрикс. Получите консультацию — пришлём вам кейсы, похожие на ваш проект. Свяжитесь с нами, чтобы обсудить детали. Реализуем под ключ с гарантией результата.