У нас в Точка Банк много продуктов, для которых нужны SEO-лендинги: онлайн бухгалтерия, эквайринг, электронный документооборот. Создание одного сайта — это несколько недель работы с участием редактора, дизайнера, разработчика, тестировщика, верстальщика. Не страшно, если нужен один сайт. Но когда их много, на их создание уходит колоссальное количество времени. 

Меня зовут Василий Полосухин — я фронтовый техлид в Точка Банк. В статье рассказываю, как мы сделали визуальный конструктор страниц и научились собирать сайты без кода.

С чего всё началось

Недавно нам поставили задачу — создать больше 100 типовых SEO-страниц. Мы поняли, что вручную такие объёмы осилить трудно, поэтому решили сделать визуальный конструктор.

При этом важно, чтобы он:

• Был переиспользуемым — мы могли использовать его не только в этой задаче, но и для других проектов.

• Включал готовые компоненты, чтобы не пришлось ничего верстать с нуля и можно было обойтись уже существующими блоками.

• Имел мощный редактор контента, т.к. это важно для SEO.

• Поддерживал SSR, чтобы сайты хорошо индексировались поисковиками.

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

Как работает конструктор

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

Чтобы ускорить наполнение страниц, мы сделали акцент на работу с крупными блоками. В качестве редактора контента выбрали Editor.js — там можно добавлять списки, таблицы, кнопки, заголовки, вложенные блоки и т.д.

Для SEO добавили:

• настройки метатегов;

• семантические тэги для заголовков (H1, H2, H3 и т.д.);

• обязательную JSON-LD разметку на всех страницах и опциональную для некоторых компонентов.

Конструктор встраивается в админку сайта через iframe. Там же можно задавать дополнительные настройки: метатеги, редиректы и т.д. Создавать и редактировать страницы могут только сотрудники.

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

Конфигурация виджетов

Конфигурацию виджета можно настроить через TypeScript-конфиг. Редактор предоставляет интерфейс для регистрации каждого компонента через Widget.createFactory. 

Мы сделали больше десяти вариантов полей на все случаи жизни:

• StringField — для ввода текстовой строки;

• EditorField — для вызова редактора Editor.js;

• RangeField — для выбора значения из диапазона;

• ComplexField — сложное поле, которое может содержать другие поля;

• SlotField — для размещения других виджетов;

• AutocompleteField — поле с автозаполнением, которое предлагает варианты при вводе;

• UploadField — для загрузки файлов;

• OptionsField — поле с выбором из заранее заданных опций;

• RadioField — поле с выбором одного варианта из нескольких;

• DropField — поле, позволяющее вкладывать одни виджеты в другие до бесконечности;

• Кастомное поле — для уникальных задач (можно описать своё поле, наследуясь от базового поля field).

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

Первая MVP-версия

В первую версию конструктора вошли:

• 3 layout-компонента, которые есть во всех страницах (меню, префутер, футер);

• 15 контентных блоков, которые наполняются текстами и иллюстрациями; 

• 4 вида форм, с помощью которых пользователи оставляют заявки на подключение;

• 1 SEO-компонент для продвинутой настройки.

Мы старались сделать конструктор максимально гибким. Если бы делали единый виджет форм, он выглядел бы как космолет с тысячью полей. Поэтому сделали четыре типовых вида и много настроек (разделы, подразделы и т.д.).

Большинство компонентов у нас уже были свёрстаны, но пришлось сделать рефакторинг, т.к. мы обнаружили некоторые несоответствия с дизайн-системой.

Вот для примера страница, созданная через конструктор — выглядит довольно объёмно, как наш типовой лендинг. 

Конструктор V2.0

Изначально мы задумывали конструктор, чтобы быстро делать SEO-страницы. Поэтому использовали крупные блоки и просто наполняли их текстами. 

Позже решили применить конструктор для сайта Универмага — это магазин Точка Банк с мерчём. Здесь использовали гибкий атомарный подход: вместо крупных блоков сделали акцент на работу с отдельными элементами (как zero block в Tilda). 

Вот что у нас получилось: главная страница Универмага целиком построена дизайнером в конструкторе без единой строчки кода. 

Точно так же сделали ещё несколько лендингов. Неожиданным решением от дизайнера стало использовать видео вместо анимации. Но мы быстро поняли намёк и сейчас делаем для этого отдельный виджет (:

Внутри всё работает точно так же, как в первоначальном варианте. Есть набор базовых элементов, из которых можно собирать блоки. Для каждого проекта «атомы» регистрируются отдельно, чтобы сохранить уникальный стиль. 

Что мы получили в итоге 

Конструктор закрыл нашу первоначальную потребность — мы научились создавать SEO-страницы без участия разработчиков только силами редактора. Можно пропускать этапы тестирования, вёрстки и код-ревью. Просто собираем страницу, проверяем её и сразу же отправляем в прод.

В «Универмаге» благодаря конструктору появилась возможность создавать лендинги и самостоятельно менять баннер на главной (раньше для этого нужно было пройти тот же «квест» с полным циклом). Теперь можно реагировать на инфоповоды и быстро обновлять контент.