Общая схема типового проекта
Артем Житник
Мотивировка
Зачем все это вообще нужно? Битрикс предоставляет широкие возможности для развертывания веб приложений от самых маленьких до сложных порталов, интернет магазинов и т.п. Если какого-то функционала не хватает, можно поставить подходящий модуль из маркетплейса, либо обратиться к услугам разработчика, благо рынок труда насыщен специалистами готовыми помочь. Удобство - это главное преимущество Битрикса. В большинстве случаев, решений ищущих из коробки достаточно, нужно только их правильно применить.
Иногда мне кажется что Битрикс несет с собой весь мир, включая копии популярных фронтовых библиотек, типа bootstrap или Vue. Есть встроенная система сборки js и css. Также есть собственная библиотека BX для работы на клиенте. Используя все это можно строить довольно сложные пользовательские интерфейсы. Код который получится в результате лучше не видеть)))
Заказчик хочет SEO оптимизации, хочет хорошей оценки Google PageSpeed. Следуя рекомендациям, оказывается что невозможно уменьшить размер js, css сборки, потому что библиотеки которые мы тянем включаются полностью. Скорость загрузки страницы можно увеличить за счет использования композитного режима Битрикса, но по сути это костыль, не облегчающий на самом деле страницу, а загружающий ее по частям. В итоге достигается предел оптимизации, дальше которого продвинуться невозможно.
Хочется использовать модные современные средства разработки клиентских приложений, типа React. Где многие затронутые выше проблемы давно решены. Но нужен контроллер, через который приложение будет общаться с Битриксом. Есть встроенный REST, но на сегодняшний день, не уверен что им можно пользоваться в данном контексте. Возможно он подойдет для случаев необходимости настройки обмена между внутренними системами организации, а для публичного использования кажется не очевидным. Есть встроенный механизм ajax контроллеров, который более юзабильный. Есть много реализованных в ядре котроллеров для доступа к данным разных модулей. Теоретически, на этой базе, дописав свои недостающие котроллеры, можно было бы использовать их во front-end приложении. Но они недокументированы и проще тогда написать все что нужно самому. Многие разработчики так и делают. И я пошел по скользкой дорожке, написав GraphQL контроллер. О нем напишу отдельно.
Битрикс без головы
Если бы вы видели код шаблонов стандартных компонентов... Там смешаны php, html, js, бизнес логика. Иногда из такого винегрета получаются достаточно большие сложно читаемые скрипты. А как иначе получить красивые динамичные странички. Боль!
Учитывая упомянутые проблемы, стало любопытно, а можно ли вообще отказаться от клиентской части Битрикса? Используем бекенд, а голову с плеч! Бекенд вполне себе годный: админка, интеграции с внешними сервисами (1С, Битрикс-24, Яндекс Маркет, Google Merchant Center и т.д.), генерация sitemap, отправка email, регулярные задачи (агенты) и многое другое.
Схема должна уметь делать SSR (Server Side Rendering), это жизненно необходимо для SEO. Поисковый робот дергает страницу и получает не пустую заглушку, а сразу контент. Next.js фреймворк в этом плане хорош, он много чего умеет делать для SEO, отдельно напишу об этом.
Итак, пользователь переходит на страницу, сразу получает контент (SSR). После этого React приложение "оживает", компоненты привязываются к узлам DOM дерева (так называемый процесс hydration). Страница открыта, React приложение развернуто, оно может делать запросы напрямую к GraphQL контроллеру. Контроллер я сам разрабатываю, это отдельная большая тема, требующая освещения.
Когда происходит SSR, Nodejs сервер также может обращаться к GraphQL для получения данных необходимых для рендеринга страницы.
Для доступа к админке Битрикс, NGINX прокидывает запросы к PHP бекенду - традиционный режим работы Битрикса.
Все это хозяйство бежит на нескольких Docker контейнерах, нужен VPS для развертывания проекта. Хотя, если хостинг включает Nodejs, можно и без Docker настроить. Этот блог работает на описанной схеме.
Вкратце все, буду подробно освещать разные аспекты в будущих постах, следите!
