Шаблонизаторы интерфейса даже в век "тяжелых" фреймворков типа React/Angular/Vue остаются популярной темой и ее стоит рассмотреть как начинающим программистам, так и людям, обладающим определенным опытом в веб-разработке.
Может показаться, что шаблонизаторы не очень распространены, но их существуют десятки, все они применяются на практике и у каждого есть свои особенности, достоинства и недостатки.
Для начала определимся, что же такое "шаблонизатор", для чего он нужен и где применяется.
По своей сути, шаблонизатор - это специальное программное обеспечение, использующее HTML-представление для генерации конечного вида, отправляемого в ответ на запрос клиента.
Веб-шаблоны применяются для создания сайтов и страниц любого типа, так как шаблон выполняет роль незаполненного бланка документа, одинакового для любых представлений до заполнения данными.
Для "современного веба" характерны двойные проекты, например: React/Angular/Vue для клиентской части и NodeJS/Django/PHP для серверной части. Разработчики, фактически пишут ДВА приложения для решения одной задачи. Для больших проектов или проектов с большой интерактивностью это вполне оправдано, а для проектов малого и среднего масштаба?
Знание шаблонизаторов и методов их внедрения в проект дает возможность бэк-энд разработчику с минимальными знаниям CSS-фреймворков и JavaScript сформировать и запустить проект вполне высокого качества без привлечения веб-программистов.
Основная цель шаблонизатора - это разделение представления от программного кода. В частности, применение шаблонизаторов улучшает читаемость и тестируемость кода. При этом, дизайном и программированием могут заниматься совершенно разные люди, так как данные связываются "точечно", ровно в тех местах, в которых это нужно, а может и один человек, чередуя виды деятельности или распределяя работу над кодом и представлением во времени.
Здесь так же следует отметить, что шаблон - это, по сути, "контракт" между клиентом и данными сервера. А раз это контракт, то его формирование - ответственная работа. Поэтому шаблонизаторы часто создаются с элементами настоящего языка программирования. Поддерживаются элементы объектно-ориентированного программирования, в частности наследование.
Все шаблоны создаются согласно принципу повторного использования и возможности передачи третьим лицам. Это значит, что хороший шаблон становится объектом интеллектуальной собственности и предметом продажи через интернет. Существует множество коммерческих сайтов, которые предлагают бесплатные или платные шаблоны, а также продают лицензии на их использование.
Любой шаблонизатор работает с "движком" внутри фреймворка, поверх которого он используется. Движок анализирует написанный шаблон, выделяет из него специализированные тэги и связывает с данными для формирования представления страницы перед отправкой на сторону клиента. Таким образом шаблонизатор может условно подчиняться формуле:
(источник_данных + текст_шаблона) * движок = представление.
Для каждого языка программирования существует свой перечень стандартных шаблонизаторов, хотя есть и независимые от языка. Среди всего множество зависимых шаблонизаторов можно выделить следующе: Java (Apache Velocity, FreeMaker, Thymeleaf), PHP (Smarty, Twig, Blade, Volt), Python (Jinja2, Django Templates), Ruby on Rails (eRuby, Haml), JavaScript (Handlebars, Pug, Underscore, Haml).
Среди независимых можно выделить Mustache, Handlebars, Jade. При этом, они еще и являются наиболее используемыми согласно статистике.
Например Django Template имеет очень простой синтаксис и его шаблон:
My first name is {{ first_name }}.
My last name is {{ last_name }}.
<ul>
{% for item in items %}
<li>Item: {{ item.name }} </li>
{% endfor %}
</ul>
после передачи клиенту представляет собой следующее:
My first name is John.
My last name if Snow.
- Name 1
- Name 2
...
То есть при помощи шаблонизаторов можно легко создать интерфейс страницы, а потом заполнить его данными для каждого клиента! При этом шаблонизатор поддерживает секции, наследование и условия, так что представление может быть разделено не только между кодом и шаблоном, но так же между несколькими шаблонами, которые, могут включаться или не включаться в представление без единой строки JavaScript.
Конечно, страницы с шаблонами формируются на стороне сервера. Этот процесс называется Server Side Rendering (серверный рендеринг, SSR).
SSR и шаблоны легко подвергаются SEO оптимизации, причем без дополнительных библиотек и фреймворков, ведь не все поисковые движки умеют обрабатывать и исполнять JavaScript для отрисовки, например, React приложений и само по себе время краулинга (анализа) каждого сайта ограничено.
SSR положительно влияет на воспринимаемую пользователем общую производительность проекта. Это особенно видно на слабых машинах и при медленном или мобильном интернете. Нет необходимости дожидаться покаJavaScript скачается, обработается и выполнится. Браузеру остается только отобразить готовый HTML сразу, не дожидаясь JavaScript - и пользователь уже может читать контент. Таким образом сокращается фаза "пассивного ожидания". Браузер после "рендера" просто проходится по готовому DOM, проверяя, что он совпадает с тем, что сформировалось для пользователя, и добавляет слушателей событий, если таковые имеются.
SSR используется тогда, когда нужна максимальная производительность и отзывчивость сайта для клиента, но за это можно "заплатить" дополнительными ресурсами сервера. При серверном рендеринге формируется весь HTML страницы. Это полностью исключает необходимость дополнительных запросов данных со стороны клиента в начальной точке выгрузки страницы из сервера.
Падение производительности может наблюдаться только в том случае, когда на формирование первой страницы тратится время на сервере. Эта проблема решается кэшированием на стороне сервера. Далее все HTML ответы на стандартные запросы уже "известны" и время отклика "стремится к нулю".
Конечно, серверный рендеринг - это не панацея. Его работа сопровождается вычислительными затратами, необходимостью кэширования, мемоизации и наличием продвинутых систем управления памятью, но позволяет извлекать больше актуальных данных и отвечать на более полный список запросов, чем при статическом или чисто клиентском рендеренге.
Различные типы рендеринга мы рассмотрим в наших следующих статьях. Единственное, что тут можно еще сказать, так это то, что SSR на основе шаблонов дал жизнь таким современным, но еще мало распространенным технологиям как Gatsby, Jekyll, Svelte и Metalsmith.
В качестве заключения мы можем сказать, что использование шаблонизаторов вполне оправдано для небольших проектов и стартапов, в которых на первом месте лежит не интерактивность веб-компонентов, а актуальность данных, скорость загрузки и минимизация нагрузки на устройство потребителя контента. Ну или разработку ведет один или два человека без поддержки "чистых" веб-программистов.