У нас в Точка Банк много продуктов, для которых нужны 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-страницы без участия разработчиков только силами редактора. Можно пропускать этапы тестирования, вёрстки и код-ревью. Просто собираем страницу, проверяем её и сразу же отправляем в прод.

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

Frontender`s Spectre

[ITDoctor] Создание сайта на Tilda с нуля от интерфейса до домена, работа с Zero Block

Конструктор лендингов: как мы научились делать сайты без разработчиков