Конструктор страниц в CMS на основе виджетов

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

Для управления страницами был разработан конструктор макетов, который позволяет составлять содержимое страницы из разработанных виджетов. Виджеты отвечают за получение нужных для них данных (для выполнения запросов используется библиотека Axios, а для хранения состояния на клиенте - Redux и Redux-thunk) и бизнес-логику. За отображение отвечают переиспользуемые компоненты, созданные по дизайн-системе клиента. Для разделения кода была использована библиотека loadable-components, что позволило разделять код не страниц, а отдельных виджетов.

Для управления содержимым виджетов (текст, наличие элементов управления, возможные изменения стилей и т.д.) используются json-манифесты. В них заполнены настройки, описано их назначение, заданы возможные значения и отображение на странице редактирования виджета.

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

Что все это значит для пользователей, обслуживающих сайт? Мы агрегировали положительный опыт коробочных систем управления сайтами. В частности, мы изначально целились на удобный интерфейс административной панели, чтобы ей могли пользоваться контент-менеджеры без специальной подготовки.Сейчас создание новой страницы на сайте - это очень просто. Назначается родительская страница или раздел. Подходящие виджеты (например, блок с картинкой и текстом, таблица и галерея) выбираются из библиотеки, складываются drag'n'drop ом в нужном порядке, дополняются изображениями из встроенной галереи. Производится настройка элементов в виджетах - внешний вид кнопок, анкорные ссылки, высота блока, и другие. Автоматически подставляется хедер и футер. Все - на сайте появился раздел, например, с новым продуктом.

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

Как мы уже отметили, список основных технологий был ограничен заказчиком. Для фронтенда должен был использоваться React + Typescript. Бэкенд с использованием NodeJS. В качестве базы данных используется MySQL.

Александр

Senior, teamlead frontend