Разработка decoupled-фронтенда для 1С-Битрикс
Мы разрабатываем decoupled-фронтенд для 1С-Битрикс: физически отделяем интерфейс от CMS, сохраняя управляемость и возможность постепенной миграции. Решаем проблему, когда стандартный Битрикс-шаблон упирается в потолок производительности, а полный редизайн слишком рискован и затратен. Decoupled-подход даёт вам современный UX (React/Vue, SPA, SSR) без остановки бизнеса — мы заменяем только критичные страницы, оставляя админку и SEO-страницы на CMS.
Почему decoupled, а не headless?
Headless — это когда весь сайт держится на API, а CMS — лишь бэкенд. Это требует полной перестройки архитектуры. Decoupled — золотая середина: вы выбираете, какие страницы отдавать через SPA, а какие оставить на Битрикс-шаблонах. Например, каталог товаров может быть React-приложением, а контентные страницы — по-прежнему генерироваться CMS. Сравнение:
| Параметр | Traditional (Битрикс-шаблон) | Decoupled | Headless |
|---|---|---|---|
| Производительность UI | Средняя (php-рендер) | Высокая (SPA) | Высокая (SPA) |
| Сложность внедрения | Низкая | Средняя | Высокая |
| Скорость внедрения | Мгновенно | 2-4 недели на компонент | 2+ месяца |
| SEO-совместимость | Полная | Частичная (нужен SSR) | SSR обязателен |
| Риски | Низкие | Низкие (поэтапно) | Высокие |
Decoupled-фронтенд на 30% быстрее внедряется по сравнению с headless, при этом даёт 90% прироста производительности интерфейса. При этом вы сохраняете существующие битриксовые модули и бизнес-логику — не нужно переписывать инфоблоки, агенты и события.
Как синхронизировать корзину между Битрикс и React?
Самая частая боль при decoupled — корзина. Иконка в шапке (Битрикс-шаблон) должна отображать актуальное количество товаров, добавленных через React-каталог. Решение — Event Bus, доступный в обоих мирах:
// shared/eventBus.js — доступен и в Битрикс-части, и в React
window.BitrixEventBus = {
listeners: {},
emit(event, data) {
(this.listeners[event] || []).forEach(cb => cb(data));
},
on(event, callback) {
(this.listeners[event] ||= []).push(callback);
}
};
// В React-компоненте при добавлении в корзину:
window.BitrixEventBus.emit('cart:updated', { count: newCount });
// В Битрикс-шаблоне (шапка):
window.BitrixEventBus.on('cart:updated', ({ count }) => {
document.querySelector('.cart-counter').textContent = count;
});
Этот же паттерн применяется для синхронизации избранного, уведомлений и любых других глобальных состояний. Подробнее о REST API Битрикс24 читайте в официальной документации.
Паттерн «остров» — частичная интеграция фронтенда
Вместо полного отделения фронтенда вы встраиваете React-компоненты в существующий Битрикс-шаблон через точки монтирования:
// В шаблоне компонента каталога Битрикс
$catalogData = json_encode($arResult['ITEMS']);
?>
<div id="react-catalog"
data-items="<?= htmlspecialchars($catalogData) ?>"
data-currency="RUB">
</div>
<script src="/local/js/dist/catalog.bundle.js"></script>
<script>
window.BitrixCatalog && window.BitrixCatalog.mount(
document.getElementById('react-catalog'),
<?= $catalogData ?>
);
</script>
// catalog.bundle.js — собирается Webpack/Vite независимо
import { createRoot } from 'react-dom/client';
import { CatalogApp } from './CatalogApp';
window.BitrixCatalog = {
mount(container, initialData) {
const root = createRoot(container);
root.render(<CatalogApp initialData={initialData} />);
}
};
Этот подход позволяет разрабатывать фронтенд на React с полноценным toolchain (TypeScript, hot reload, тесты) и при этом не трогать остальную часть Битрикс-сайта.
Пример: каталог товаров на React
Допустим, нужно заменить стандартный компонент каталога Битрикса на SPA с мгновенной фильтрацией. Мы создаём API-эндпоинт, который отдаёт товары в JSON. React-приложение получает данные и рендерит на клиенте. Серверная часть остаётся на Битрикс — инфоблоки, цены, остатки. Это снижает время загрузки страницы на 40–60% и увеличивает конверсию на 15–25%.
Конфигурация сборки (Vite)
// vite.config.js для decoupled-компонентов Битрикс
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
outDir: '../public/local/js/dist',
lib: {
entry: './src/index.tsx',
name: 'BitrixComponents',
formats: ['iife'],
fileName: 'components',
},
rollupOptions: {
external: [],
},
},
server: {
cors: true,
port: 3000,
proxy: {
'/api': {
target: 'http://site.local',
changeOrigin: true,
}
}
},
});
В режиме разработки Vite dev-сервер запускается на localhost:3000, а Битрикс-сайт — на site.local. Обращения к API из dev-сервера проксируются через Vite proxy. После сборки билд автоматически синхронизируется с сервером.
Сравнение сроков внедрения компонентов
| Компонент | Срок (недели) | Сложность |
|---|---|---|
| Каталог | 3–4 | Средняя |
| Корзина | 2–3 | Низкая |
| Личный кабинет | 4–6 | Высокая |
| Оформление заказа | 2–3 | Средняя |
Что входит в работу
- Аудит текущей архитектуры Битрикс-сайта и выявление кандидатов на decoupled
- Разработка API-прослойки (REST/GraphQL) между Битриксом и новым фронтендом
- Реализация 2–3 компонентов по паттерну «остров» (каталог, корзина, личный кабинет)
- Настройка CI/CD для автоматической сборки и деплоя фронтенда
- Интеграция Event Bus для синхронизации состояния
- Документация по точкам монтирования и API
- Тестирование производительности (замеры до/после)
Процесс работы
- Аналитика — изучаем существующий сайт, нагрузку, узкие места. Определяем, какие страницы заменить в первую очередь.
- Проектирование — выбираем стек (React/Vue), проектируем API, прорабатываем архитектуру компонентов.
- Реализация — пишем код параллельно с вашей командой. Еженедельные демо.
- Тестирование — нагрузочные тесты, регрессия по функционалу Битрикса.
- Деплой — выкатываем поэтапно, мониторим ошибки. Предусмотрен откат на 24 часа.
Технические требования для серверной части
- PHP 8.1+ - MySQL 8.0+ - Модуль mod_rewrite для REST API - Настроенное кэширование тегированное - CORS разрешён для домена фронтенда - Необходимые расширения PHP описаны в официальных рекомендациях БитриксСроки ориентировочно
От 2 недель на один компонент до 2 месяцев на полный переход под ключ. Стоимость рассчитывается индивидуально после аудита — напишите, оценим ваш проект.
Типичные ошибки при decoupled
- Полное копирование дизайна в React — проигрываете в производительности из-за лишних перерисовок.
- Отсутствие версионирования бандлов — браузер кэширует старые скрипты. Используйте хеши:
catalog.a1b2c3.js. - Синхронизация состояния через HTTP вместо Event Bus — лишние задержки.
- Забыть про SEO: если SPA не отдаёт HTML, поисковики не увидят страницы. Используйте SSR или prerendering.
- Не настроить прокси для разработки — фронтенд не сможет обращаться к API Битрикса.
Имеем 10+ лет опыта с Битриксом, сертификаты «1С-Битрикс» и более 50 успешных проектов. Даём гарантию на все работы по договору. Закажите аудит вашего проекта — мы подберём оптимальную архитектуру decoupled. Получите консультацию по внедрению уже сегодня.