Top.Mail.Ru
Заказать консультацию
специалиста 1С
Отправить заявку

ИнфоСофт использует файлы «cookie» с целью персонализации сервисов и повышения удобства пользования веб-сайтом. Вы можете запретить обработку сookies в настройках браузера. Пожалуйста, ознакомьтесь с политикой использования cookies.
Оставаясь на сайте, вы соглашаетесь с политикой использования cookies.

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

Воякин Данил Посмотреть все статьи >> Специалист по внедрению 1С франчайзинговой сети "ИнфоСофт".
13.01.2025
428
Время прочтения - 8 мин.
Заказать консультацию

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

1.png

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


Этот материал рассчитан в первую очередь на разработчиков и технических специалистов и рассматривает нестандартный сценарий использования Технологии. Приведенный в статье пример демонстрирует один из способов решения задач с помощью сочетания различных инструментов и не является рекомендацией.

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

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


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

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

  1. При каком событии делать запрос.

  2. По какому адресу обращаться за HTML фрагментом.

  3. В каком месте DOM дерева разместить ответ.

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

2.png

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


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

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

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

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

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

3.png

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


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

4.png

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


  1. Необходимые http методы поднимаются в «1 клик» средствами сервера Элемента.

  2. Встроенные механизмы авторизации и аутентификации работают из коробки.

  3. Синтаксис языка, в частности для работы со строками, очень удобен для работы с HTMX.

  4. Возможность определения нескольких «интерфейсов» как объекта 1 проекта.

 

5.png

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

 

6.png

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

Подпишитесь на дайджест!
Подпишитесь на дайджест, и получайте ежемесячно подборку полезных статей.

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

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

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

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

7.png

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


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

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

8.png

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


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

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

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

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

9.png

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


10.png

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


11.png

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

 

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

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


Заказать консультацию специалиста 1С
Оставьте заявку и наши эксперты проконсультируют вас по данной статье.
Отправить заявку
Рассказать друзьям
Для разработчиков 1С 1С:Предприятие.Элемент Личные кабинеты
Вам может быть интересно: