Услуги по Vue.js разработке для 1С-Битрикс

Vue.js разработка для 1С-Битрикс

Почему CIBlockElement::GetList убивает UX — и при чём тут Vue

Стандартный компонент bitrix:catalog.section при каждом клике по фильтру перезагружает страницу целиком. Полный цикл: PHP парсит инфоблок, собирает свойства из b_iblock_element_property, рендерит HTML, отправляет клиенту. На каталоге в 50 000 SKU это 800–1200 мс. Покупатель кликнул три фильтра — три перезагрузки, 3 секунды ожидания. Уходит.

Vue.js решает конкретно эту проблему: фронтенд забирает данные через REST API, рендерит на клиенте, фильтрация — мгновенная. Битрикс остаётся бэкендом: контент, каталог, заказы, обмен с 1С.

Когда Vue оправдан

Не каждому сайту нужен фронтенд-фреймворк. Оправдан, когда стандартные компоненты Битрикса не вытягивают:

• Каталоги с тяжёлой фильтрацией — catalog.smart.filter с AJAX работает, но на сложных комбинациях SKU-свойств тормозит. Vue + API = мгновенный отклик
• Личные кабинеты — полноценные SPA с дашбордами, графиками, реактивными формами. sale.personal.section выглядит как 2012 год
• Конфигураторы и калькуляторы — визуальные редакторы, подборщики комплектации с пересчётом цен в реальном времени
• Real-time — чаты, уведомления, обновление остатков через WebSocket
• PWA — офлайн-режим, push-уведомления, установка на домашний экран

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

1. Островной — Vue-виджеты на страницах Битрикс

Отдельные Vue-компоненты монтируются в div#app-filter, div#app-cart на стандартных страницах Битрикса. Маршрутизация и серверный рендеринг — по-прежнему Битрикс. Минимальное вмешательство в существующий сайт.

Когда использовать: поэтапная модернизация, нужно добавить интерактивности без переписывания. Типичный пример — реактивный фильтр вместо catalog.smart.filter.

2. SPA на Vue + Битрикс REST API

Фронтенд — полноценное Vue-приложение с Vue Router. Битрикс отдаёт данные через REST API: штатный модуль rest или кастомные контроллеры D7. Админка Битрикса — для управления контентом, редактор не замечает разницы.

Когда использовать: личные кабинеты, B2B-порталы, внутренние приложения. Всё, где SEO не критичен.

3. Nuxt.js + Битрикс как headless CMS

Nuxt обеспечивает SSR/SSG для индексации. Битрикс — headless: отдаёт данные через API, управляет контентом. Для магазинов и контентных сайтов, где SEO — приоритет.

REST API Битрикс — глубже

Вот где 70% времени при интеграции Vue + Битрикс:

Штатный REST-модуль:

• Инфоблоки, каталог, корзина (sale.basket.*), заказы (sale.order.*), пользователи — из коробки
• Ограничение: штатные методы не всегда покрывают кастомную логику. Метод catalog.product.list не отдаёт вычисляемые свойства — нужен кастомный эндпоинт

Кастомные контроллеры D7:

Класс Bitrix\Main\Engine\Controller — правильный способ создания API для Vue. Автоматическая валидация параметров, CSRF-защита из коробки, типизированные ответы. Не ajax.php с $_POST — это путь к инъекциям.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM-запрос к инфоблоку, не CIBlockElement::GetList
    }
}

Авторизация: OAuth 2.0 для SPA или сессионные токены. Rate limiting — через Bitrix\Main\Engine\Controller или nginx.

Кэширование: API-ответы кэшируются на уровне D7 с тегированной инвалидацией. Изменился товар в инфоблоке — кеш сбросился по тегу iblock_id_X. Без этого при 100 RPS сервер ляжет.

Структура Vue-приложения

• Vue Router — lazy loading маршрутов через defineAsyncComponent. Каталог не тянет за собой код личного кабинета
• Pinia — стейт-менеджмент: каталог, корзина, пользователь, фильтры. Модульная архитектура хранилища. Vuex — легаси, новые проекты на Pinia
• Axios с перехватчиками: автоматическое обновление CSRF-токена, retry при 503, обработка ошибок авторизации
• Vue Query (TanStack Query) — кэширование API-запросов, автоматическая ревалидация, оптимистичные обновления. Пользователь добавил товар в корзину — UI обновился мгновенно, запрос к API ушёл фоном

Каталог на Vue — самый частый кейс

Разница в UX ощущается сразу. Конкретика:

• Фильтр — чекбоксы, range-слайдеры, select с поиском. Состояние синхронизируется с URL через vue-router query params — ссылку с фильтрами можно отправить коллеге
• Карточка товара — галерея с зумом (vue-cool-lightbox), переключение SKU (цвет/размер), цена пересчитывается через API catalog.product.offer.list, остатки по складам из catalog.store.product.list
• Виртуальный скроллинг — vue-virtual-scroller рендерит только видимые элементы. Каталог в 10 000 товаров работает без тормозов
• Умный поиск — debounced-запросы к search.title.search или ElasticSearch, автодополнение через выпадающий список
• Сравнение — динамическая таблица характеристик с подсветкой различий. Хранение в Pinia + localStorage для персистентности

Nuxt.js для SEO

SPA на чистом Vue отдаёт поисковику пустой HTML с <div id="app"></div>. Google умеет рендерить JS, но с задержкой в дни. Яндекс — вообще непредсказуемо.

Nuxt.js решает:

• SSR — сервер отдаёт полный HTML, после гидратации работает как SPA
• SSG — страницы генерируются при nuxt generate, раздаются с CDN. Максимальная скорость
• Гибридный режим — каталог статически, корзина и ЛК — SSR
• useHead() — динамические title, description, Open Graph, Schema.org для каждой страницы
• Sitemap — @nuxtjs/sitemap, маршруты из API Битрикса

Производительность

• Code splitting — Vite автоматически разбивает бандл по маршрутам. Страница каталога: 80–120 КБ gzip, не 500
• Tree shaking — неиспользуемый код из UI-библиотек вырезается при сборке
• Lazy loading — тяжёлые компоненты (Chart.js, карты, WYSIWYG) подгружаются по требованию через defineAsyncComponent
• Батчинг API-вызовов — один запрос batch вместо 5 отдельных к REST API Битрикса
• Brotli/Gzip — сжатие ассетов на уровне nginx, WebP/AVIF для изображений через <picture> с srcset

Сроки

Полный цикл: проектирование API, разработка контроллеров D7, Vue-приложение, настройка Vite, тестирование, деплой. Код ревьюится, покрывается тестами, документируется — не «собрал и забыл».