Найти в Дзене

Шаблонизаторы HTML

Когда я занимался только версткой, передо мной в какой-то момент остро встал один момент. Имея в проекте 20 сверстанных страниц, клиент попросил изменить одну мелкую деталь в HTML-разметке. И, сюрприз, я изменял все это на всех страницах. И это было действительно грустно.

Через какое-то время я познакомился с шаблонизаторами HTML. С помощью новых знаний научился делить шаблон на модули и подключать их на нужных страницах. Необходимо изменить header? Не вопрос, меняешь в одном месте.

Таких шаблонизаторов целый зоопарк: Mustache, Handlebars, EJS... Но лучше всех зашел Pug (в то время его еще не переименовали и он назывался Jade).

Да, для того, чтобы работать с подобными инструментами, пришлось освоить Gulp, но рано или поздно это необходимо сделать всем 😉

Почему в то время выбор пал на Pug? Потому что надоело писать HTML-теги, хотелось чего-то нового. С помощью Pug вы будто пишите книгу: абзацы, отступы, все атрибуты в скобках. Создание разметки превратилось в удовольствие. Но все это дело вкуса, вы можете работать с любым шаблонизатором, который удобен именно вам.

Но как понять, что вам не хватает обычного HTML? На мой взгляд, есть 3 основных момента:
1️⃣ Вы используете в верстке много повторяющихся элементов и вам надоело править их для каждой страницы отдельно.
2️⃣ Вы хотите использовать циклы для отображения каких-либо элементов на странице (например, список ссылок в меню можно выводить с помощью цикла for в большинстве шаблонизаторов).
3️⃣ Возможно, у вас есть условие, при котором нужно выводить определенный блок, а другой в этот момент скрывать. В большинстве подобных инструментов есть возможность использовать блок if.

Когда я перешел на frontend-фреймворки, нужда в шаблонизаторах отпала. Например, на том же Vue писать свои компоненты на нативном HTML оказалось настоящим кайфом.

Но расширяя горизонты и изучая NodeJS я понял, что от Pug/EJS/Handlebars не уйти и если хочешь динамично выводить данные на странице - используй вышеупомянутые инструменты. Впрочем, это уже другая история.

А какой шаблонизатор используете вы и по какой причине? Или вы за обычный HTML?