Нестандартный подход в разработке: как мы интегрировали React с «Битрикс»
Наши специалисты сталкиваются с самыми разными ситуациями при решении задач клиента. И вот одна из них.
Клиент попросил сделать апгрейд сайта, который мы разработали несколько лет назад — профессиональный ресурс для диджеев Jestei Pool. Сервис позволяет диджеям скачивать сеты для своей профессиональной деятельности. Сайт был написан на «1С-Битрикс».
Заказчик решился на глобальные изменения:
- Полностью изменить дизайн.
- Добавить элементы соцсети — ленту новостей, функцию подписки.
- Сделать беспрерывное воспроизведение плейлистов пользователей.
Важное условие — все изменения необходимо было реализовать на «1С-Битрикс». Это связано со следующими факторами:
- На сайте накопилось много контента.
- Заказчик привык к многофункциональной и гибкой админке «1С-Битрикс».
Однако в процессе изучения требований заказчика стало понятно, что реализовать изменения на сайте, разработанном на «1С-Битрикс», проблематично. Трудности оказались связаны с технологией работы классических монолитных сайтов.
Как работают монолитные сайты
Пользователь при клике по ссылке отправляет через браузер запрос на сервер. На сервере запрос обрабатывается, формируется HTML-страница и возвращается ответом пользователю. После каждого запроса происходит перезагрузка страницы. Каждый экран сайта является отдельным документом. Четкого разделения на фронтенд и бэкенд нет, и малейшие изменения в верстке требуют работы со стороны программиста.
При таком подходе невозможно осуществить непрерывную работу плейлиста. Поэтому мы начали рассматривать более сложные фреймворки: React, Vue.
React или Vue
React — библиотека JavaScript, созданная Фейсбуком. Это профессиональный продукт, который постоянно развивается. Vue — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов, разрабатывался любительским сообществом. Но React популярнее и имеет более интересные перспективы.
Мы решили остановиться на React. Тем более всегда полезно получить опыт, который наверняка пригодится в дальнейшей работе.
Плюсы технологии React
- Высокая скорость работы высоконагруженных систем. Благодаря технологии Single Page Application вместо перезагрузки всей страницы контент меняется точечно. Сервер возвращает пользователю легкий JSON вместо тяжеловесного HTML. Благодаря этому возможна непрерывная работа плеера.
- Четко разделены роли фронтенд- и бэкенд-разработчиков. Клиентские и серверные приложения взаимодействуют посредством технологии Rest API.
- Модульность React, которая позволяет просто, быстро и дешево обслуживать сайт.
Но мы выделили один огромный минус сайтов с технологией Single Page Application — они не подходят для SEO-оптимизации. Для пользователя с сервера подгружаются данные в формате JSON, в браузере формируется сама страница, и когда поисковик заходит на такую страницу, он видит не HTML, а Java-скрипт.
Надстройка Next.js над React для SEO
Чтобы решить эту задачу мы использовали надстройку Next.js над React для SEO. При этом используется серверный рендеринг. Когда пользователь заходит на сайт в первый раз, страница формируется на сервере и возвращается. Но потом страницы формируются в браузере. А так как поисковики получают информацию с сервера, SEO в этом случае отлично работает.
Результат работы
Мы еще работаем над новой версией сервиса, но некоторыми результатами готовы поделиться уже сейчас.
- Главная страница.
- Редактирование своих плейлистов в личном кабинете. Порядок отображения плейлистов задается простым перетаскиванием прямо в браузере.
- Поп-ап с настройками плеера. Во время воспроизведения трека доступно такое окошко.
Для работы на React необходима высокая квалификация разработчика. Это не просто верстка, а работа в отдельном приложении. Проект пишет фронтенд-разработчик, а не верстальщик.
В целом использование технологии React — новый виток развития кода. Особенно это важно для высоконагруженных сайтов и проектов с большим количеством товаров. Но выбор в пользу React должен быть осмысленным, с учетом особенностей проекта. Внедрять эту технологию повсеместно мы полагаем излишним.
