Аналіз технологій шаблонізації HTML-документів на відповідність ключовим вимогам

Функціональні сценарії

  • Створення HTML-шаблонів для генерації PDF-витягів з реєстру

  • Створення HTML-шаблонів для генерації поштових повідомлень

Розглянуті рішення

Шаблонізація

Технології шаблонізації

В рамках аналізу розглядаються підходи з використанням наступних технологій шаблонізації:

  • Freemarker - технологія шаблонізації, яка дозволяє на базі статичного шаблону (ftl / ftlh) зі спеціальними директивами та вхідних даних згенерувати вихідний HTML-документ

  • Thymeleaf - технологія шаблонізації, яка дозволяє на базі статичного HTML-шаблону зі спеціальними атрибутами та вхідних даних згенерувати вихідний HTML-документ

Опис шаблонів

Файл шаблону описує статичну структуру документу з використанням спеціальних конструкцій для заповнення динамічними даними. Результатом роботи процесора шаблонізації є фінальний HTML-документ заповнений даними.

Приклад Freemarker-шаблону

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="center">
        <img src="images/ua.png" class="trinity" alt="UA" />
    </div>
    <#if user == "Joe">
        <p class="header text14">
            ...
        </p>
    </#if>
    <table>
        <tbody>
            <#list animals as animal>
                <tr>
                    <td>${animal.name}</td>
                    <td>${animal.price} Euros</td>
                </tr>
            </#list>
        </tbody>
    </table>
</body>
</html>

Приклад Thymeleaf-шаблону

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="center">
        <img src="images/ua.png" class="trinity" alt="UA" />
    </div>
    <p class="header text14" th:if="${user} == 'Joe'">
        ...
    </p>
    <table>
        <tbody>
            <tr th:each="animal: ${animals}">
                <td th:text="${animal.name}"></td>
                <td th:text="${animal.price} + ' Euros'"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Підходи до моделювання шаблонів з використанням WYSIWYG та шаблонізатора

  • Кастомізація WYSIWYG-редактора для коректної підтримки Freemarker-шаблонів з директивами

  • Формування власного підходу на базі атрибутів до серіалізації/десеріалізації Freemarker-шаблонів з директивами у HTML-сумісний вигляд для використання у WYSIWYG-редакторі

  • Використання HTML-сумісної технології шаблонізації на базі спеціальних атрибутів Thymeleaf та її натуральне використання у WYSIWYG-редакторі

Аналіз шаблонізаторів для використання із контентом, згенерованим через WYSIWYG-редактор

До розгляду було представлено два варіанти шаблонізаторів - Freemarker та Thymeleaf. Обидва з них реалізовані на Java, втім обидва з них розглядались в першу чергу на предмет відповідності можливостям підтримки форматування контенту на стороні WYSIWYG-редакторів.

Freemarker пропонує використання кастомних елементів для шаблонізації, подібних HTML-тегам. За потреби замість синтаксису, подібного HTML-тегам, можна використовувати вставки, де символи < та > замінені на квадратні дужки ([ та ] відповідно). Втім, такий підхід створює суттєві проблеми при виведенні згенерованого контенту у режимі перегляду в браузері. Згенерований HTML-контент обробляється браузером та перетворюється у DOM-дерево зі своїми правилами; HTML-подібні вставки та вставки із квадратними дужками банально не відповідають правилам браузера, через що він, фактично, псує структуру контенту при перегляді. Водночас деякі з WYSIWYG-редакторів спираються саме на цей механізм обробки DOM-дерева браузером для перевірки коректності контенту, через що виникають складнощі не тільки із переглядом контенту, але і з його збереженням (наприклад, у TinyMCE та Quill).

У якості альтернативи було розглянуто використання підходу, за якого директиви шаблонізації будуть зберегатись не у вигляді додаткових елементів у рамках HTML-документу, а у якості додаткових атрибутів наявних елементів HTML-документу. В теорії, сучасні браузери розглядають будь-які можливі атрибути як валідні для будь-якого елементу, що позбавляє нас ризику "псування" контенту під час відображення та/або збереження контенту.

В результаті у якості рішення, яке відповідало би цим вимогам, було обрано Thymeleaf. Він використовує атрибути на кшталт th:if, th:value, th:each у якості директив. Такі атрибути значно легше зробити підтримуваними в тому числі WYSIWYG-редакторами.

Рішення за результатами аналізу

Рекомендовано використання Thymeleaf у якості шаблонізатора для HTML-документів з урахуванням сумісності з WYSIWYG-редактором.