Послуги з 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, тестування, деплой. Код рев'юїться, покривається тестами, документується — не «зібрав і забув».