SPA приложение, без JS фреймворков и потери SEO в Bitrix

Покажу как просто и удобно можно сделать главную фишку SPA — плавный и бесшовный переход между страницами в Bitrix без тонны JS кода. Ну и самое главное без потери SEO.

Принцип работы будет похож немного на Next.js / Nuxt.js — где первую страницу отдает сервер, после чего остальные страницы уже подгружаются фоном через JS. Но в нашем случае роутинг мы напишем сами.

Оглавление

1. Просто о сложном

2. Что нам понадобится?

3. Делаем структуру

4. Создаем роутинг

5. Как избежать лишних запросов на сервер

6. Вывод

7. Ссылка на пример

Просто о сложном

Что такое SPA и как оно работает?

SPA — это сайт одностраничник который работает без перезагрузки страницы, весь контент на странице меняется через JavaScript.

Обычно эти сайты написаны на Vue, React или Angular

А так же могут быть другие подобные фреймворки / библиотеки. Но эти трое самые популярные и на рынке стабильно за них платят. Но в данной статье речь пойдет не о них.

А теперь чуть углубимся в принцип работы.

SPA работает благодаря History API которое позволяет управлять историей браузера, текущей ссылкой и прочими вещами через JS.

И на window добавляют слушатель событий popstate, благодаря которому мы можем отслеживать изменения в пути / URL

Соответственно когда у нас изменяется путь отрабатывает ивент, который видит изменения и быстро подгружает нам нашу страницу.

Только есть один ньюанс — данные фреймворки или библиотеки использует концепт VDOM благодаря которому все это работает очень быстро.

Свой VDOM — мы писать не будем в этой статье, обойдемся лишь апендом напрямую в DOM, либо у кого есть желание может использовать DocumentFragment или играться с темплейтами и апендить их в DOM (Не важно кто понял тот понял).

Ну и собственно анимацию перехода между страницами мы тоже сделаем.

Что нам понадобится?

• Знание как работают ООП компоненты в Bitrix и умение их писать.

• Использование библиотеки BX, а именно модуль ajax.

• Желательно bitrix cli для сборки нашего JavaScript кода, но не обязательно.

• Правильная структура.

• При добавлении новой страницы надо в роуте прописывать новый путь).

ООП компоненты нам нужны для того чтобы мы могли подгружать новые компоненты через ajax, и это будет прям компонент, мы подгрузим css и js компонента. И выполним это 1 раз, из за чего последующая загрузка / перех на страницу будет еще быстрее.

Из BX нам понадобится ajax.runComponentAction, который позволяет обратится к действию нашего класса. Это нужно для того чтобы не городить отдельную папку с нашими ajax файлами где мы будем возвращать верстку. У нас будет один маленький удобный action у класса к которому мы обратимся и получим наш компонент.

А так же ajax.history благодаря которому мы будем работать с History API.

Bitrix CLI позволит нам минифицировать наш JS код и собрать его с использованием полифилов для того чтобы наш код работал корректно в других браузерах. Кроме того наш файл будет весить меньше, а значит страница будет грузиться быстрее.

Правильная структура позволит нам и другим разработчикам после нас поддерживать проект + без правильной структуры данное решние будет (50% на 50%).

Под правильной структурой я имею ввиду в index.php не размещать логику страницы + html + css + js. А делить это на компонеты и подключать уже в index.php.

По сути это обычная структура, но я видел хаос про который написал выше и это полный …., ну вы поняли).

Делаем структуру

Для начала разместим наши страницы в корне сайта. И внутри создадим файл index.php где куда потом подключим наш компонент.

В моем случае у меня будут страницы:

• firstroute

• secondroute

Далее я добавлю компонент роутинга в header.php и создам не закрытый div

После переходим в footer.php и закрываем наш div. Это нужно для того чтобы когда мы переходили на наши страницы наш контент был в обёртке и мы могли его нормально динамически менять.

<?php  $APPLICATION->IncludeComponent(     "test:routing",     ".default", [         'ROUTES' => [             [                 "PATH" => "/secondroute/",                 "NAME" => 'Второй путь',                 "COMPONENT" => [                     "NAME" => 'test:second',                     "TEMPLATE" => '.default',                     "PARAMS" => [                         "TITLE" => "hello from second route",                     ],                 ]             ],             [                 "PATH" => "/firstroute/",                 "NAME" => 'Первый путь',                 "COMPONENT" => [                     "NAME" => 'test:first',                     "TEMPLATE" => '.default',                     "PARAMS" => [                         "TITLE" => "hello from first route",                     ],                 ]             ],         ]     ],     false );  ?>  <div id="content">

Далее сделаем эти компоненты которые указали в роутинге и сам роутинг

После чего переходим в наши страницы firstroute и secondroute и подключаем их как и указали в роутинге.

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");  $APPLICATION->IncludeComponent(     "test:first",     ".default", [       "TITLE" => "hello from first route",     ],     false );  ?>

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");  $APPLICATION->IncludeComponent(     "test:second",     ".default", [       "TITLE" => "hello from second route",     ],     false );  ?>

P.S. Вот и вся структура… Ничего сложного)

Создаем роутинг

Наш роутинг для нашего же удобства и для других разработчик должен быть написан в ООП стиле. Эти ООП компоненты появились в D7.

Начнем со структуры компонента.

в папке dist ничего не находится — её создал сам сборщик (bitrix cli), я выполнил сборку JS сразу в script.js.

Опять же кто хочет — тот может написать JS без bitrix cli. Просто для меня этот инструмент стал немного удобным.

Начнем с класса компонента.

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();  use Bitrix\Main\Web\Json, Bitrix\Main\Engine\Response\Component, Bitrix\Main\Engine\ActionFilter, Bitrix\Main\Engine\Contract\Controllerable;  class Routing extends CBitrixComponent implements Controllerable { /* Получение параметров которые передали при инициализации компонента (нужно для того чтобы получить arParams когда обращаемся к action через ajax) */ protected function listKeysSignedParameters() : array { return [ 'ROUTES' ]; } /*Настраиваем доступ к своим действиям*/ public function configureActions(): array { /**Отключаем у наших экшенов требования к авторизации пользователя на сайте */ return [ 'updateContent' => [ '-prefilters' => [ ActionFilter\Authentication::class, ], ],  ]; }  /* Запуск компонента */ public function executeComponent(): void { $this->setArResult(); $this->includeComponentTemplate(); } /* Получение arResult компонента */ public function setArResult(): void { $this->arResult['ROUTES'] = $this->arParams['ROUTES']; $this->arResult['SIGNED'] = Json::encode($this->getSignedParameters()); }  /* Возвращаем компонент на страницу */ public function updateContentAction(string $routeKey): Component { $this->setArResult();  $route = $this->arResult['ROUTES'][$routeKey];  return new Component( $route['COMPONENT']['NAME'], $route['COMPONENT']['TEMPLATE'], $route['COMPONENT']['PARAMS'], );  } }

Тут довольно все просто и понятно.

Логика компонента написана, далее переходим к фронтовской части.

<nav class="routing-wrapper">   <ul id="routing" class="routing">     <?php foreach ($arResult['ROUTES'] as $key => $route):?>     <li class="routing__item">       <a         class="routing__link"         data-route="<?=$key?>"         href="<?=$route['PATH']?>"         >         <?=$route['NAME']?>       </a>     </li>     <?php endforeach?>   </ul> </nav>   <script> //Передаем параметры компонента new BX.Routing(   <?=$arResult['SIGNED']?> ) </script>

Сразу стоит уточнить почему инициализацию JS кода лучше делать в template.php

Дело в том что когда мы возвращаем наш компонент в классе, то JS и CSS автоматически вставляются без нашего согласия на страницу. И контролировать мы это не можем. Кроме того JS и CSS загружаются один раз и потом постоянно переиспользуются.

По этому при повторной инициализации компонента, JS код не отработает повторно, по этому его стоить инициализировать внутри template.php

import { ajax, create, processHTML } from "main.core";  export class Routing {   #signedParameters;   #routing;   #content;   #routes;    constructor(signedParameters) {     this.#signedParameters = signedParameters;     this.#routes = [];      this.#routing = document.getElementById("routing");     this.#content = document.getElementById("content");      this.#initEvents();   }   #initEvents() {     this.#routing.querySelectorAll("a").forEach((route) => {       const path = route.getAttribute("href");       const routeKey = route.dataset.route;        this.#routes.push({         path: path,         routeKey: routeKey,         disabled: false,       });        route.onclick = (e) => {         e.preventDefault();         ajax.history.put({}, path);          this.#updateContent();       };     });     window.onpopstate = () => {       this.#updateContent();     };   }   async #updateContent() {     const path = window.location.pathname;      const routeKey = this.#routes.find(       (route) => route.path === path     )?.routeKey;      const closePageTransition = this.#content.animate(       {         opacity: [1, 0],         transform: ["translateY(0)", "translateY(20px)"],       },       {         duration: 300,         fill: "forwards",       }     );      closePageTransition.onfinish = async () => {       try {         const response = await ajax.runComponentAction(           "test:routing",           "updateContent",           {             mode: "class",             data: {               routeKey: routeKey,             },             signedParameters: this.#signedParameters,           }         );          const { HTML, SCRIPT, STYLE } = processHTML(response.data.html);          this.#content.innerHTML = HTML;          SCRIPT.forEach((script) => {           const scriptElement = create("script", {             html: script.JS,           });            this.#content.appendChild(scriptElement);         });       } catch (error) {         console.error(error);       } finally {         this.#content.animate(           {             opacity: [0, 1],             transform: ["translateY(20px)", "translateY(0)"],           },           {             duration: 300,             fill: "forwards",           }         );       }     };   } } 

Вариант без сборки и bitrix cli:

BX.namespace("Routing");  class Routing {   #signedParameters;   #routing;   #content;   #routes;    constructor(signedParameters) {     this.#signedParameters = signedParameters;     this.#routes = [];      this.#routing = document.getElementById("routing");     this.#content = document.getElementById("content");      this.#initEvents();   }   #initEvents() {     this.#routing.querySelectorAll("a").forEach((route) => {       const path = route.getAttribute("href");       const routeKey = route.dataset.route;        this.#routes.push({         path: path,         routeKey: routeKey,         disabled: false,       });        route.onclick = (e) => {         e.preventDefault();         ajax.history.put({}, path);          this.#updateContent();       };     });     window.onpopstate = () => {       this.#updateContent();     };   }   async #updateContent() {     const path = window.location.pathname;      const routeKey = this.#routes.find(       (route) => route.path === path     )?.routeKey;      const closePageTransition = this.#content.animate(       {         opacity: [1, 0],         transform: ["translateY(0)", "translateY(20px)"],       },       {         duration: 300,         fill: "forwards",       }     );      closePageTransition.onfinish = async () => {       try {         const response = await BX.ajax.runComponentAction(           "test:routing",           "updateContent",           {             mode: "class",             data: {               routeKey: routeKey,             },             signedParameters: this.#signedParameters,           }         );          const { HTML, SCRIPT, STYLE } = BX.processHTML(response.data.html);          this.#content.innerHTML = HTML;          SCRIPT.forEach((script) => {           const scriptElement = BX.create("script", {             html: script.JS,         });            this.#content.appendChild(scriptElement);         });       } catch (error) {         console.error(error);       } finally {         this.#content.animate(           {             opacity: [0, 1],             transform: ["translateY(20px)", "translateY(0)"],           },           {             duration: 300,             fill: "forwards",           }         );       }     };   } }   BX.Routing = Routing; 

Обратите внимание на данную строчку кода, мы сделали BX.processHTML чтобы получить скрипты которые мы инициализируем в template.php.

Потому что script.js автоматически подключается сам и нам не требуется с ним что либо делать, но вот со скриптом который находится у нас в темплейте нам придется для начала найти его, и потом сделать append в content чтобы он заработал потому что когда я записывал в innerHTML, то у меня скрипты не инициализировались.

Я решил эту проблему вот таким способом:

        SCRIPT.forEach((script) => {           const scriptElement = BX.create("script", {             html: script.JS,         });

А теперь перейдем к написанию самих компонентов.

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();  use Bitrix\Main\Engine\Contract\Controllerable;  class First extends CBitrixComponent implements Controllerable { /* Получение параметров которые передали при инициализации компонента (нужно для того чтобы получить arParams когда обращаемся к action через ajax) */ protected function listKeysSignedParameters() : array { return [ 'TITLE' ]; } /*Настраиваем доступ к своим действиям*/ public function configureActions(): array { return []; }  /* Запуск компонента */ public function executeComponent(): void { $this->setArResult(); $this->includeComponentTemplate(); } /* Получение arResult компонента */ public function setArResult(): void { $this->arResult = $this->arParams; } }

<div class="container">   <?for ($index = 0; $index < 20; $index++):?>   <div class="base-card" style="animation-delay: <?=$index * 50?>ms;">     <h3 class="base-card__title"><?=$arResult['TITLE']?></h3>      <div class="base-card__content">      </div>     <div class="base-card__actions">       <a href="#" class="base-card__link">Подробнее</a>     </div>   </div>   <?endfor?>  </div>

.container {   display: flex;   flex-wrap: wrap;   gap: 20px;   justify-content: center; }  .base-card {   padding: 20px;   background-color: #f3f3f3;   box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);   animation: show-card 300ms ease-in-out forwards;   scale: 0.5;   opacity: 0;    &:hover {     box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.4);     cursor: pointer;     transition: 0.2s;     transform: scale(1.01);   }   & .base-card__title {     margin-bottom: 10px;   }    & .base-card__content {     height: 200px;     background-color: #fff;     margin-bottom: 10px;   } }  @keyframes show-card {   to {     opacity: 1;     scale: 1;   } } 

la<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();  use Bitrix\Main\Engine\Contract\Controllerable;  class Second extends CBitrixComponent implements Controllerable { /* Получение параметров которые передали при инициализации компонента (нужно для того чтобы получить arParams когда обращаемся к action через ajax) */ protected function listKeysSignedParameters() : array { return [ 'TITLE' ]; } /*Настраиваем доступ к своим действиям*/ public function configureActions(): array { return [ ]; }  /* Запуск компонента */ public function executeComponent(): void { $this->setArResult(); $this->includeComponentTemplate(); } /* Получение arResult компонента */ public function setArResult(): void { $this->arResult = $this->arParams; } }

<div class="container">   <form class="base-form">     <header class="base-form__header">       form - <?=$arResult['TITLE']?>     </header>     <div class="base-form__field">       <label for="username">         Username:       </label>       <input id="username" class="base-form__input" type="text" name="username">     </div>     <div class="base-form__field">       <label for="password">         Username:       </label>       <input id="password" class="base-form__input" type="password" name="password">     </div>     <footer class="base-form__footer">       <button class="base-form__button" type="submit">Submit</button>       <button class="base-form__button" type="reset">Reset</button>     </footer>   </form> </div>

.container {   background-color: #deb887; } 

По итогу должен получиться вот такой результат:

И возникает уже первая условность данного подхода.

Общие классы нужно выносить в main.css, хотя я бы не назвал это условностью ведь, это просто в целом правильный подход.

Почему же так вышло?

Так как style.css и script.js подключаются сами, у компонентов есть общий класс, где мы переопределяем стили контейнера.

/*second*/ .container {   background-color: #deb887; } /*first*/ .container {   display: flex;   flex-wrap: wrap;   gap: 20px;   justify-content: center; }

Из за чего и происходит смена цвета которая у нас останется до тех пор — пока не перезагрузим страницу.

Как избежать лишних запросов на сервер

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

Условно будем сами кешировать ручками еще и разметку страницы.

Для оптимизации в целом мы можем использовать КЕШ в Bitrix, и кешировать наши запросы к базе в компонентах.

Но мы по прежнему общаемся к серверу чтобы получить страницу на которой пользователь уже был.

Для того чтобы избежать этого у нас есть много вариантов.

1. Можно в нашем роутинге в массиве с роутами сделать еще одно свойство которое будет хранить наш HTML.

2. Воспользоваться HTML тегом — template

Первый вариант неплох, но не так хорош как второй, все таки разметка страницы может быть очень большой. И пользователь явно будет больше посещать чем одну страницу.

А теперь про второй вариант.

Мы можем создать template, и помещать его на страницу с содержимым. И каждый раз когда будем переходить на следующую страницу — мы будем проверять.

Есть ли такой template с таким id ? Если нет — то мы подгружаем контент с сервера, затем создаем тег template и помещаем на страницу, после чего клонируем контент, и уже потом вставляем на страницу, а если есть то мы просто находим наш тег и клонируем содержимое и так же вставляем на страницу.

А теперь о преимуществах:

Встроенный элемент <template> предназначен для хранения шаблона HTML. Браузер полностью игнорирует его содержимое, проверяя лишь синтаксис, но мы можем использовать этот элемент в JavaScript, чтобы создать другие элементы.

В теории, для хранения разметки мы могли бы создать невидимый элемент в любом месте HTML. Что такого особенного в <template>?

Во-первых, его содержимым может быть любой корректный HTML-код, даже такой, который обычно нуждается в специальном родителе.

Кроме того у данного тега контент сразу работает как DocumentFragment, а значит вставка этого контента на страницу будет более оптимизирована.

Вывод

Данный подход является очень эффективным с точки зрения производительности. Ведь он работает как полноценное SPA.

Как по мне вариант очень солидный когда на проекте нужно SEO + серверный рендеринг и реактивность, а вы привязаны именно к Битриксу, и не можете использовать Next или Nuxt.

Так же хочу уточнить что данный пример, является прототипом, и тут еще очень много моментов которые можно и нужно улучшить.

Плюсы:

1. Мы динамически подгружаем страницы.

2. Мы не загружаем заново все JS и CSS файлы.

3. Есть дополнительный вариант как можно самим «закешировать» страницы чтобы после загрузки мы их не подгружали каждый раз с сервера.

4. Есть возможность сделать красивые анимации перехода между страницами.

5. Не теряем серверный рендеринг, поисковики нормально будут находить наши страницы.

6. Улучшение UX

Минусы:

1. Плохо работает со стандартными компонентами, нужно писать свои либо делать обёртку.

2. Обязательно пишем JS модульно, а инициализацию в template.php

3. Дважды объявляем подключение компонента (на странице и в роутинге)

А так же на legacy проекте — это будет тяжело сделать, ведь уже есть много страниц, и своя структура с JS и CSS.

Очень часто можно встретить на проектах Bitrix где глобальный css переписывается на новый с пометкой !important а значит сходу переписать будет проблематично.

Ссылка на пример

https://github.com/ZiZIGY/HABR-BitrixSPA