Pug и другие шаблонизаторы

Pug — не единственный шаблонизатор для Node.js. Главное его отличие — собственный синтаксис на отступах. Остальные популярные шаблонизаторы оставляют обычный HTML и добавляют в него вставки. Сравним их на одной задаче — списке напитков из массива menu.

Один список на четырёх шаблонизаторах

На Pug, файл src/index.pug:

ul
  each item in menu
    li #{item.name} — $#{item.price}

Pug выдаёт такой HTML, а три варианта ниже дают тот же список:

<ul>
  <li>Эспрессо — $2</li>
  <li>Капучино — $3</li>
</ul>

EJS — HTML со вставками обычного JavaScript (его использует курс Express):

<ul>
  <% menu.forEach((item) => { %>
    <li><%= item.name %> — $<%= item.price %></li>
  <% }) %>
</ul>

Nunjucks — HTML с тегами {% %} для логики и {{ }} для вывода:

<ul>
  {% for item in menu %}
    <li>{{ item.name }} — ${{ item.price }}</li>
  {% endfor %}
</ul>

Handlebars — HTML с минимумом логики: только простые условия, циклы и помощники:

<ul>
  {{#each menu}}
    <li>{{name}} — ${{price}}</li>
  {{/each}}
</ul>

Сравнение

Когда выбирать Pug

• Вы пишете разметку сами и цените краткость: нет закрывающих тегов, нельзя забыть закрыть div.
• Нужны макеты, подключения и миксины, а логика — обычный JavaScript, без нового языка.
• Сайт собирается заранее или отдаётся сервером на Node.js.

Когда лучше другой

• Разметку правят люди, знающие только HTML, или вы часто копируете готовые куски HTML: их придётся переводить в Pug.
• Проект уже построен на другом шаблонизаторе, например EJS в курсе Express.
• Нужна большая экосистема: Pug развивается медленно — версия 3 вышла в 2020 году, с тех пор выходят только исправления.

Чем Pug отличается от HTML

Обычный HTML-файл ничего не знает о данных: список из двадцати напитков придётся написать вручную, а шапку — скопировать на каждую страницу. Pug решает обе задачи при сборке, а браузер всё равно получает обычный HTML. Если на сайте одна страница без повторов, шаблонизатор не нужен — хватит HTML.

Частая ошибка

Вставить в файл .pug кусок HTML, скопированный из другого проекта. Строки, которые начинаются с <, Pug переносит как есть, но строка с одним текстом для него — тег:

<p>
  Свежий кофе каждый день.
</p>

Pug пытается прочитать «Свежий» как имя тега, и сборка останавливается с ошибкой «unexpected text». Переводите скопированную разметку на Pug целиком: p Свежий кофе каждый день.