Разработка 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. Получите консультацию по внедрению уже сегодня.