HTML Template Language

HTML Template Language (HTL, ранее — Sightly) — это язык шаблонов, предназначенный для создания статических и динамических HTML-страниц в веб-приложениях, разработанный компанией Adobe Systems. HTL является частью платформы Adobe Experience Manager (AEM) и служит альтернативой другим серверным языкам шаблонов, таким как JSP (JavaServer Pages), ESP (ECMAScript Server Pages) или PHP. Основное назначение HTL — разделение логики представления и бизнес-логики, обеспечивая безопасную и эффективную генерацию HTML-кода на стороне сервера.

История

HTL был впервые представлен компанией Adobe в 2013 году как часть Adobe Experience Manager 6.0. Изначально язык назывался Sightly, но в 2016 году был переименован в HTML Template Language для лучшего отражения его сути и интеграции с экосистемой AEM. Разработка HTL была мотивирована необходимостью создания более безопасного и простого в использовании языка шаблонов по сравнению с JSP, который часто приводил к смешиванию Java-кода и HTML-разметки, что усложняло поддержку и увеличивало риск XSS-уязвимостей (межсайтового скриптинга). HTL был спроектирован с нуля, чтобы минимизировать эти риски и обеспечить строгое разделение ответственности.

Основные принципы и философия

HTL основан на нескольких ключевых принципах, отличающих его от традиционных языков шаблонов:

• Безопасность по умолчанию: HTL автоматически экранирует (экранирует) все выводимые данные в зависимости от контекста (HTML, атрибут, JavaScript, CSS). Это значительно снижает риск XSS-атак, так как разработчику не нужно вручную применять функции экранирования.
• Разделение ответственности: Шаблоны HTL не содержат бизнес-логики. Вся логика инкапсулирована в Java-классах (для AEM) или JavaScript-модулях (для других реализаций). HTL лишь вызывает методы этих классов и отображает результаты.
• Читаемость и простота: Синтаксис HTL близок к обычному HTML, что делает его интуитивно понятным для веб-разработчиков. В шаблоны добавляются только специальные атрибуты данных (data-sly-*), которые не нарушают структуру HTML.
• Строгая типизация и контекстная обработка: HTL понимает типы данных (строки, числа, массивы, объекты) и автоматически выбирает правильный способ их отображения в HTML.

Синтаксис и основные конструкции

Синтаксис HTL основан на использовании специальных атрибутов HTML, начинающихся с data-sly-. Эти атрибуты управляют логикой шаблона, не нарушая валидности HTML-документа.

Выражения

Выражения в HTL заключаются в фигурные скобки с долларом: ${...}. Они используются для вывода значений переменных, вызова методов и выполнения простых операций.

• Вывод переменной: <p>${user.name}</p>
• Вызов метода: <p>${currentPage.title}</p>
• Условные выражения: <p>${user.isAdmin ? 'Администратор' : 'Пользователь'}</p>

Блочные операторы (data-sly-*)

Блочные операторы применяются к HTML-элементам и управляют их отображением или повторением.

• data-sly-use: Подключает Java-класс или JavaScript-объект (модель) к шаблону.

``html <div data-sly-use.model="com.example.models.MyModel"> <p>${model.someProperty}</p> </div> ``

• data-sly-test: Условный оператор. Если выражение истинно, элемент отображается; если ложно — элемент и его содержимое удаляются из DOM.

``html <div data-sly-test="${user.isLoggedIn}"> Добро пожаловать, ${user.name}! </div> ``

• data-sly-list: Цикл для перебора коллекций или массивов.

``html <ul data-sly-list="${page.listChildren}"> <li>${item.title}</li> </ul> ` Внутри цикла доступны специальные переменные, такие как item (текущий элемент), itemList` (список с информацией об индексе, размере и т.д.).

• data-sly-repeat: Аналог data-sly-list, но для повторения элемента без привязки к коллекции (например, для создания определённого количества пустых элементов).
• data-sly-include: Включает содержимое другого шаблона HTL в текущий.

``html <div data-sly-include="header.html"></div> ``

• data-sly-resource: Включает ресурс AEM (например, компонент) в текущий шаблон.

``html <div data-sly-resource="${'navigation' @ resourceType='core/wcm/components/navigation/v1/navigation'}"></div> ``

• data-sly-template: Определяет именованный шаблон (фрагмент), который можно повторно использовать в других шаблонах.

``html <template data-sly-template.myTemplate="${@ name, age}"> <p>Имя: ${name}, Возраст: ${age}</p> </template> ` Вызов шаблона: <div data-sly-call="${myTemplate @ name='Иван', age=30}"></div>`

• data-sly-attribute: Устанавливает значение атрибута HTML-элемента. Это более безопасный способ, чем использование выражений внутри атрибутов.

``html <a data-sly-attribute.href="${link.url}">${link.text}</a> ``

• data-sly-element: Динамически изменяет имя HTML-элемента.

``html <div data-sly-element="${isParagraph ? 'p' : 'span'}">Текст</div> ``

Контекстное экранирование

HTL автоматически определяет контекст, в котором используется выражение, и применяет соответствующее экранирование:

• HTML-контекст: Экранирование символов <, >, &, ", '. (например, в содержимом элемента <p>${text}</p>)
• Атрибутный контекст: Экранирование символов, опасных для атрибутов (например, в <a href="${url}">).
• JavaScript-контекст: Экранирование для строк внутри <script> блоков.
• CSS-контекст: Экранирование для значений в стилях.
• URI-контекст: Экранирование для URL-адресов.

Применение

HTL является стандартным языком шаблонов для Adobe Experience Manager (AEM). Он используется для создания всех типов компонентов AEM, включая:

• Компоненты страниц: Определяют структуру и содержимое веб-страниц.
• Компоненты контента: Отображают конкретные элементы контента, такие как текстовые блоки, изображения, списки, карусели.
• Диалоговые окна: Формируют интерфейс для редактирования компонентов в редакторе AEM.
• Фрагменты опыта: Создают повторно используемые блоки контента.

HTL также может использоваться за пределами AEM, в других веб-приложениях на Java, благодаря открытой реализации — Apache Sightly (часть проекта Apache Sling). Однако основное распространение и поддержка HTL связаны с экосистемой Adobe.

Критика и ограничения

Несмотря на свои преимущества, HTL имеет ряд недостатков и ограничений:

• Привязка к AEM: HTL тесно интегрирован с AEM и Apache Sling. Использование его вне этой экосистемы требует значительных усилий и не является распространённой практикой.
• Ограниченная логика: HTL намеренно ограничен в возможностях программирования. В нём нельзя объявлять переменные, выполнять сложные вычисления или использовать циклы с произвольными условиями. Вся сложная логика должна быть вынесена в Java-классы.
• Сложность отладки: Ошибки в HTL-шаблонах могут быть трудны для отладки, так как они часто проявляются как пустые страницы или неожиданное поведение, а не как понятные сообщения об ошибках.
• Отсутствие поддержки в популярных IDE: На момент появления HTL не имел полноценной поддержки в популярных средах разработки, таких как IntelliJ IDEA или Eclipse, что затрудняло автодополнение и проверку синтаксиса. Впоследствии поддержка была добавлена, но остаётся менее зрелой, чем для JSP или Thymeleaf.
• Сложность для новичков: Разработчикам, не знакомым с концепцией строгого разделения логики и представления, может быть сложно адаптироваться к HTL, так как он требует создания Java-моделей даже для простых операций.

Интересные факты

• HTL изначально назывался Sightly, что является игрой слов (sightly — «красивый», «приятный взгляду»). Переименование в HTML Template Language было сделано для унификации и лучшего понимания.
• HTL является одним из немногих языков шаблонов, который был спроектирован с учётом безопасности как основного требования, а не как дополнительной функции.
• Спецификация HTL является открытой и доступна на GitHub, что позволяет разработчикам создавать собственные реализации для других языков программирования.

Источники

1. Adobe Experience Manager Documentation: "HTML Template Language (HTL)".
2. Apache Sling Documentation: "Sightly (HTL) Scripting Engine".
3. Спецификация HTL на GitHub (Adobe-Marketing-Cloud/htl-spec).
4. Статья "Introduction to HTL" на сайте Adobe Developer.