SPA приложения на 1С Битрикс + Vue.js = ❤️

Очень часто когда мы видим 1С в приставке любого программного продукта - у нас начинается нервный тип и четкое ощущение что уже что-то сломалось и работает не очень хорошо.

Однако продукты Битрикс не равно 1С, и они хороши для определенного спектра задач. Попробуем это доказать.

При обсуждении новых проектов мы всегда опираемся на планы клиента по развитию бизнеса и его текущий бюджет. Если бюджет ограничен, то разработать полностью кастомную админку для сайта не получится. Поэтому хорошее решение – использование готовой, например, 1С Битрикс Управление сайтом

Преимущества 1С Битрикс Управление сайтом:

При этом всем делать с его использованием WOW сайты с большим количеством анимации и бесшовными переходами нереально, т.к. по факту это просто CMS на PHP.

В одном из наших проектов мы решили, что оптимальным решением будет реализация Back-End с помощью Битрикс, а Front-End с на Vue.js, что даст нам удобство Битрикса и большой простор для анимаций и бесшовных переходов SPA.

Решили, но потом очень долго отговаривали себя, когда увидели текущую степень интеграции Битрикс и Vue.

Даже на текущий момент (этот 2022 год) реализация поддержки Vue.js для Битрикса находиться в очень зачаточном состоянии и сделать полноценную интеграцию двух фреймворков и получить SPA сайт с админкой Битрикса стандартными средствами нереально.

Наши разработчики прошли все 6 стадий (отрицание, гнев, торг, депрессия, принятие, встал и пошел работать) перед тем как приняли решение написать собственный скрипт по извлечению данных из Битрикса и передачи данных во Vue.js

По факту у нас получилась следующая связка

(Битрикс админ панель <-> API bitrix <-> axios.js <-> Сайт на Vue)

Где, при каждом переходе на страницу в первый раз, происходит обращение на лету за необходимыми данными, и она (страница) кэшируется в store Vue.js. Последующие обращения идут к кэшированным страницам на странице клиента, что снижает нагрузку на сервер в несколько раз и позволяет добиться хорошего пользовательского опыта у клиента Заказчика.

Разумеется, если у вас на сайте есть каталог с пагинацией и фильтры, то почти каждое обращение будет идти через Битрикс, т.к. каждый раз вам нужно будет получать уникальный контент.

При такой связке над сайтом может работать несколько человек и с актуальными данными.

В редактировании Front-End могут принимать участие несколько разработчиков без необходимости выгружать весь Битрикс с БД к себе на локалку, а достаточно только развернуть у себя Vue и получать актуальные данные уже с рабочего сайта на хостинге.

Администратор сайта вносит правки через админ панель, и изменения на сайте отображаются мгновенно. Наличие на сайте Vue никак не сказывается на удобстве использования админ панели или какого-либо компонента Битрикса.

Жертва всего этого изобилия анимации и красивых перезагрузок – панель Эрмитаж, которой попросту нет. Однако для нашего клиента это было не важно, поэтому мы пошли на это.

Если вы захотите добавить новый пункт меню, страницу, раздел - без проблем.

Единственный момент, где вам может потребоваться помощь разработчика – это добавление нового фунционала или типа страниц. Во всем остальном это просто административная панель Битрикса.

Все элементы управления и настройки SEO параметров страницы работают в стандартном режиме из панели управления 1С Битрикс. Поэтому за SEO можно не переживать

Т.е. вы можете управлять:

Обновления также приходят как и на любую CMS 1С Битрикс, все устанавливается без проблем и вы можете получить новый фунционал и обновления системы безопасности.

Разработка SPA – это не всегда больно, и не только кастомные решения. Всегда можно использовать уже что-то готовое, что сократит время разработки и упростит интеграции.