Рендеринг нестандартных интерфейсов на стороне сервера: «Элемент» в качестве бекенда для HTMX

«1С:Предприятие.Элемент» предоставляет широкий спектр возможностей для создания приложений различных форматов. Приложения на Технологии по умолчанию поддерживают множество пользовательских сценариев, работу с разных типов устройств, работают в разных браузерах и на разных размерах экранов. Такая универсальность по умолчанию подразумевает ряд определенных вендором правил и рекомендаций по проектированию пользовательских интерфейсов.

Рисунок 1 – Пример интерфейса приложения на «1С:Элемент»

Предлагаемый фреймворк показался удобным в задачах построения строгих интерфейсов, а язык и архитектура Элемента настолько приятная, что на нем хочется писать всё больше. Поэтому не хотелось ограничиваться сценариями, предоставленными вендором и мы внутри команды начали развивать идеи дополнительных возможностей в применении Технологии "1С:Предприятие.Элемент". Приведенный в статье пример демонстрирует один из способов какие задачи можно решать с помощью сочетания различных инструментов и не является рекомендацией.

Забегая вперед, наиболее удачным для «мира 1С» оказалось совместное использования Элемента с JavaScript библиотекой HTMX. При наиболее используемом подходе к разработке веб-сайтов клиент получает данные в формате JSON и должен самостоятельно управлять их отображением на странице. После получения JSON контента разработчику нужно вручную преобразовать эти данные в конечный HTML. При всей гибкости и удобства современных инструментов фронтенд разработки, написания клиентского кода в таком случае потребует дополнительных затрат и, в большинстве случаев, разработка ведется на отличной от серверной части технологии.

Какой подход предлагает HTMX?

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

1. При каком событии делать запрос
2. По какому адресу обращаться за HTML фрагментом
3. В каком месте DOM дерева разместить ответ

Эту задачу и решает HTMX, который с помощью лаконичного синтаксиса позволяет управлять этими свойствами напрямую из HTML разметки.

Рисунок 2 – Пример ответа сервера при работе с HTMX

HTMX – это современная легковесная JavaScript библиотека, которая позволяет управлять поведением AJAX через атрибуты у узлов HTML.

hx-get – Выполняет GET запрос по указанному адресу, по умолчанию заменяет телом ответа содержимое тега, из которого вызывался

hx-target – Назначает элемент, у которого произойдет замена, может быть как классом так и идентификатором

hx-swap – «Режим» замены, заменяет только содержимое тега или тег целиком

Только с помощью перечисленных атрибутов можно реализовать уже множество элементов для взаимодействия с веб-страницей. Использование такого подхода решает главную проблему SSR (Рендеринг на стороне сервера) приложений – малая динамичность и необходимость перерисовывать всё содержимое HTML при взаимодействии. Такие приложения могут быть более производительными, поскольку не требуют дополнительных вычислений на стороне клиента, и ощущаются отзывчивыми.

Рисунок 3 – Пример тега с атрибутом HTMX

Почему Элемент отлично сочетается с HTMX

Рисунок 4 – Пример формирования компонента интерфейса в «Элементе»

1. Необходимые нам http методы поднимаются в «1 клик» средствами сервера Элемента
2. Встроенные механизмы авторизации и аутентификации работают из коробки
3. Синтаксис языка, в частности для работы со строками, очень удобен для работы с HTMX
4. Возможность определения нескольких «интерфейсов» как объекта 1 проекта.

Рисунок 5 – Пример альтернативного интерфейс главного экрана, реализован с помощью HTMX

Рисунок 6 – Альтернативный интерфейс работы с табличной частью объекта «Заявка на мастер класс»

Триггеры запросов

Атрибут hx-trigger в HTMX позволяет разработчикам определять, какие события на стороне клиента будут инициировать ответы от сервера.

Помимо привычных событий, например, click или load, HTMX позволяет отправлять с сервера произвольные события.

Для того чтобы вызвать событие на клиенте, нужно при формировании ответа указать идентификатор события в заголовке «Hx-Trigger»

Рисунок 7 -Пример ответа от сервера с триггером «updateTable» в заголовке

Это означает что мы можем привязать любой запрос на наше событие «updateTable». Это позволяет создавать сложные взаимодействия между компонентами, где выполнение 1 действия влияет сразу на несколько компонентов.

Например, при выборе продукции, обновляется не только кнопка «добавить», но и актуализируется список выбранной продукции:

Рисунок 8 – Пример взаимодействия между разными частями DOM дерева

Минимальное взаимодействие с JavaScript

JavaScript это очень мощный инструмент, совместное использование которого с другими технологиями является частью множества успешных продуктов. Однако, если речь идёт о создании нового приложения, не всегда стоит расширять список используемых технологий только ради использования новых технологий – это может потребовать дополнительных компетенций внутри команды и, как следствие, затрат на реализацию приложения.

При подходе, который мы рассматриваем сегодня, прикладной разработчик продолжает писать весь код на встроенном языке «1С:Предприятие.Элемент». Мы любим синтаксис языка Элемента, поэтому если решаемая задача позволяет ограничиться только его использованием при прочих равных – HTMX позволит не прибегать к использованию JavaScript вовсе. Однако и не ограничивает проект технически – если специфический JavaScript код всё-таки понадобится, его можно также встроить в проект.

Это позволяет работать с интерфейсом, например, с помощью такого синтаксиса:

Рисунок 9 – Алгоритм маршрутизации на Элементе

Рисунок 10 – Метод обработки добавления продукции в заявку

Рисунок 11 – Метод отображения доступных желаемых дат

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

Мы получаем стек, который сочетает в себе всю мощь и скорость разработки от ORM модели «1С:Предприятие» (Справочники, Документы, Регистры, Запросы), удобный, современный язык «Элемента»: функциональные типы, контрактное программирование, гибкость современных веб приложений и, самое главное, свободу выбора: разработчик сможет сочетать формы с HTMX вместе с «родными» формами.